The requested page is not available for the requested platform. You are viewing the content for Default platform.

TabItem Class

Holds a tab header and the tab content.

Namespace: DevExpress.XamarinForms.Navigation

Assembly: DevExpress.XamarinForms.Navigation.dll

Declaration

public class TabItem :
    Element,
    IThemeElement

Remarks

A tab item consists of the following elements:

Note that the HeaderContent property allows you to customize the item header completely.

Examples

The following code configures a tab item according to Material Design guidelines.

<dxn:TabItem HeaderText="CALENDAR"
             HeaderFont="14, Bold"
             HeaderIconColor="#99191919"
             HeaderTextColor="#99191919"
             HeaderWidth="*"
             HeaderMinWidth="90"
             HeaderMaxWidth="360"
             HeaderPadding="16,0,16,0"
             HeaderIconPosition="Top"
             HeaderIconSpacing="4"
             HeaderVisibleElements="TextAndIcon"
             SelectedHeaderIconColor="#1e88e5"
             SelectedHeaderTextColor="#1e88e5"
             SelectedHeaderBackgroundColor="Transparent">
    <dxn:TabItem.HeaderIcon>
        <OnPlatform x:TypeArguments="FileImageSource">
            <On Platform="iOS" Value="calendar"/>
            <On Platform="Android" Value="ic_calendar.png"/>
        </OnPlatform>
    </dxn:TabItem.HeaderIcon>
    <dxn:TabView.Content>
        <StackLayout>
            <Label Text="Calendar Here" 
                   HorizontalOptions="Center" 
                   VerticalOptions="CenterAndExpand"/>
        </StackLayout>
    </dxn:TabView.Content>
</dxn:TabItem>

The markup above uses the following properties:

Note

TabView contains the majority of the visual settings TabItem provides. Tab View's properties simultaneously configures appearance of all tab items the view displays.

Property

Description

Content

Gets or sets a view the Tab View displays in the content area when the item is selected.

HeaderIcon

Gets or sets an icon the item header displays.

HeaderText

Gets or sets the text of the item header title.

HeaderWidth

Gets or sets the item header width when TabView.HeaderPanelPosition is set to Top or Bottom.

HeaderMinWidth

Gets or sets the minimum width of the item header when TabView.HeaderPanelPosition is set to Top or Bottom.

HeaderMaxWidth

Gets or sets the maximum width of the item header when TabView.HeaderPanelPosition is set to Top or Bottom.

HeaderPadding

Gets or sets the inner padding of the header item.

HeaderIconColor

Gets or sets the color the tab item uses in the default state to paint its icon.

HeaderIconPosition

Gets or sets the position of the header icon relative to the header's text.

HeaderIconSpacing

Gets or sets spacing between the icon and the text of a header item.

HeaderFontFamily

Gets or sets the font family to which the font for the item header's text belongs.

HeaderFontSize

Gets or sets the size of the font for the item header's text.

HeaderFontAttributes

Gets or sets a value that indicates whether the font for the item header's text is bold, italic, or neither.

HeaderTextColor

Gets or sets the color the tab item uses in the default state to paint its text.

HeaderVisibleElements

Gets or sets a value that specifies elements the item header shows.

SelectedHeaderBackgroundColor

Gets or sets the background color of the tab item header in the selected state.

SelectedHeaderIconColor

Gets or sets the color the tab item uses in the selected state to paint its icon.

SelectedHeaderTextColor

Gets or sets the color the tab item uses in the selected state to paint its text.

Inheritance

Object
TabItem

Implements

See Also