Articles in this section
Category / Section

How to Load Different Content Page as Tab items content in .NET MAUI TabView?

3 mins read

To load different content pages as Tab items content in the .NET MAUI TabView, follow the given steps:

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

Step 2: Create a ViewModel class for assigning created content pages in the observable collection. Give the 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

output.gif

Download the complete sample in GitHub

Conclusion
Hope you enjoyed learning about how to load different content page as Tab items content in the .NET MAUI TabView (SfTabView).

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!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied