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.

LineBreakModeProperty

Identifies the LineBreakMode bindable property.

Declaration

public static readonly BindableProperty LineBreakModeProperty

Field Value

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

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

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.

LineBreakMode

Gets or sets the line break behavior of the tab header text.

Declaration

public LineBreakMode LineBreakMode { get; set; }

Property Value

Type	Description
Microsoft.Maui.LineBreakMode	It accepts the LineBreakMode values, and the default value is Microsoft.Maui.LineBreakMode.TailTruncation.

Remarks

When the TabWidthMode is set to SizeToContent, this property is ignored and the text sizes to its content without wrapping or truncation.

Examples

The below example shows how to apply line break mode for a tab item.

XAML
C#

<tabView:SfTabView>
    <tabView:SfTabItem Header="Very Long Tab Header Text" LineBreakMode="WordWrap">
        <tabView:SfTabItem.Content>
            <Label Text="Content" />
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>
</tabView:SfTabView>

var tabView = new SfTabView();
var tabItems = new TabItemCollection
{
    new SfTabItem
    {
        Header = "Very Long Tab Header Text",
        LineBreakMode = LineBreakMode.WordWrap,
        Content = new Label { Text = "Content" }
    }
};

tabView.Items = tabItems;

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