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

HeaderContentProperty

Identifies the HeaderContent bindable property.

Declaration

public static readonly BindableProperty HeaderContentProperty

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.

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;

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

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;

HeaderContent

Gets or sets the custom view content for the tab header.

Declaration

public View HeaderContent { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.View	Specifies the custom view content for the tab header. When set, this takes precedence over the Header property. The default value is null.

Examples

Here is an example of how to set custom header content for a tab item.

XAML
C#

<tabView:SfTabView>
    <tabView:SfTabItem>
        <tabView:SfTabItem.HeaderContent>
            <Grid BackgroundColor="LightBlue">
                <Label Text="TAB 1" FontSize="16" />
            </Grid>
        </tabView:SfTabItem.HeaderContent>
        <tabView:SfTabItem.Content>
            <Label Text="Content" />
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>
</tabView:SfTabView>

var tabView = new SfTabView();
var customHeader = new Grid { BackgroundColor = Colors.LightBlue };
customHeader.Children.Add(new Label { Text = "TAB 1", FontSize = 16 });

var tabItems = new TabItemCollection
{
    new SfTabItem
    {
        HeaderContent = customHeader,
        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.

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;