menu

MAUI Toolkit

  • User Guide
  • Demos
  • Support
Class SfTabItem - MAUI-ToolKit API Reference | Syncfusion

    Show / Hide Table of Contents

    Class SfTabItem

    Represents a class which defines the visual and interactive behavior of individual tab item inside a SfTabView control.

    Inheritance
    System.Object
    SfTabItem
    Namespace: Syncfusion.Maui.Toolkit.TabView
    Assembly: Syncfusion.Maui.Toolkit.dll
    Syntax
    public class SfTabItem : ContentView, ITouchListener, ITextElement
    Examples

    The following example shows how to initialize tab items and use in 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

    SfTabItem()

    Initializes a new instance of the SfTabItem class.

    Declaration
    public SfTabItem()

    Fields

    FontAttributesProperty

    Identifies the FontAttributes bindable property.

    Declaration
    public static readonly BindableProperty FontAttributesProperty
    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

    FontFamilyProperty

    Identifies the FontFamily bindable property.

    Declaration
    public static readonly BindableProperty FontFamilyProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty

    FontSizeProperty

    Identifies the FontSize bindable property.

    Declaration
    public static readonly BindableProperty FontSizeProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty

    HeaderProperty

    Identifies the Header bindable property.

    Declaration
    public static readonly BindableProperty HeaderProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty

    ImagePositionProperty

    Identifies the ImagePosition bindable property.

    Declaration
    public static readonly BindableProperty ImagePositionProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty

    ImageSizeProperty

    Identifies the ImageSize bindable property.

    Declaration
    public static readonly BindableProperty ImageSizeProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ImageSize bindable property.

    ImageSourceProperty

    Identifies the ImageSource bindable property.

    Declaration
    public static readonly BindableProperty ImageSourceProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty

    ImageTextSpacingProperty

    Identifies the ImageTextSpacing bindable property.

    Declaration
    public static readonly BindableProperty ImageTextSpacingProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty

    TextColorProperty

    Identifies the TextColor bindable property.

    Declaration
    public static readonly BindableProperty TextColorProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty

    Properties

    Font

    Gets the font of the tab item.

    Declaration
    public Font Font { get; }
    Property Value
    Type
    Microsoft.Maui.Font
    Examples

    Here is an example of how to retrieve the Font property from tab item.

    • C#
    var tabItem = new SfTabItem
    {
    	Header = "Tab 1",
    	Content = new Label { Text = "Content for Tab 1" }
    };
    // Example of retrieving the Font property from tab item.
    var font = tabItem.Font;

    FontAttributes

    Gets or sets the value that defines the font attributes of the tab header.

    Declaration
    public FontAttributes FontAttributes { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.FontAttributes

    One of the Microsoft.Maui.Controls.FontAttributes enumeration that specifies the font attributes of the tab item's header text. The default value is is Microsoft.Maui.Controls.FontAttributes.None.

    Examples

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

    • XAML
    • C#
    <tabView:SfTabView>
        <tabView:SfTabItem Header="TAB 1" FontAttributes="Bold">
            <tabView:SfTabItem.Content>
                <Label Text="Content" />
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
    </tabView:SfTabView>
    var tabView = new SfTabView();
    var tabItems = new TabItemCollection
    {
        new SfTabItem
        {
            Header = "TAB 1",
            FontAttributes = FontAttributes.Bold,
            Content = new Label { Text = "Content" }
        }
    };
    
    tabView.Items = tabItems;
    Content = tabView;

    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 the font should scale automatically. The default value is false.

    Examples

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

    • XAML
    • C#
    <tabView:SfTabView>
        <tabView:SfTabItem Header="TAB 1" FontAutoScalingEnabled="True">
            <tabView:SfTabItem.Content>
                <Label Text="Content" />
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
    </tabView:SfTabView>
    var tabView = new SfTabView();
    var tabItems = new TabItemCollection
    {
        new SfTabItem
        {
            Header = "TAB 1",
            FontAutoScalingEnabled = true,
            Content = new Label { Text = "Content" }
        }
    };
    
    tabView.Items = tabItems;
    Content = tabView;

    FontFamily

    Gets or sets the value that defines the font family of the header.

    Declaration
    public string FontFamily { get; set; }
    Property Value
    Type Description
    System.String

    Specifies the font family of the tab item's header text. The default value is null.

    Examples

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

    • XAML
    • C#
    <tabView:SfTabView>
        <tabView:SfTabItem Header="TAB 1" FontFamily="OpenSansRegular">
            <tabView:SfTabItem.Content>
                <Label Text="Content" />
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
    </tabView:SfTabView>
    var tabView = new SfTabView();
    var tabItems = new TabItemCollection
    {
        new SfTabItem
        {
            Header = "TAB 1",
            FontFamily = "OpenSansRegular",
            Content = new Label { Text = "Content" }
        }
    };
    
    tabView.Items = tabItems;
    Content = tabView;

    FontSize

    Gets or sets the font size of the tab header.

    Declaration
    public double FontSize { get; set; }
    Property Value
    Type Description
    System.Double

    Specifies the font size of the tab item's header text. The default value is 14d.

    Examples

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

    • XAML
    • C#
    <tabView:SfTabView>
        <tabView:SfTabItem Header="TAB 1" FontSize="32">
            <tabView:SfTabItem.Content>
                <Label Text="Content" />
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
    </tabView:SfTabView>
    var tabView = new SfTabView();
    var tabItems = new TabItemCollection
    {
        new SfTabItem
        {
            Header = "TAB 1",
            FontSize = 32,
            Content = new Label { Text = "Content" }
        }
    };
    
    tabView.Items = tabItems;
    Content = tabView;

    Header

    Gets or sets the text for the tab header.

    Declaration
    public string Header { get; set; }
    Property Value
    Type Description
    System.String

    Specifies the header text of the tab item. The default value is an empty string.

    Examples

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

    • XAML
    • C#
    <tabView:SfTabView>
        <tabView:SfTabItem Header="TAB 1">
            <tabView:SfTabItem.Content>
                <Label Text="Content" />
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
    </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;

    ImagePosition

    Gets or sets the position of the image relative to the text in a tab item.

    Declaration
    public TabImagePosition ImagePosition { get; set; }
    Property Value
    Type Description
    TabImagePosition

    One of the TabImagePosition enumeration that specifies the image position relative to the text. The default mode is Top.

    Examples

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

    • XAML
    • C#
    <tabView:SfTabView>
        <tabView:SfTabItem Header="TAB 1" ImageSource="image_name" ImagePosition="Right">
            <tabView:SfTabItem.Content>
                <Label Text="Content" />
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
    </tabView:SfTabView>
    var tabView = new SfTabView();
    var tabItems = new TabItemCollection
    {
        new SfTabItem
        {
            Header = "TAB 1",
            ImageSource = "image_name",
            ImagePosition = TabImagePosition.Right,
            Content = new Label { Text = "Content" }
        }
    };
    
    tabView.Items = tabItems;
    Content = tabView;

    ImageSize

    Gets or sets a value that can be used to customize the image size in tab header.

    Declaration
    public double ImageSize { get; set; }
    Property Value
    Type
    System.Double

    ImageSource

    Gets or sets the image source for the tab header.

    Declaration
    public ImageSource ImageSource { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.ImageSource

    Specifies the image of the tab item. The default value is null.

    Examples

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

    • XAML
    • C#
    <tabView:SfTabView>
        <tabView:SfTabItem Header="TAB 1" ImageSource="image_name">
            <tabView:SfTabItem.Content>
                <Label Text="Content" />
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
    </tabView:SfTabView>
    var tabView = new SfTabView();
    var tabItems = new TabItemCollection
    {
        new SfTabItem
        {
            Header = "TAB 1",
            ImageSource = "image_name",
            Content = new Label { Text = "Content" }
        }
    };
    
    tabView.Items = tabItems;
    Content = tabView;

    ImageTextSpacing

    Gets or sets the spacing between the header text and image.

    Declaration
    public double ImageTextSpacing { get; set; }
    Property Value
    Type Description
    System.Double

    Specifies the spacing between the header and image. The default spacing value is 10d.

    Examples

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

    • XAML
    • C#
    <tabView:SfTabView>
      <tabView:SfTabItem Header = "TAB 1" ImageTextSpacing="2"  ImageSource="avatar1.png"></tabView:SfTabItem>
      <tabView:SfTabItem Header = "TAB 2" ImageTextSpacing="20" ImageSource="avatar1.png"></tabView:SfTabItem>
    </tabView:SfTabView>
    var tabView = new SfTabView();
    var tabItems = new TabItemCollection
    {
        new SfTabItem
        {
            Header = "TAB 1",
            ImageTextSpacing="2"
            ImageSource="avatar1.png"
        }
        new SfTabItem
        {
            Header="TAB 2,
            ImageTextSpacing="20",
            ImageSource="avatar1.png"
        }
    };
    
    tabView.Items = tabItems;
    Content = tabView;

    IsSelected

    Gets a value indicating whether the tab item is selected.

    Declaration
    public bool IsSelected { get; }
    Property Value
    Type Description
    System.Boolean

    A boolean value indicating whether the tab item is selected.

    Examples

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

    • C#
    SfTabItem tabItem = new SfTabItem();
    bool isSelected = tabItem.IsSelected;

    TextColor

    Gets or sets the text color of the tab header.

    Declaration
    public Color TextColor { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Graphics.Color

    Specifies the color of the tab item's header text. The default value is black.

    Examples

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

    • XAML
    • C#
    <tabView:SfTabView>
        <tabView:SfTabItem Header="TAB 1" TextColor="Red">
            <tabView:SfTabItem.Content>
                <Label Text="Content" />
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
    </tabView:SfTabView>
    var tabView = new SfTabView();
    var tabItems = new TabItemCollection
    {
        new SfTabItem
        {
            Header = "TAB 1",
            TextColor = Colors.Red,
            Content = new Label { Text = "Content" }
        }
    };
    
    tabView.Items = tabItems;
    Content = tabView;
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved