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

When working with the .NET MAUI TabView, it’s important to ensure that data binding is correctly set up so that the data is displayed within the tabs as expected. This article provides a guide on how to bind data to the respective fields within tab pages of the Tab View.

Step 1: Create a new sample in the .NET MAUI and initialize Tab View within the page with BindingContext.

XAML

<ContentPage.BindingContext>
    <local:ViewModel/>
</ContentPage.BindingContext>
<tabView:SfTabView  Items="{Binding Items}"/>

Step 2: Create different content pages that you need to display as a Tab Item and for each content page, set BindingContext from its respective ViewModel. For example,

XAML

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TabView.TabViewPage1"
             Title="TabViewPage1"
             xmlns:local="clr-namespace:TabView">
    <ContentPage.BindingContext>
        <local:TabViewPage1ViewModel/>
    </ContentPage.BindingContext>
    <VerticalStackLayout VerticalOptions="Center">
        <Label Text="{Binding Title}" VerticalOptions="Center" HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentPage>

C#

public class TabViewPage1ViewModel
{
    public string Title { get; set; }

    public TabViewPage1ViewModel()
    {
        Title = "Welcome to .NET MAUI!";
    }
}

Create as many content pages as you need for display within the Tab Item and its respective view model, like above.

Step 3: To bind data to the tab pages, you need to set up your ViewModel to manage the data for each tab. Here’s an example of how you can initialize your tab items and bind the context to each page:

C#

// ViewModel.cs

public class ViewModel : INotifyPropertyChanged
{
    private TabItemCollection items;
    public event PropertyChangedEventHandler PropertyChanged;
    public TabItemCollection Items
    {
        get { return items; }
        set
        {
            items = value;
            OnPropertyChanged("Items");
        }
    }
    
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    
    public ViewModel()
    {
        SetItems();
    }
    
    internal void SetItems()
    {
        Items = new TabItemCollection();
        TabViewPage1 page1 = new TabViewPage1();
        TabViewPage2 page2 = new TabViewPage2();
        TabViewPage3 page3 = new TabViewPage3();
        TabViewPage4 page4 = new TabViewPage4();
        SfTabItem firstTabitem = new SfTabItem{ Content = page1.Content, Header = "Page1" };
        firstTabitem.Content.BindingContext = page1.BindingContext;
    
        SfTabItem secondTabitem = new SfTabItem { Content = page2.Content, Header = "Page2" };
        secondTabitem.Content.BindingContext = page2.BindingContext; 
    
        SfTabItem thirdTabitem = new SfTabItem { Content = page3.Content, Header = "Page3" };
        thirdTabitem.Content.BindingContext = page3.BindingContext; 
    
        SfTabItem fourthTabitem = new SfTabItem { Content = page4.Content, Header = "Page4" };
        fourthTabitem.Content.BindingContext = page4.BindingContext;
    
        Items.Add(firstTabitem);
        Items.Add(secondTabitem);
        Items.Add(thirdTabitem);
        Items.Add(fourthTabitem);
    
    }
}

In this example, each Tab Item is initialized with the content and header, and the BindingContext of the content is set to the BindingContext of the respective page.

Please note that the code snippets provided in this article are for illustrative purposes and may require adjustments to fit the specific requirements of your application.

Output

Download the complete sample on GitHub

Conclusion

Hope you enjoyed learning about how to set the BindingContext for .NET MAUI Tab Item using various pages.

You can refer to our .NET MAUI Tab View’s feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Tab View documentation to understand how to present and manipulate data.

For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI Tab View and other .NET MAUI components.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!