Class SfTabView
Represents the SfTabView control that contains multiple items that share the same space on the screen.
Inheritance
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.
<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>
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.
<tabView:SfTabView ItemsSource="{Binding TabItems}" >
<tabView:SfTabView.ContentItemTemplate>
<DataTemplate>
<Label TextColor = "Black" Text="{Binding Name}" />
</DataTemplate>
</tabView:SfTabView.ContentItemTemplate>
</tabView:SfTabView>
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.
<tabView:SfTabView ItemsSource="{Binding TabItems}" >
<tabView:SfTabView.HeaderItemTemplate>
<DataTemplate >
<Label Padding = "5,10,10,10" Text="{Binding Name}"/>
</DataTemplate>
</tabView:SfTabView.HeaderItemTemplate>
</tabView:SfTabView>
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.
<tabView:SfTabView IndicatorBackground="Red">
<tabView:SfTabItem Header="TAB 1">
<tabView:SfTabItem.Content>
<Label Text="Content" />
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
</tabView:SfTabView>
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.
<tabView:SfTabView IndicatorPlacement="Bottom">
<tabView:SfTabItem Header="TAB 1">
<tabView:SfTabItem.Content>
<Label Text="Content" />
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
</tabView:SfTabView>
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.
<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>
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.
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.
<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>
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.
<tabView:SfTabView TabBarBackground="Pink">
<tabView:SfTabItem Header="TAB 1">
<tabView:SfTabItem.Content>
<Label Text="Content" />
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
</tabView:SfTabView>
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.
<tabView:SfTabView TabBarHeight="80">
<tabView:SfTabItem Header="TAB 1">
<tabView:SfTabItem.Content>
<Label Text="Content" />
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
</tabView:SfTabView>
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.
<tabView:SfTabView TabBarPlacement="Bottom">
<tabView:SfTabItem Header="TAB 1">
<tabView:SfTabItem.Content>
<Label Text="Content" />
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
</tabView:SfTabView>
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.
<tabView:SfTabView TabWidthMode="SizeToContent">
<tabView:SfTabItem Header="TAB 1">
<tabView:SfTabItem.Content>
<Label Text="Content" />
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
</tabView:SfTabView>
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> |