TabPage.ItemHeaderVisibleElements Property

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

Namespace: DevExpress.XamarinForms.Navigation

Assembly: DevExpress.XamarinForms.Navigation.dll

NuGet Package: DevExpress.XamarinForms.Navigation

Declaration

public HeaderElements ItemHeaderVisibleElements { get; set; }

Property Value

Type	Description
HeaderElements	The value that specifies elements an item header shows.

Available values:

Name	Description
Default	Identifies header elements a tab item shows by default.
Text	An item header shows only text (TabPageItem.HeaderText or TabViewItem.HeaderText) even if the TabPageItem.HeaderIcon or TabViewItem.HeaderIcon property is also specified.
Icon	An item header shows only an icon (TabPageItem.HeaderIcon or TabViewItem.HeaderIcon) even if the TabPageItem.HeaderText or TabViewItem.HeaderText property is also specified.
TextAndIcon	An item header shows both text (TabPageItem.HeaderText or TabViewItem.HeaderText) and icon (TabPageItem.HeaderIcon or TabViewItem.HeaderIcon).

Remarks

The following values are available:

Value	Sample Image	Description
Text		An item header shows only text (TabPageItem.HeaderText or TabViewItem.HeaderText) even if the TabPageItem.HeaderIcon or TabViewItem.HeaderIcon property is also specified.
Icon		An item header shows only an icon (TabPageItem.HeaderIcon or TabViewItem.HeaderIcon) even if the TabPageItem.HeaderText or TabViewItem.HeaderText property is also specified.
TextAndIcon		An item header shows both text (TabPageItem.HeaderText or TabViewItem.HeaderText) and icon (TabPageItem.HeaderIcon or TabViewItem.HeaderIcon).

Example

This example demonstrates how to customize the appearance, behavior and position of the TabPage‘s header panel.

Note

The TabPage’s ItemHeader… properties configure header parameters for all tab items the page shows. Use TabPageItem‘s Header… properties to customize these parameters individually for each item.

Xaml

<dxn:TabPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TabPageExample"
             xmlns:dxn="http://schemas.devexpress.com/xamarin/2014/forms/navigation"
             x:Class="TabPageExample.MainPage"
             HeaderPanelHeight="72"
             HeaderPanelPosition="Top"
             HeaderPanelContentAlignment="Center"
             HeaderPanelBackgroundColor="#1e88e5"
             IsHeaderPanelShadowVisible="true"
             HeaderPanelShadowHeight="4"
             HeaderPanelShadowRadius="4"
             HeaderPanelShadowColor="#cc222222"
             HeaderPanelItemSpacing="0"
             HeaderPanelIndent="52"
             ItemHeaderWidth="*"
             ItemHeaderMinWidth="90"
             ItemHeaderMaxWidth="360"
             ItemHeaderVisibleElements="TextAndIcon"
             ItemHeaderPadding="16,0,16,0"
             ItemHeaderIconPosition="Top"
             ItemHeaderIconSpacing="4"
             ItemHeaderIconColor="#99191919"
             ItemHeaderTextColor="#99191919"
             ItemHeaderFontSize="14"
             ItemHeaderFontAttributes="Bold"
             SelectedItemHeaderTextColor="White"
             SelectedItemHeaderIconColor="White"
             SelectedItemHeaderBackgroundColor="Transparent"
             IsSelectedItemIndicatorVisible="true"
             SelectedItemIndicatorColor="White"
             SelectedItemIndicatorHeight="2"
             ItemHeaderPlacementOnSelection="Edge">
    <!-- Tab items here. -->
</dxn:TabPage>

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

Property	Description
HeaderPanelHeight	Gets or sets the header panel’s height when the HeaderPanelPosition is set to Top or Bottom.
HeaderPanelPosition	Gets or sets the header panel’s position within the page.
HeaderPanelContentAlignment	Specifies how item headers are aligned in the header panel.
HeaderPanelBackgroundColor	Gets or sets the background color of the TabPage’s header panel.
IsHeaderPanelShadowVisible	Gets or sets whether the header panel’s shadow is visible.
HeaderPanelShadowHeight	Gets or sets the height of the header panel’s shadow.
HeaderPanelShadowRadius	Gets or sets the blur radius of the header panel’s shadow.
HeaderPanelShadowColor	Gets or sets the color the TabPage uses to paint the header panel’s shadow.
HeaderPanelItemSpacing	Gets or sets the spacing between tab item headers.
HeaderPanelIndent	Gets or sets the spacing between the header panel’s start edge and the first item.
ItemHeaderWidth	Gets or sets the width of item headers when the HeaderPanelPosition is set to Top or Bottom.
ItemHeaderMinWidth	Gets or sets the minimum width of tab item headers when the HeaderPanelPosition is set to Top or Bottom.
ItemHeaderMaxWidth	Gets or sets the maximum width of tab item headers when the HeaderPanelPosition is set to Top or Bottom.
ItemHeaderVisibleElements	Gets or sets a value that specifies elements an item header shows.
ItemHeaderPadding	Gets or sets the inner padding of item headers.
ItemHeaderIconPosition	Gets or sets the icon position relative to the text within item headers.
ItemHeaderIconSpacing	Gets or sets the spacing between the icon and text of an item header.
ItemHeaderIconColor	Gets or sets the color of icons displayed in tab item headers.
ItemHeaderTextColor	Gets or sets the color of text displayed in tab item headers.
SelectedItemHeaderTextColor	Gets or sets the color of text displayed in the selected tab item header.
ItemHeaderFontSize	Gets or sets the font size for the text displayed within item headers.
ItemHeaderFontAttributes	Gets or sets whether the text displayed within item headers is bold, italic, or neither.
SelectedItemHeaderIconColor	Gets or sets the color of an icon displayed in the selected tab item header.
SelectedItemHeaderBackgroundColor	Gets or sets the background color of a tab item header when the item is selected.
IsSelectedItemIndicatorVisible	Gets or sets whether the selected item indicator is visible.
SelectedItemIndicatorColor	Gets or sets the color of the selected item indicator.
SelectedItemIndicatorHeight	Gets or sets the height of the selected item indicator.
ItemHeaderPlacementOnSelection	Specifies how the TabPage positions an item header when a user selects the item.