Class SfTabView

Represents the SfTabView control that contains multiple items that share the same space on the screen.

Inheritance

System.Object

SfTabView

Namespace: Syncfusion.Maui.TabView

Assembly: Syncfusion.Maui.TabView.dll

Syntax

public class SfTabView : ContentView

Examples

The below example shows how to initialize the tab view.

XAML
C#

<tabView:SfTabView x:Name="tabView">
    <tabView:SfTabView.Items>

        <tabView:SfTabItem Header="Item 1">
            <tabView:SfTabItem.Content>
                <Grid BackgroundColor="Red" />
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>

        <tabView:SfTabItem Header="Item 2">
            <tabView:SfTabItem.Content>
                <Grid BackgroundColor="Green" />
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>

        <tabView:SfTabItem Header="Item 3">
            <tabView:SfTabItem.Content>
                <Grid BackgroundColor="Blue" />
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>

    </tabView:SfTabView.Items>
</tabView:SfTabView>

var tabView = new SfTabView();
Grid allContactsGrid = new Grid { BackgroundColor = Colors.Red };
Grid favoritesGrid = new Grid { BackgroundColor = Colors.Green };
Grid contactsGrid = new Grid { BackgroundColor = Colors.Blue };
var tabItems = new TabItemCollection
{
    new SfTabItem()
    {
        Header = "Item 1",
        Content = allContactsGrid
    },
    new SfTabItem()
    {
        Header = "Item 2",
        Content = favoritesGrid
    },
    new SfTabItem()
    {
        Header = "Item 3",
        Content = contactsGrid
    }
};

tabView.Items = tabItems;
this.Content = tabView;

Constructors

SfTabView()

Initializes a new instance of the SfTabView class.

Declaration

public SfTabView()

Fields

ContentItemTemplateProperty

Identifies the ContentItemTemplate bindable property.

Declaration

public static readonly BindableProperty ContentItemTemplateProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ContentItemTemplate bindable property.

HeaderItemTemplateProperty

Identifies the HeaderItemTemplate bindable property.

Declaration

public static readonly BindableProperty HeaderItemTemplateProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for HeaderItemTemplate bindable property.

IndicatorBackgroundProperty

Identifies the IndicatorBackground bindable property.

Declaration

public static readonly BindableProperty IndicatorBackgroundProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for IndicatorBackground bindable property.

IndicatorPlacementProperty

Identifies the IndicatorPlacement bindable property.

Declaration

public static readonly BindableProperty IndicatorPlacementProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for IndicatorPlacement bindable property.

ItemsProperty

Identifies the Items bindable property.

Declaration

public static readonly BindableProperty ItemsProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Items bindable property.

ItemsSourceProperty

Identifies the ItemsSource bindable property.

Declaration

public static readonly BindableProperty ItemsSourceProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ItemsSource bindable property.

SelectedIndexProperty

Identifies the SelectedIndex bindable property.

Declaration

public static readonly BindableProperty SelectedIndexProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SelectedIndex bindable property.

TabBarBackgroundProperty

Identifies the TabBarBackground bindable property.

Declaration

public static readonly BindableProperty TabBarBackgroundProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for TabBarBackground bindable property.

TabBarHeightProperty

Identifies the TabBarHeight bindable property.

Declaration

public static readonly BindableProperty TabBarHeightProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for TabBarHeight bindable property.

TabBarPlacementProperty

Identifies the TabBarPlacement bindable property.

Declaration

public static readonly BindableProperty TabBarPlacementProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for TabBarPlacement bindable property.

TabWidthModeProperty

Identifies the TabWidthMode bindable property.

Declaration

public static readonly BindableProperty TabWidthModeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for TabWidthMode bindable property.

Properties

ContentItemTemplate

Gets or sets the template that is used to display the content.

Declaration

public DataTemplate ContentItemTemplate { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.DataTemplate	A DataTemplate object that is used to display the content. The default is null.

Examples

The below example shows how to set content template in Tab View.

XAML
C#

<tabView:SfTabView ItemsSource="{Binding TabItems}" >
 <tabView:SfTabView.ContentItemTemplate>
       <DataTemplate>
            <Label TextColor = "Black"  Text="{Binding Name}" />
      </DataTemplate>
</tabView:SfTabView.ContentItemTemplate>
</tabView:SfTabView>

var tabView = new SfTabView();
tabView.ItemsSource = model.TabItems;
tabView.ContentItemTemplate = new DataTemplate(() =>
{
  var nameLabel = new Label { TextColor = Colors.Black };
  nameLabel.SetBinding(Label.TextProperty, "Name");
  return nameLabel;
});
this.Content = tabView;

HeaderItemTemplate

Gets or sets the template that is used to display the header.

Declaration

public DataTemplate HeaderItemTemplate { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.DataTemplate	A DataTemplate object that is used to display the header. The default is null.

Examples

The below example shows how to set header template in Tab View.

XAML
C#

<tabView:SfTabView ItemsSource="{Binding TabItems}" >
<tabView:SfTabView.HeaderItemTemplate>
    <DataTemplate >
       <Label Padding = "5,10,10,10"  Text="{Binding Name}"/>
    </DataTemplate>
</tabView:SfTabView.HeaderItemTemplate>
</tabView:SfTabView>

var tabView = new SfTabView();
tabView.ItemsSource = model.TabItems;
tabView.HeaderItemTemplate = new DataTemplate(() =>
{
   var nameLabel = new Label { Padding = new Thickness("5,10,10,10") };
   nameLabel.SetBinding(Label.TextProperty, "Name");
   return nameLabel;
});
this.Content = tabView;

IndicatorBackground

Gets or sets a brush that describes the selection indicator's background.

Declaration

public Brush IndicatorBackground { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	Specifies the background of the selection indicator. The default value is SolidColorBrush(Color.FromArgb("#6200EE"))".

Examples

The below example shows how to set the background of the indicator.

XAML
C#

<tabView:SfTabView IndicatorBackground="Red">
    <tabView:SfTabItem Header="TAB 1">
        <tabView:SfTabItem.Content>
            <Label Text="Content" />
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>
</tabView:SfTabView>

var tabView = new SfTabView();
tabView.IndicatorBackground = Colors.Red; 
var tabItems = new TabItemCollection
{
    new SfTabItem
    {
        Header = "TAB 1",
        Content = new Label { Text = "Content" }
    }
};

tabView.Items = tabItems;

IndicatorPlacement

Gets or sets the placement of the selection indication.

Declaration

public TabIndicatorPlacement IndicatorPlacement { get; set; }

Property Value

Type	Description
TabIndicatorPlacement	One of the TabIndicatorPlacement enumeration that specifies the placement of the selection indicator. The default mode is Bottom.

Examples

The below example shows how to place the selection indicator to the bottom of the tab.

XAML
C#

<tabView:SfTabView IndicatorPlacement="Bottom">
    <tabView:SfTabItem Header="TAB 1">
        <tabView:SfTabItem.Content>
            <Label Text="Content" />
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>
</tabView:SfTabView>

var tabView = new SfTabView();
tabView.IndicatorPlacement = TabIndicatorPlacement.Fill;
var tabItems = new TabItemCollection
{
    new SfTabItem
    {
        Header = "TAB 1",
        Content = new Label { Text = "Content" }
    }
};

tabView.Items = tabItems;

Items

Gets or sets the collection used to populate the content of the Tab View.

Declaration

public TabItemCollection Items { get; set; }

Property Value

Type	Description
TabItemCollection	The collection used to populate the content of the Tab View. The default is an empty collection.

Examples

The below example shows how to assign the collection to the Tab View.

XAML
C#

<tabView:SfTabView>
    <tabView:SfTabView.Items>
        <tabView:SfTabItem Header="TAB 1">
            <tabView:SfTabItem.Content>
                <Label Text="Content" />
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
    </tabView:SfTabView.Items>
</tabView:SfTabView>

var tabView = new SfTabView();
var tabItems = new TabItemCollection
{
    new SfTabItem
    {
        Header = "TAB 1",
        Content = new Label { Text = "Content" }
    }
};

tabView.Items = tabItems;

ItemsSource

Gets or sets the collection used to populate the content of the Tab View.

Declaration

public IList ItemsSource { get; set; }

Property Value

Type	Description
System.Collections.IList	The collection used to populate the content of the Tab View. The default is an empty collection.

Examples

The below example shows how to assign the collection to the Tab View.

XAML
C#

<tabView:SfTabView ItemsSource="{Binding TabItems}" />

SfTabView tabView = new SfTabView();
tabView.ItemsSource = model.TabItems;
this.Content = tabView;

SelectedIndex

Gets or sets the index specifying the currently selected item.

Declaration

public double SelectedIndex { get; set; }

Property Value

Type	Description
System.Double	A zero-based index of the currently selected item.

Examples

The below example shows how to set the selected index for the Tab View.

XAML
C#

<tabView:SfTabView SelectedIndex="2">
    <tabView:SfTabItem Header="TAB 1">
        <tabView:SfTabItem.Content>
            <Label Text="Content 1" />
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>

    <tabView:SfTabItem Header="TAB 2">
        <tabView:SfTabItem.Content>
            <Label Text="Content 2" />
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>

    <tabView:SfTabItem Header="TAB 3">
        <tabView:SfTabItem.Content>
            <Label Text="Content 3" />
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>
</tabView:SfTabView>

var tabView = new SfTabView();
tabView.SelectedIndex = 2;
var tabItems = new TabItemCollection
{
    new SfTabItem
    {
        Header = "TAB 1",
        Content = new Label { Text = "Content 1" }
    },
    new SfTabItem
    {
        Header = "TAB 2",
        Content = new Label { Text = "Content 2" }
    },
    new SfTabItem
    {
        Header = "TAB 3",
        Content = new Label { Text = "Content 3" }
    }
};

tabView.Items = tabItems;

TabBarBackground

Gets or sets a brush that describes the tab header's background.

Declaration

public Brush TabBarBackground { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	Specifies the background of the tab bar. The default value is null.

Examples

The below example shows how to apply the font family for a tab item.

XAML
C#

<tabView:SfTabView TabBarBackground="Pink">
    <tabView:SfTabItem Header="TAB 1">
        <tabView:SfTabItem.Content>
            <Label Text="Content" />
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>
</tabView:SfTabView>

var tabView = new SfTabView();
tabView.TabBarBackground = Colors.Pink;
var tabItems = new TabItemCollection
{
    new SfTabItem
    {
        Header = "TAB 1",
        Content = new Label { Text = "Content" }
    }
};

tabView.Items = tabItems;

TabBarHeight

Gets or sets the height of the tab header.

Declaration

public double TabBarHeight { get; set; }

Property Value

Type	Description
System.Double	Specifies the height of the tab header. The default value is 48d.

Examples

The below example shows how to set the height of the tab header.

XAML
C#

<tabView:SfTabView TabBarHeight="80">
    <tabView:SfTabItem Header="TAB 1">
        <tabView:SfTabItem.Content>
            <Label Text="Content" />
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>
</tabView:SfTabView>

var tabView = new SfTabView();
tabView.TabBarHeight = 80;
var tabItems = new TabItemCollection
{
    new SfTabItem
    {
        Header = "TAB 1",
        Content = new Label { Text = "Content" }
    }
};

tabView.Items = tabItems;

TabBarPlacement

Gets or sets whether the tab header should be at the bottom or at the top of the tab content.

Declaration

public TabBarPlacement TabBarPlacement { get; set; }

Property Value

Type	Description
TabBarPlacement	One of the TabBarPlacement enumeration that specifies the placement of the tab bar. The default mode is Top.

Examples

The below example shows how to place the header to the bottom.

XAML
C#

<tabView:SfTabView TabBarPlacement="Bottom">
    <tabView:SfTabItem Header="TAB 1">
        <tabView:SfTabItem.Content>
            <Label Text="Content" />
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>
</tabView:SfTabView>

var tabView = new SfTabView();
tabView.TabBarPlacement = TabBarPlacement.Bottom;
var tabItems = new TabItemCollection
{
    new SfTabItem
    {
        Header = "TAB 1",
        Content = new Label { Text = "Content" }
    }
};

tabView.Items = tabItems;

TabWidthMode

Gets or sets the method for determining the width of each tab.

Declaration

public TabWidthMode TabWidthMode { get; set; }

Property Value

Type	Description
TabWidthMode	One of the TabWidthMode enumeration that specifies the tab item's width. The default mode is Default.

Examples

The below example shows how to set the tab width based on the text length.

XAML
C#

<tabView:SfTabView TabWidthMode="SizeToContent">
    <tabView:SfTabItem Header="TAB 1">
        <tabView:SfTabItem.Content>
            <Label Text="Content" />
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>
</tabView:SfTabView>

var tabView = new SfTabView();
tabView.TabWidthMode = TabWidthMode.SizeToContent;
var tabItems = new TabItemCollection
{
    new SfTabItem
    {
        Header = "TAB 1",
        Content = new Label { Text = "Content" }
    }
};

tabView.Items = tabItems;

Methods

OnPropertyChanged(String)

OnPropertyChanged method

Declaration

protected override void OnPropertyChanged(string propertyName = null)

Parameters

Type	Name	Description
System.String	propertyName	Property Name

Events

SelectionChanged

Occurs when the current selection is changed.

Declaration

public event EventHandler<TabSelectionChangedEventArgs> SelectionChanged

Event Type

Type	Description
System.EventHandler<TabSelectionChangedEventArgs>

TabItemTapped

Occurs when the header of the tab item is tapped.

Declaration

public event EventHandler<TabItemTappedEventArgs> TabItemTapped

Event Type

Type	Description
System.EventHandler<TabItemTappedEventArgs>