Skip to content

The sample demonstrates how to load different content page as Tab items content in .NET MAUI TabView

Notifications You must be signed in to change notification settings

SyncfusionExamples/How-to-load-different-content-page-as-Tab-items-content-in-.NET-MAUI-TabView

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

About

The sample demonstrates how to load different content page as Tab items content in .NET MAUI TabView

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages