Visual Elements

• Feb 25, 2020
• 4 minutes to read

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

Header Panel

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

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 TabViewItem‘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.
TabViewItem.Content	Gets or sets a view that the TabView 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 TabViewItem. The header identifies item content. The following settings configure item headers:

Item Header

Selected Item Header

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 TabViewItem 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:

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.