Category / Section
How to load different content page as Tab items Content
2 mins read
This section explains how to load different content page as Tab items Content.
Step 1: Create an SfTabview sample with all the necessary assemblies.
Refer to this Getting started documentation to create a simple SfTabview sample and configure it.
Step 2: Create a view model class and declare the properties that needs to be assigned
Step 3: Tab view is a content view control and don’t have support to load page as tab item content. To load the page as tab item content, add tab items with different page content and title or header content as like below code snippet
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();
TabViewItemPage1 page1 = new TabViewItemPage1();
TabViewItemPage2 page2 = new TabViewItemPage2();
TabViewItemPage3 page3 = new TabViewItemPage3();
TabViewItemPage4 page4 = new TabViewItemPage4();
Items.Add(new SfTabItem { Content = page1.Content, Title = "Page1" });
Items.Add(new SfTabItem { Content = page2.Content, Title = "Page2" });
Items.Add(new SfTabItem { Content = page3.Content, Title = "Page3" });
Items.Add(new SfTabItem { Content = page4.Content, Title = "Page4" });
}
}
Step 4: Initialize the Tab view in XAML page with the properties need to be assigned as like below code snippet
<ContentPage.BindingContext>
<local:ViewModel/>
</ContentPage.BindingContext>
<tabView:SfTabView Items="{Binding Items}"/>
Output:
You can find the sample in the following link: Sample
