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, IThemeElementExamples
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 ContentItemTemplatePropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for ContentItemTemplate bindable property. | 
ContentTransitionDurationProperty
Identifies the ContentTransitionDuration bindable property.
Declaration
public static readonly BindableProperty ContentTransitionDurationPropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for ContentTransitionDuration bindable property. | 
EnableRippleAnimationProperty
Identifies the EnableRippleAnimation bindable property.
Declaration
public static readonly BindableProperty EnableRippleAnimationPropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for EnableRippleAnimation bindable property. | 
EnableSwipingProperty
Identifies the EnableSwiping bindable property.
Declaration
public static readonly BindableProperty EnableSwipingPropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for EnableSwiping bindable property. | 
EnableVirtualizationProperty
Identifies the EnableVirtualization bindable property.
Declaration
public static readonly BindableProperty EnableVirtualizationPropertyField Value
| Type | 
|---|
| Microsoft.Maui.Controls.BindableProperty | 
FontAutoScalingEnabledProperty
Identifies the FontAutoScalingEnabled bindable property.
Declaration
public static readonly BindableProperty FontAutoScalingEnabledPropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for FontAutoScalingEnabled bindable property. | 
HeaderDisplayModeProperty
Identifies the HeaderDisplayMode bindable property.
Declaration
public static readonly BindableProperty HeaderDisplayModePropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for HeaderDisplayMode bindable property. | 
HeaderHorizontalTextAlignmentProperty
Identifies the HeaderHorizontalTextAlignment bindable property.
Declaration
public static readonly BindableProperty HeaderHorizontalTextAlignmentPropertyField Value
| Type | 
|---|
| Microsoft.Maui.Controls.BindableProperty | 
HeaderItemTemplateProperty
Identifies the HeaderItemTemplate bindable property.
Declaration
public static readonly BindableProperty HeaderItemTemplatePropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for HeaderItemTemplate bindable property. | 
IndicatorBackgroundProperty
Identifies the IndicatorBackground bindable property.
Declaration
public static readonly BindableProperty IndicatorBackgroundPropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for IndicatorBackground bindable property. | 
IndicatorCornerRadiusProperty
Identifies the IndicatorCornerRadius bindable property.
Declaration
public static readonly BindableProperty IndicatorCornerRadiusPropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for IndicatorCornerRadius bindable property. | 
IndicatorPlacementProperty
Identifies the IndicatorPlacement bindable property.
Declaration
public static readonly BindableProperty IndicatorPlacementPropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for IndicatorPlacement bindable property. | 
IndicatorStrokeThicknessProperty
Identifies the IndicatorStrokeThickness bindable property.
Declaration
public static readonly BindableProperty IndicatorStrokeThicknessPropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for IndicatorStrokeThickness bindable property. | 
IndicatorWidthModeProperty
Identifies the IndicatorWidthMode bindable property.
Declaration
public static readonly BindableProperty IndicatorWidthModePropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for IndicatorWidthMode bindable property. | 
IsScrollButtonEnabledProperty
Identifies the IsScrollButtonEnabled bindable property.
Declaration
public static readonly BindableProperty IsScrollButtonEnabledPropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for IsScrollButtonEnabled bindable property. | 
ItemsProperty
Identifies the Items bindable property.
Declaration
public static readonly BindableProperty ItemsPropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for Items bindable property. | 
ItemsSourceProperty
Identifies the ItemsSource bindable property.
Declaration
public static readonly BindableProperty ItemsSourcePropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for ItemsSource bindable property. | 
ScrollButtonBackgroundProperty
Identifies the ScrollButtonBackground bindable property.
Declaration
public static readonly BindableProperty ScrollButtonBackgroundPropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for ScrollButtonBackground bindable property. | 
ScrollButtonColorProperty
Identifies the ScrollButtonColor bindable property.
Declaration
public static readonly BindableProperty ScrollButtonColorPropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for ScrollButtonColor bindable property. | 
SelectedIndexProperty
Identifies the SelectedIndex bindable property.
Declaration
public static readonly BindableProperty SelectedIndexPropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for SelectedIndex bindable property. | 
TabBarBackgroundProperty
Identifies the TabBarBackground bindable property.
Declaration
public static readonly BindableProperty TabBarBackgroundPropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for TabBarBackground bindable property. | 
TabBarHeightProperty
Identifies the TabBarHeight bindable property.
Declaration
public static readonly BindableProperty TabBarHeightPropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for TabBarHeight bindable property. | 
TabBarPlacementProperty
Identifies the TabBarPlacement bindable property.
Declaration
public static readonly BindableProperty TabBarPlacementPropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for TabBarPlacement bindable property. | 
TabHeaderPaddingProperty
Identifies the TabHeaderPadding bindable property.
Declaration
public static readonly BindableProperty TabHeaderPaddingPropertyField Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.BindableProperty | The identifier for TabHeaderPadding bindable property. | 
TabWidthModeProperty
Identifies the TabWidthMode bindable property.
Declaration
public static readonly BindableProperty TabWidthModePropertyField 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. | 
EnableRippleAnimation
Gets or sets a value indicating whether ripple animation should be enabled on the Tab View.
Declaration
public bool EnableRippleAnimation { get; set; }Property Value
| Type | Description | 
|---|---|
| System.Boolean | It accepts the Boolean values, and the default value is  | 
Examples
Here is an example of how to set the EnableRippleAnimation property.
<tabView:SfTabView EnableRippleAnimation="False">
    <tabView:SfTabItem Header="TAB 1">
        <tabView:SfTabItem.Content>
            <Label Text="Content" />
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>
</tabView:SfTabView>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. | 
EnableVirtualization
Gets or sets a value indicating whether lazy loading is enabled during the initial load.
Declaration
public bool EnableVirtualization { get; set; }Property Value
| Type | Description | 
|---|---|
| System.Boolean | A boolean value indicating whether lazy loading is enabled. 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.
ScrollButtonBackground
Gets or sets a value that can be used to customize the scroll button’s background color in SfTabView.
Declaration
public Brush ScrollButtonBackground { get; set; }Property Value
| Type | Description | 
|---|---|
| Microsoft.Maui.Controls.Brush | It accepts brush values. | 
ScrollButtonColor
Gets or sets a value that can be used to customize the scroll button’s color in SfTabView.
Declaration
public Color ScrollButtonColor { 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
OnHandlerChanged()
Handler changed method.
Declaration
protected override void OnHandlerChanged()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> SelectionChangedEvent Type
| Type | 
|---|
| System.EventHandler<TabSelectionChangedEventArgs> | 
SelectionChanging
Occurs when the selection is changing in SfTabView.
Declaration
public event EventHandler<SelectionChangingEventArgs> SelectionChangingEvent Type
| Type | 
|---|
| System.EventHandler<SelectionChangingEventArgs> | 
TabItemTapped
Occurs when the header of the tab item is tapped.
Declaration
public event EventHandler<TabItemTappedEventArgs> TabItemTappedEvent Type
| Type | 
|---|
| System.EventHandler<TabItemTappedEventArgs> |