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, IParentThemeElement, IThemeElement
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. |
ContentTransitionDurationProperty
Identifies the ContentTransitionDuration bindable property.
Declaration
public static readonly BindableProperty ContentTransitionDurationProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ContentTransitionDuration bindable property. |
EnableSwipingProperty
Identifies the EnableSwiping bindable property.
Declaration
public static readonly BindableProperty EnableSwipingProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for EnableSwiping bindable property. |
FontAutoScalingEnabledProperty
Identifies the FontAutoScalingEnabled bindable property.
Declaration
public static readonly BindableProperty FontAutoScalingEnabledProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for FontAutoScalingEnabled bindable property. |
HeaderDisplayModeProperty
Identifies the HeaderDisplayMode bindable property.
Declaration
public static readonly BindableProperty HeaderDisplayModeProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for HeaderDisplayMode bindable property. |
HeaderHorizontalTextAlignmentProperty
Identifies the HeaderHorizontalTextAlignment bindable property.
Declaration
public static readonly BindableProperty HeaderHorizontalTextAlignmentProperty
Field Value
Type |
---|
Microsoft.Maui.Controls.BindableProperty |
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. |
IndicatorCornerRadiusProperty
Identifies the IndicatorCornerRadius bindable property.
Declaration
public static readonly BindableProperty IndicatorCornerRadiusProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for IndicatorCornerRadius 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. |
IndicatorStrokeThicknessProperty
Identifies the IndicatorStrokeThickness bindable property.
Declaration
public static readonly BindableProperty IndicatorStrokeThicknessProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for IndicatorStrokeThickness bindable property. |
IndicatorWidthModeProperty
Identifies the IndicatorWidthMode bindable property.
Declaration
public static readonly BindableProperty IndicatorWidthModeProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for IndicatorWidthMode bindable property. |
IsScrollButtonEnabledProperty
Identifies the IsScrollButtonEnabled bindable property.
Declaration
public static readonly BindableProperty IsScrollButtonEnabledProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for IsScrollButtonEnabled 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. |
ScrollButtonBackgroundColorProperty
Identifies the ScrollButtonBackgroundColor bindable property.
Declaration
public static readonly BindableProperty ScrollButtonBackgroundColorProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ScrollButtonBackgroundColor bindable property. |
ScrollButtonForegroundColorProperty
Identifies the ScrollButtonForegroundColor bindable property.
Declaration
public static readonly BindableProperty ScrollButtonForegroundColorProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ScrollButtonForegroundColor 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. |
TabHeaderPaddingProperty
Identifies the TabHeaderPadding bindable property.
Declaration
public static readonly BindableProperty TabHeaderPaddingProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for TabHeaderPadding 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>
ContentTransitionDuration
Gets or sets a value that can be used to modify the duration of content transition in Tab View.
Declaration
public double ContentTransitionDuration { get; set; }
Property Value
Type | Description |
---|---|
System.Double | It accepts the double values and the default value is 100. |
EnableSwiping
Gets or sets a value indicating whether swiping is enabled in SfTabView.
Declaration
public bool EnableSwiping { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | The default value is false. |
FontAutoScalingEnabled
Gets or sets a value that Determines whether or not the font of the control should scale automatically according to the operating system settings.
Declaration
public bool FontAutoScalingEnabled { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | It accepts Boolean values, and the default value is false. |
HeaderDisplayMode
Gets or sets the display mode for the tab header, determining whether to show the image and text.
Declaration
public TabBarDisplayMode HeaderDisplayMode { get; set; }
Property Value
Type | Description |
---|---|
TabBarDisplayMode | It accepts the TabHeaderDisplayMode values, and the default value is TabHeaderDisplayMode.Default. |
Remarks
When the HeaderDisplayMode is set to TabHeaderDisplayMode.Default, the image and text will be displayed on the tab bar based on the Header and ImageSource properties of the tab item.
HeaderHorizontalTextAlignment
Gets or sets a value that can be used to customize the horizontal text alignment in tab header.
Declaration
public TextAlignment HeaderHorizontalTextAlignment { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.TextAlignment | It accepts the HeaderHorizontalTextAlignment values, and the default value is Microsoft.Maui.TextAlignment.Center. |
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>
IndicatorCornerRadius
Gets or sets a value that can be used to customize the corner radius of selection indicator.
Declaration
public CornerRadius IndicatorCornerRadius { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.CornerRadius | It accepts the Microsoft.Maui.CornerRadius values and the default value is -1. |
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>
IndicatorStrokeThickness
Gets or sets a value that can be used to customize the indicator’s border height.
Declaration
public double IndicatorStrokeThickness { get; set; }
Property Value
Type | Description |
---|---|
System.Double | It accepts the double values and the default value is 3. |
IndicatorWidthMode
Gets or sets the value that can be used to customize the indicator width in the tab header.
Declaration
public IndicatorWidthMode IndicatorWidthMode { get; set; }
Property Value
Type | Description |
---|---|
IndicatorWidthMode | It accepts indicatorWidthMode values and the default value is IndicatorWidthMode.Fit. |
IsScrollButtonEnabled
Gets or sets a value indicating whether to enable the scroll buttons.
Declaration
public bool IsScrollButtonEnabled { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | The default value is false. |
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.
ScrollButtonBackgroundColor
Gets or sets a value that can be used to customize the scroll button’s background color in SfTabView.
Declaration
public Color ScrollButtonBackgroundColor { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.Graphics.Color | It accepts the Color values. |
ScrollButtonForegroundColor
Gets or sets a value that can be used to customize the scroll button’s foreground color in SfTabView.
Declaration
public Color ScrollButtonForegroundColor { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.Graphics.Color | It accepts the Color values. |
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>
TabHeaderPadding
Gets or sets the value that can be used to customize the padding of the tab header.
Declaration
public Thickness TabHeaderPadding { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.Thickness | Specifies the padding of the tab header. The default value is new Thickness(52,0,52,0). |
Remarks
Note: TabHeaderPadding is only applied to the SizeToContent type of TabWidthMode.
Examples
The below example shows how to set the selected index for the Tab View.
<tabView:SfTabView TabWidthMode="SizeToContent" TabHeaderPadding="5,10,5,10">
<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>
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 |
---|
System.EventHandler<TabSelectionChangedEventArgs> |
SelectionChanging
Occurs when the selection is changing in SfTabView.
Declaration
public event EventHandler<SelectionChangingEventArgs> SelectionChanging
Event Type
Type |
---|
System.EventHandler<SelectionChangingEventArgs> |
TabItemTapped
Occurs when the header of the tab item is tapped.
Declaration
public event EventHandler<TabItemTappedEventArgs> TabItemTapped
Event Type
Type |
---|
System.EventHandler<TabItemTappedEventArgs> |