TabItem.HeaderIconPosition Property

Gets or sets the position of the icon relative to the text in the item header.

Namespace: DevExpress.XamarinForms.Navigation

Assembly: DevExpress.XamarinForms.Navigation.dll

NuGet Package: DevExpress.XamarinForms.Navigation

Declaration

public Position HeaderIconPosition { get; set; }

Property Value

Type	Description
Position	The position of the icon relative to the text in the item header.

Available values:

Name	Description
Default	Identifies the default element position.
Top	An element is at the top edge of the container.
Bottom	An element is at the bottom edge of the container.
Left	An element is at the left edge of the container.
Right	An element is at the right edge of the container.

Remarks

The following positions are available:

Position	Sample image	Description
Top		The icon is above text.
Left		The icon is before text.
Bottom		The icon is below text.
Right		The icon is after text.

Example

The following code configures a TabView‘s item according to Material Design guidelines.

XAML

<dxn:TabViewItem HeaderText="CALENDAR"
                 HeaderIcon="ic_calendar.png"
                 HeaderFontSize="14"
                 HeaderFontAttributes="Bold"
                 HeaderTextColor="#99191919"
                 HeaderIconColor="#99191919"
                 HeaderIconPosition="Top"
                 HeaderIconSpacing="4"
                 HeaderWidth="*"
                 HeaderMinWidth="90"
                 HeaderMaxWidth="360"
                 HeaderPadding="16,0,16,0"
                 HeaderVisibleElements="TextAndIcon"
                 SelectedHeaderTextColor="#1e88e5"
                 SelectedHeaderIconColor="#1e88e5"
                 SelectedHeaderBackgroundColor="Transparent">
    <dxn:TabViewItem.Content>
        <StackLayout>
            <Label Text="Calendar Here" 
                   HorizontalOptions="Center" 
                   VerticalOptions="CenterAndExpand"/>
        </StackLayout>
    </dxn:TabViewItem.Content>
</dxn:TabViewItem>

The markup above uses the following properties of the TabViewItem object:

Property	Description
HeaderText	Gets or sets the text of the item header title.
HeaderIcon	Gets or sets an icon the item header displays.
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 header text.
HeaderIconColor	Gets or sets the color the tab item uses in the default state to paint its header icon.
HeaderIconPosition	Gets or sets the position of the icon relative to the text in the item header.
HeaderIconSpacing	Gets or sets spacing between the icon and the text in the item header.
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 item header.
HeaderVisibleElements	Gets or sets a value that specifies elements the item header shows.
SelectedHeaderTextColor	Gets or sets the color the tab item uses in the selected state to paint its header text.
SelectedHeaderIconColor	Gets or sets the color the tab item uses in the selected state to paint its header icon.
SelectedHeaderBackgroundColor	Gets or sets the background color of the tab item header in the selected state.
Content	Gets or sets a view that the TabView displays in the content area when the item is selected.

Note

TabView contains the majority of the visual settings that TabViewItem provides. TabView’s properties simultaneously configures the appearance of all tab items the view contains.