menu

MAUI

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

    Show / Hide Table of Contents

    Class SfTabItem

    Represents a selectable item inside a TabView.

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

    Constructors

    SfTabItem()

    Initializes a new instance of the SfTabItem class.

    Declaration
    public SfTabItem()

    Fields

    BadgeSettingsProperty

    Identifies the BadgeSettings bindable property.

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

    The identifier for BadgeSettings bindable property.

    BadgeTextProperty

    Identifies the BadgeText bindable property.

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

    The identifier for BadgeText bindable property.

    FontAttributesProperty

    Identifies the FontAttributes bindable property.

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

    The identifier for FontAttributes 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.

    FontFamilyProperty

    Identifies the FontFamily bindable property.

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

    The identifier for FontFamily bindable property.

    FontSizeProperty

    Identifies the FontSize bindable property.

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

    The identifier for FontSize bindable property.

    HeaderProperty

    Identifies the Header bindable property.

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

    The identifier for Header bindable property.

    ImagePositionProperty

    Identifies the ImagePosition bindable property.

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

    The identifier for ImagePosition bindable property.

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

    The identifier for ImageSource bindable property.

    ImageTextSpacingProperty

    Identifies the ImageTextSpacing bindable property.

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

    The identifier for ImageTextSpacing bindable property.

    TextColorProperty

    Identifies the TextColor bindable property.

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

    The identifier for TextColor bindable property.

    Properties

    BadgeSettings

    Gets or sets the value that defines the badge settings of the tab item's badge text.

    Declaration
    public BadgeSettings BadgeSettings { get; set; }
    Property Value
    Type Description
    BadgeSettings

    Specifies the badge setting of the tab item's badge text. The default value is null.

    Examples

    The below example shows how to apply the badge settings for a tab item.

    • XAML
    • C#
    <tabView:SfTabView>
        <tabView:SfTabItem BadgeText="45">
            <tabView:SfTabItem.BadgeSettings>
                <core:BadgeSettings TextColor="Red" Position="Left" />
            </tabView:SfTabItem.BadgeSettings>
            <tabView:SfTabItem.Content>
                <Label Text="Content" />
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
    </tabView:SfTabView>
    var tabView = new SfTabView();
    var tabItems = new TabItemCollection
    {
        new SfTabItem
        {
            Content = new Label { Text = "Content" },
            BadgeText = "45",
            BadgeSettings = new BadgeSettings 
            {
                TextColor = Colors.Red,
                Position = BadgePosition.Left
            }
        }
    };
    
    tabView.Items = tabItems;

    BadgeText

    Gets or sets the value that defines the badge text of the tab item.

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

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

    Examples

    The below example shows how to badge text for a tab item.

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

    Font

    Gets the font of the tab item.

    Declaration
    public Font Font { get; }
    Property Value
    Type
    Microsoft.Maui.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 mode is Microsoft.Maui.Controls.FontAttributes.None.

    Examples

    The below example shows how to apply the font attributes for a tab item.

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

    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.

    Examples

    The below example shows how to apply the font auto scaling enabled for a tab item.

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

    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

    The below example shows how to apply the font family for a tab item.

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

    FontSize

    Gets or sets the value that defines 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

    The below examples shows, how to apply the font size for a tab item.

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

    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

    The below example shows how to apply the header text for a tab item.

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

    ImagePosition

    Gets or sets how the image aligns relative to the text.

    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

    The below example shows how to set the image position for a tab item.

    • XAML
    • C#
    <tabView:SfTabView>
        <tabView:SfTabItem Header="TAB 1" 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",
            ImagePosition = TabImagePosition.Right,
            Content = new Label { Text = "Content" }
        }
    };
    
    tabView.Items = tabItems;

    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 value that defines the header image of 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

    The below example shows how to the image for a tab item.

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

    ImageTextSpacing

    Gets or sets the spacing between header 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

    The below example shows how to apply the spacing between header and image for a tab item.

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

    IsSelected

    Gets whether the tab item is selected or not.

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

    Returns whether the tabitem is selected or not.

    TextColor

    Gets or sets the value that defines 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

    The below example shows how to apply the text color for a tab item.

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

    Methods

    FontSizeDefaultValueCreator()

    Returns the default font value.

    Declaration
    public double FontSizeDefaultValueCreator()
    Returns
    Type
    System.Double

    MeasureOverride(Double, Double)

    MeasureOverride method.

    Declaration
    protected override Size MeasureOverride(double widthConstraint, double heightConstraint)
    Parameters
    Type Name Description
    System.Double widthConstraint

    The width.

    System.Double heightConstraint

    The height.

    Returns
    Type Description
    Microsoft.Maui.Graphics.Size

    It returns the size.

    OnFontAttributesChanged(FontAttributes, FontAttributes)

    Method used to change the font attributes

    Declaration
    public void OnFontAttributesChanged(FontAttributes oldValue, FontAttributes newValue)
    Parameters
    Type Name Description
    Microsoft.Maui.Controls.FontAttributes oldValue
    Microsoft.Maui.Controls.FontAttributes newValue

    OnFontChanged(Font, Font)

    Property changed method for font.

    Declaration
    public void OnFontChanged(Font oldValue, Font newValue)
    Parameters
    Type Name Description
    Microsoft.Maui.Font oldValue
    Microsoft.Maui.Font newValue

    OnFontFamilyChanged(String, String)

    Property changed method for font.

    Declaration
    public void OnFontFamilyChanged(string oldValue, string newValue)
    Parameters
    Type Name Description
    System.String oldValue
    System.String newValue

    OnFontSizeChanged(Double, Double)

    Property changed method for font size.

    Declaration
    public void OnFontSizeChanged(double oldValue, double newValue)
    Parameters
    Type Name Description
    System.Double oldValue
    System.Double newValue
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved