TabItem.HeaderWidth Property

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

Namespace: DevExpress.XamarinForms.Navigation

Assembly: DevExpress.XamarinForms.Navigation.dll

Declaration

public TabItemLength HeaderWidth { get; set; }

Property Value

Type	Description
TabItemLength	The width of the item header when TabView.HeaderPanelPosition is set to Top or Bottom.

Remarks

Note that the Tab View computes item header size differently for various HeaderPanelPositions:

Position	Width	Height
Top, Bottom	Actual Item Header Width	TabView.HeaderPanelHeight
Left, Right	TabView.HeaderPanelWidth	Actual Item Header Height

Note that the Tab View calculates actual values as follows:

• The Actual Item Header Width is equal to TabItem.HeaderWidth if it does not equal HeaderItemLength.Default; otherwise, the actual width equals TabView.ItemHeaderWidth.

• The Actual Item Header Height is equal to TabItem.HeaderHeight if it does not equal HeaderItemLength.Default; otherwise, the actual width equals TabView.ItemHeaderHeight.

Example

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

XAML

<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.