Data binding does not work on content pages that are loaded into tab item

[Timo Schmelcher]

I got a TabView: 

<ContentPage xmlns:tabView="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView"
             xmlns:local="clr-namespace:YourNamespace"
             x:Class="YourNamespace.MainPage">
    <ContentPage.BindingContext>
        <local:ViewModel />
    </ContentPage.BindingContext>
    <tabView:SfTabView ItemsSource="{Binding Items}" />
</ContentPage>

The viewmodel to this page looks something like this:

public class ViewModel : INotifyPropertyChanged
{
    private TabItemCollection items;
    public event PropertyChangedEventHandler PropertyChanged;

    public TabItemCollection Items
    {
        get { return items; }
        set
        {
            items = value;
            OnPropertyChanged(nameof(Items));
        }
    }

    public ViewModel()
    {
        SetItems();
    }

    private void SetItems()
    {
        Items = new TabItemCollection();
        Items.Add(new SfTabItem { Content = new TabViewPage1(), Header = "Tab 1" });
        Items.Add(new SfTabItem { Content = new TabViewPage2(), Header = "Tab 2" });
        Items.Add(new SfTabItem { Content = new TabViewPage3(), Header = "Tab 3" });
    }

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

The static content of the 3 pages does show correctly, but whenever databinding is involved the data does not show.

What could I be doing wrong here?

[Brundha Velusamy]

Hi Timo Schmelcher,

 

Thank you for reaching out to Syncfusion support!

 

To resolve the issue with data binding not updating correctly within the TabItem content, please ensure that the BindingContext of the ContentView or ContentPage is set to the TabItem content as well. This step is necessary for the bindings from the view model to function as expected within each TabItem.

 

Code Snippet

//TabViewPageViewModel.cs

….

TabViewPage1 page1 = new TabViewPage1();

…

SfTabItem firstTabItem = new SfTabItem { Content = page1 .Content, Header = "Page1" };

firstTabItem.Content.BindingContext = page1 .BindingContext;

…

Items.Add(firstTabItem);

…

 

For additional information, please refer to the following Knowledge Base article:

How to set the BindingContext for .NET MAUI TabItem using various pages?

 

We've also attached a sample project implementing this approach for your reference. Please take a look, and let us know if you have further questions or need additional assistance.

 

Regards,

Brundha V

Attachment: TabViewItemsSource_9dd19c0a.zip

[Timo Schmelcher]

Dear Brundha Velusamy,

thank you for your help. This solved my problem.

Best Regards,

Timo

[Timo Schmelcher]

Is there also a way to display the toolbar (title + toolbar items) of the individual ContentPages?

[Brundha Velusamy]

Hi Timo Schmelche,

We are glad to hear that, provide solution works fine at your end.

Query: Is there also a way to display the toolbar (title + toolbar items) of the individual ContentPages?

Based on your request, we understand that you want to customize the toolbar whenever the tab selection changes. You can accomplish this by using the SelectionChanged event of the TabView, as shown in the code snippet below.

Code snippet:

private void OnSelectionChanged(object sender, TabSelectionChangedEventArgs e)

{

    ToolbarItems.Clear();

 

    var tabView = sender as SfTabView;

 

    if (tabView != null)

    {

        var tabItem = tabView?.ItemsSource[(int)e.NewIndex];

        double selectedIndex = e.NewIndex;

        ContentPage page = viewModel.ContentPages[(int)selectedIndex];

        if (tabView?.SelectedIndex == selectedIndex)

        {

            this.Title = viewModel?.ContentPages[(int)selectedIndex].Title;

            foreach (var toolbarItem in page.ToolbarItems)

            {

                ToolbarItems.Add(toolbarItem);

            }

        }

    }

}

We've also attached a updated sample project implementing this approach for your reference along with demo video.

We hope this helps! If your requirements differ from the provided solution, please share more detailed specifications so we can assist you more effectively.

Regards,

Brundha V

Attachment: Sample_Demo_3e575b4b.zip

[Timo Schmelcher]

Dear Brundha Velusamy,

thank you for your help. Your example helped me to find my error.

It works fine now.

Best regards

Ti

[Preethi Rajakandham]

Hi Timo Schmelcher,

You're welcome.

We are glad to know that the reported problem has been resolved. We are marking this thread as solved. Please let us know if you require any further assistance on this. We will be happy to assist you.

Regards,

Preethi R