Class SfTabView

Represents a tab view control that contains multiple items that share the same space on the screen.

Inheritance

System.Object

SfTabView

Namespace: Syncfusion.Maui.Toolkit.TabView

Assembly: Syncfusion.Maui.Toolkit.dll

Syntax

public class SfTabView : ContentView, IParentThemeElement, IThemeElement

Examples

The following 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;
Content = tabView;

Constructors

SfTabView()

Initializes a new instance of the SfTabView class.

Declaration

public SfTabView()

Fields

CenterButtonSettingsProperty

Identifies the CenterButtonSettings bindable property.

Declaration

public static readonly BindableProperty CenterButtonSettingsProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ContentItemTemplateProperty

Identifies the ContentItemTemplate bindable property.

Declaration

public static readonly BindableProperty ContentItemTemplateProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ContentTransitionDurationProperty

Identifies the ContentTransitionDuration bindable property.

Declaration

public static readonly BindableProperty ContentTransitionDurationProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

EnableSwipingProperty

Identifies the EnableSwiping bindable property.

Declaration

public static readonly BindableProperty EnableSwipingProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

EnableVirtualizationProperty

Identifies the EnableVirtualization bindable property.

Declaration

public static readonly BindableProperty EnableVirtualizationProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

FontAutoScalingEnabledProperty

Identifies the FontAutoScalingEnabled bindable property.

Declaration

public static readonly BindableProperty FontAutoScalingEnabledProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

HeaderDisplayModeProperty

Identifies the HeaderDisplayMode bindable property.

Declaration

public static readonly BindableProperty HeaderDisplayModeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

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
Microsoft.Maui.Controls.BindableProperty

IndicatorBackgroundProperty

Identifies the IndicatorBackground bindable property.

Declaration

public static readonly BindableProperty IndicatorBackgroundProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

IndicatorCornerRadiusProperty

Identifies the IndicatorCornerRadius bindable property.

Declaration

public static readonly BindableProperty IndicatorCornerRadiusProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

IndicatorPlacementProperty

Identifies the IndicatorPlacement bindable property.

Declaration

public static readonly BindableProperty IndicatorPlacementProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

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
Microsoft.Maui.Controls.BindableProperty

IsCenterButtonEnabledProperty

Identifies the IsCenterButtonEnabled bindable property.

Declaration

public static readonly BindableProperty IsCenterButtonEnabledProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

IsContentTransitionEnabledProperty

Identifies the IsContentTransitionEnabled bindable property.

Declaration

public static readonly BindableProperty IsContentTransitionEnabledProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

IsScrollButtonEnabledProperty

Identifies the IsScrollButtonEnabled bindable property.

Declaration

public static readonly BindableProperty IsScrollButtonEnabledProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ItemsProperty

Identifies the Items bindable property.

Declaration

public static readonly BindableProperty ItemsProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ItemsSourceProperty

Identifies the ItemsSource bindable property.

Declaration

public static readonly BindableProperty ItemsSourceProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ScrollButtonBackgroundProperty

Identifies the ScrollButtonBackground bindable property.

Declaration

public static readonly BindableProperty ScrollButtonBackgroundProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ScrollButtonColorProperty

Identifies the ScrollButtonColor bindable property.

Declaration

public static readonly BindableProperty ScrollButtonColorProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

SelectedIndexProperty

Identifies the SelectedIndex bindable property.

Declaration

public static readonly BindableProperty SelectedIndexProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

TabBarBackgroundProperty

Identifies the TabBarBackground bindable property.

Declaration

public static readonly BindableProperty TabBarBackgroundProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

TabBarHeightProperty

Identifies the TabBarHeight bindable property.

Declaration

public static readonly BindableProperty TabBarHeightProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

TabBarPlacementProperty

Identifies the TabBarPlacement bindable property.

Declaration

public static readonly BindableProperty TabBarPlacementProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

TabHeaderAlignmentProperty

Identifies the TabHeaderAlignment bindable property.

Declaration

public static readonly BindableProperty TabHeaderAlignmentProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

TabHeaderPaddingProperty

Identifies the TabHeaderPadding bindable property.

Declaration

public static readonly BindableProperty TabHeaderPaddingProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

TabWidthModeProperty

Identifies the TabWidthMode bindable property.

Declaration

public static readonly BindableProperty TabWidthModeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Properties

CenterButtonSettings

Gets or sets a value that can be used to customize the appearance of the center button in Tab View.

Declaration

public CenterButtonSettings CenterButtonSettings { get; set; }

Property Value

Type	Description
CenterButtonSettings	It accepts the CenterButtonSettings value.

Examples

The below examples show, how to use the property.

XAML
C#

<tabView:SfTabView x:Name="tabView" IsCenterButtonEnabled="True">
<tabView:SfTabView.CenterButtonSettings>
<tabView:CenterButtonSettings Height="75", Width="150", CornerRadius="10"
							  StrokeThickness="3" Stroke="Aqua" TextColor="HotPink"
							  Title="Home" FontAttributes="Bold" FontSize="20" FontFamily="SevillanaRegular"
							  ImageSource="home.png" DisplayMode="ImageWithText" ImageSize="30"/>
</tabView:SfTabView.CenterButtonSettings>
</tabView:SfTabView>

var tabView = new SfTabView()
{
   IsCenterButtonEnabled=true,
   CenterButtonSettings = new CenterButtonSettings()
   {
       Height = 75,
       Width = 150,
       CornerRadius = 10,
       StrokeThickness = 3,
       Stroke = Colors.Aqua,
       TextColor = Colors.HotPink,
       Title = "Home",
       FontAttributes = FontAttributes.Bold,
       FontSize = 20,
       FontFamily = "SevillanaRegular",
       ImageSource = "home.png",
       DisplayMode = CenterButtonDisplayMode.ImageWithText,
       ImageSize = 30
   },
};

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 Microsoft.Maui.Controls.DataTemplate object that is used to display the content. The default is null.

Examples

Here is an example of how to set the ContentItemTemplate property.

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;
});
Content = tabView;

ContentTransitionDuration

Gets or sets a value that can be used to modify the duration of content transition in the tab view.

Declaration

public double ContentTransitionDuration { get; set; }

Property Value

Type	Description
System.Double	A double value that specifies the duration of the content transition. The default value is 100.

Examples

Here is an example of how to set the ContentTransitionDuration property.

XAML
C#

<tabView:SfTabView ContentTransitionDuration="0.5" />

SfTabView tabView = new SfTabView();
tabView.ContentTransitionDuration = 0.5;

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	A boolean value indicating whether swiping is enabled. The default value is false.

Examples

Here is an example of how to set the EnableSwiping property.

XAML
C#

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

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

tabView.Items = tabItems;
Content = tabView;

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.

Examples

Here is an example of how to set the EnableVirtualization property.

XAML
C#

<tabView:SfTabView EnableVirtualization="True" />

SfTabView tabView = new SfTabView();
tabView.EnableVirtualization = true;

FontAutoScalingEnabled

Gets or sets a value that determines whether 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	A boolean value indicating whether font auto-scaling is enabled. The default value is false.

Examples

Here is an example of how to set the FontAutoScalingEnabled property.

XAML
C#

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

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

tabView.Items = tabItems;
Content = tabView;

HeaderDisplayMode

Gets or sets the display mode for the tab header, determining whether to show the image or text.

Declaration

public TabBarDisplayMode HeaderDisplayMode { get; set; }

Property Value

Type	Description
TabBarDisplayMode	It accepts the TabBarDisplayMode values, and the default value is Default.

Remarks

When the HeaderDisplayMode is set to Default, the image and text will be displayed on the tab bar based on the Header and ImageSource properties of the tab item.

Examples

Here is an example of how to set the HeaderDisplayMode property.

XAML
C#

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

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

tabView.Items = tabItems;
Content = tabView;

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.

Examples

Here is an example of how to set the HeaderHorizontalTextAlignment property.

XAML
C#

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

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

tabView.Items = tabItems;
Content = tabView;

HeaderItemTemplate

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

Declaration

public DataTemplate HeaderItemTemplate { get; set; }

Property Value

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

Examples

Here is an example of how to set the HeaderItemTemplate property.

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;
});
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

Here is an example of how to set the IndicatorBackground property.

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;
Content = tabView;

IndicatorCornerRadius

Gets or sets a value that can be used to customize the corner radius of the selection indicator.

Declaration

public CornerRadius IndicatorCornerRadius { get; set; }

Property Value

Type	Description
Microsoft.Maui.CornerRadius	A Microsoft.Maui.CornerRadius value that specifies the corner radius of the selection indicator. The default value is -1.

Examples

Here is an example of how to set the IndicatorCornerRadius property.

XAML
C#

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

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

tabView.Items = tabItems;
Content = tabView;

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

Here is an example of how to set the IndicatorPlacement property.

XAML
C#

<tabView:SfTabView IndicatorPlacement="Fill">
    <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;
Content = tabView;

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

Remarks

It's not applicable when the IndicatorPlacement is Fill.

Examples

Here is an example of how to set the IndicatorWidthMode property.

XAML
C#

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

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

tabView.Items = tabItems;
Content = tabView;

IsCenterButtonEnabled

Gets or sets a value that indicates whether the center button is enabled in the Tab View.

Declaration

public bool IsCenterButtonEnabled { get; set; }

Property Value

Type	Description
System.Boolean	It accepts the Boolean values, and the default value is false.

Examples

Here is an example of how to set the IsCenterButtonEnabled property.

XAML
C#

<tabView:SfTabView IsCenterButtonEnabled="True" />

SfTabView tabView = new SfTabView();
tabView.IsCenterButtonEnabled = true;

IsContentTransitionEnabled

Gets or sets a value that determines whether a transition animation is enabled for the tab content when switching between tabs.

Declaration

public bool IsContentTransitionEnabled { get; set; }

Property Value

Type	Description
System.Boolean	It accepts the Boolean values, and the default value is True.

Examples

Here is an example of how to set the IsContentTransitionEnabled property.

XAML
C#

<tabView:SfTabView IsContentTransitionEnabled="True" />

SfTabView tabView = new SfTabView();
tabView.IsContentTransitionEnabled = true;

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	A boolean value indicating whether the scroll buttons are enabled. The default value is false.

Examples

Here is an example of how to set the IsScrollButtonEnabled property.

XAML
C#

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

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

tabView.Items = tabItems;
Content = tabView;

Items

Gets or sets the collection used to populate the content of the SfTabView.

Declaration

public TabItemCollection Items { get; set; }

Property Value

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

Examples

Here is an example of how to set the Items property.

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;
Content = tabView;

ItemsSource

Gets or sets the collection used to populate the content of the SfTabView.

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

Here is an example of how to set the ItemsSource property.

XAML
C#

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

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

ScrollButtonBackground

Gets or sets a value that can be used to customize the scroll button’s background color in the SfTabView.

Declaration

public Brush ScrollButtonBackground { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	A Microsoft.Maui.Controls.Brush value that specifies the background color of the scroll button.

ScrollButtonColor

Gets or sets a value that can be used to customize the scroll button’s foreground color in the SfTabView.

Declaration

public Color ScrollButtonColor { get; set; }

Property Value

Type	Description
Microsoft.Maui.Graphics.Color	A Microsoft.Maui.Graphics.Color value that specifies the foreground color of the scroll button.

SelectedIndex

Gets or sets the index specifying the currently selected item.

Declaration

public int SelectedIndex { get; set; }

Property Value

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

Examples

Here is an example of how to set the SelectedIndex property.

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;
Content = tabView;

TabBarBackground

Gets or sets the background color of the tab bar.

Declaration

public Brush TabBarBackground { get; set; }

Property Value

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

Examples

Here is an example of how to set the TabBarBackground property.

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;
Content = tabView;

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

Here is an example of how to set the TabBarHeight property.

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;
Content = tabView;

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

Here is an example of how to set the TabBarPlacement property.

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;
Content = tabView;

TabHeaderAlignment

Gets or sets a value that can be used to customize the header position of the MAUI TabView. 

Declaration

public TabHeaderAlignment TabHeaderAlignment { get; set; }

Property Value

Type	Description
TabHeaderAlignment	It accepts the TabHeaderAlignment values, and the default value is TabHeaderAlignment.Start.

Remarks

Note: This property is applicable only when the TabWidthMode is set to SizeToContent.

Examples

Here is an example of how to set the TabHeaderAlignment property.

XAML
C#

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

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

tabView.Items = tabItems;
Content = tabView;

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: This is only applied to the SizeToContent type of TabWidthMode.

Examples

Here is an example of how to set the TabHeaderPadding property.

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;
Content = tabView;

TabWidthMode

Gets or sets the value for determining the width mode of each tab.

Declaration

public TabWidthMode TabWidthMode { get; set; }

Property Value

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

Examples

Here is an example of how to set the TabWidthMode property.

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;
Content = tabView;

Events

CenterButtonTapped

Occurs when the Center button is tapped.

Declaration

public event EventHandler<EventArgs> CenterButtonTapped

Event Type

Type
System.EventHandler<System.EventArgs>

Examples

Here is an example of how to register the CenterButtonTapped event.

SfTabView tabView = new SfTabView();
tabView.CenterButtonTapped += OnCenterButtonTapped;
private void OnCenterButtonTapped(object sender, SelectionChangingEventArgs e)
{
   e.Cancel = true;
}

SelectionChanged

Occurs when the current selection is changed.

Declaration

public event EventHandler<TabSelectionChangedEventArgs> SelectionChanged

Event Type

Type
System.EventHandler<TabSelectionChangedEventArgs>

Examples

Here is an example of how to register the SelectionChanged event.

SfTabView tabView = new SfTabView();
tabView.SelectionChanged += TabView_SelectionChanged;
private void TabView_SelectionChanged(object sender, TabSelectionChangedEventArgs e)
{
    double newValue = e.NewIndex;
    double oldValue = e.OldIndex;
    e.Handled = true;
}

SelectionChanging

Occurs when the selection is changing in the SfTabView.

Declaration

public event EventHandler<SelectionChangingEventArgs> SelectionChanging

Event Type

Type
System.EventHandler<SelectionChangingEventArgs>

Examples

Here is an example of how to register the SelectionChanging event.

SfTabView tabView = new SfTabView();
tabView.SelectionChanging += TabView_SelectionChanging;
private void TabView_SelectionChanging(object sender, SelectionChangingEventArgs e)
{
   var selectionChangingIndex = e.Index;
   e.Cancel = true;
}

TabItemTapped

Occurs when the header of the tab item is tapped.

Declaration

public event EventHandler<TabItemTappedEventArgs> TabItemTapped

Event Type

Type
System.EventHandler<TabItemTappedEventArgs>

Examples

Here is an example of how to register the TabItemTapped event.

SfTabView tabView = new SfTabView();
tabView.SelectionChanged += TabView_TabItemTapped;
private void TabView_TabItemTapped(object sender, TabItemTappedEventArgs e)
{
   e.TabItem.FontSize = 26;
   e.Cancel = true;
}