Skip to main content

TabPage.ItemHeaderPlacementOnSelection Property

Specifies how the TabPage positions an item header when a user selects the item.

Namespace: DevExpress.XamarinForms.Navigation

Assembly: DevExpress.XamarinForms.Navigation.dll

NuGet Package: DevExpress.XamarinForms.Navigation

Declaration

public ItemHeaderPlacement ItemHeaderPlacementOnSelection { get; set; }

Property Value

Type Description
ItemHeaderPlacement

The value that specifies how the TabPage positions an item header when a user selects the item.

Available values:

Name Description
Center

The selected item header is centered in the header panel.

Edge

The selected item header is shifted in the header panel to be fully visible.

Remarks

TabPage can place the selected item header as follows:

Value

Sample Image

Description

Center

The selected item header is centered in the header panel.

Edge

The selected item header is shifted in the header panel to be fully visible.

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.

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

See Also