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, IParentThemeElement, IThemeElement

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.

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.

ScrollButtonBackgroundProperty

Identifies the ScrollButtonBackground bindable property.

Declaration

public static readonly BindableProperty ScrollButtonBackgroundProperty

Field Value

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

ScrollButtonColorProperty

Identifies the ScrollButtonColor bindable property.

Declaration

public static readonly BindableProperty ScrollButtonColorProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ScrollButtonColor 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.

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;

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.

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;

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.

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;

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.

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;

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.

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;

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.

XAML
C#

<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>

var tabView = new SfTabView();
tabView.TabWidthMode = TabWidthMode.SizeToContent;
tabView.TabHeaderPadding = new Thickness(5, 10, 5, 10);
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;

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
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>