The requested page is not available for the requested platform. You are viewing the content for Default platform.
A newer version of this page is available. Switch to the current version.

Tab View: Visual Elements

  • 4 min to read

This topic lists the Tab View visual elements, and enumerates properties that configure these elements:

Tab View Elements

Header Panel

The Header Panel shows Tab Item Headers and allows you to navigate among tab items. The following appearance settings are available:

Header Panel Settings

The table below lists properties the image above highlights:

Property

Description

Behavior

HeaderPanelPosition

Gets or sets the header panel's position within the view.

Appearance

HeaderPanelBackgroundColor

Gets or sets the background color of the view's header panel.

HeaderPanelContentAlignment

Gets or sets a value that specifies how the view aligns item headers in the header panel.

HeaderPanelWidth

Gets or sets the header panel's width when the HeaderPanelPosition is set to Left or Right.

HeaderPanelHeight

Gets or sets the header panel's height when the HeaderPanelPosition is set to Top or Bottom.

HeaderPanelIndent

Gets or sets spacing before the first item and the panel's start edge.

HeaderPanelItemSpacing

Gets or sets the spacing between item headers.

HeaderPanelShadowColor

Gets or sets the color the Tab View uses to paint the header panel's shadow.

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.

IsHeaderPanelShadowVisible

Gets or sets whether the Header Panel's shadow is visible.

Content Area

The Content Area is the main area of the TabView. This area shows the TabItem's Content:

The image displayed above illustrates the properties listed below:

Property

Description

Behavior

TabView.SwipeEnabled

Gets or sets whether swipes over the content area switch tab items.

Content

TabView.ItemsSource

Gets or sets a collection used to generate the Tab View's tab items.

TabItem.Content

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

Appearance

TabView.ItemTemplate

Gets or sets the template the Tab View uses to generate tab items' content from the ItemsSource.

Item Header

The Item Header is an element the Tab View displays in the Header Panel for a TabItem. The header identifies item content. The following settings configure item headers:

Item Header Settings

The following table contains properties displayed by the previous image.

Note

The TabView's properties configure the appearance of all item headers simultaneously, and each Tab Item provides properties that configure its appearance individually.

TabView Property

TabItem Property

Description

Content

HeaderText

Gets or sets the text of the item header title.

HeaderIcon

Gets or sets an icon the item header displays.

ItemsSource

Gets or sets a collection used to generate the Tab View's tab items.

Appearance

ItemHeaderWidth

HeaderWidth

Gets or sets the width of item header(s). Note that the view uses these properties only when its TabView.HeaderPanelPosition is set to Top or Bottom.

ItemHeaderHeight

HeaderHeight

Gets or sets the width of item header(s). Note that the view uses these properties only when its TabView.HeaderPanelPosition is set to Left or Right.

SelectedItemHeaderBackgroundColor

SelectedHeaderBackgroundColor

Gets or sets the background color of an item header when it is selected.

ItemHeaderFontFamily

HeaderFontFamily

Gets or sets the font family to which the font of item header text belongs.

ItemHeaderFontSize

HeaderFontSize

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

ItemHeaderFontAttributes

HeaderFontAttributes

Gets or sets whether the item header text's font is bold, italic, either or neither.

ItemHeaderVisibleElements

HeaderVisibleElements

Gets or sets elements (an icon and / or text) the header item shows.

ItemHeaderTextColor

HeaderTextColor

Gets or sets the color of the item header's text.

SelectedItemHeaderTextColor

SelectedHeaderTextColor

Gets or sets the color of the item header's text when the item is selected.

ItemHeaderIconColor

HeaderIconColor

Gets or sets the color of the item header's icon.

SelectedItemHeaderIconColor

SelectedHeaderIconColor

Gets or sets the color of the item header's icon when the item is selected.

ItemHeaderIconPosition

HeaderIconPosition

Gets or sets the position of the item header's icon.

ItemHeaderIconSpacing

HeaderIconSpacing

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

ItemHeaderPadding

HeaderPadding

Gets or sets the item header padding.

ItemHeaderTemplate

Gets or sets the template the Tab View uses to generate tab items' headers from the ItemsSource.

Selected Item Indicator

The Selected Item Indicator is an element that highlights the header of a selected tab item:

Selected Item Indicator Properties

The table below lists properties illustrated by the image above:

Property

Description

SelectedItemIndicatorColor

Gets or sets the color of the Selected Item Indicator.

SelectedItemIndicatorHeight

Gets or sets the height of the Selected Item Indicator.

IsSelectedItemIndicatorVisible

Gets or sets whether the Selected Item Indicator is visible.