How To Load Different Content Page As Tab Items Content In .NET MAUI Tabview

Updated on Feb 15, 2024
maui maui-tabview tabview tabview-controller

This article illustrates to load different content page as Tab items content in .NET MAUI TabView, follow the below steps,

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

Step 2: Create multiple .NET MAUI content pages in the sample and create new ViewModel class for assigning created content pages in the observable collection.

Step 3: Give proper name for the observable collection and add the content pages to that collection.

XAML

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

C#

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();
        Items.Add(new SfTabItem { Content = page1.Content, Header = "Page1" });
        Items.Add(new SfTabItem { Content = page2.Content, Header = "Page2" });
        Items.Add(new SfTabItem { Content = page3.Content, Header = "Page3" });
        Items.Add(new SfTabItem { Content = page4.Content, Header = "Page4" });
    }
}

Output

TabViewPages.png