maui-404037-dialogs-menu-and-navigation-tab-view-visual-elements.md
This topic lists the TabView visual elements and enumerates properties that configure these elements.
The Header Panel displays Tab Item Headers. You can customize the following appearance settings:
|
Property
|
Description
| | --- | --- | |
Behavior
| |
|
Gets or sets the header panel’s position within the view. This is a bindable property.
| |
Appearance
| |
|
Gets or sets the background color of the view’s header panel. This is a bindable property.
| |
|
Gets or sets a value that specifies how the view aligns item headers in the header panel. This is a bindable property.
| |
|
Gets or sets the header panel’s width when the HeaderPanelPosition is set to Left or Right. This is a bindable property.
| |
|
Gets or sets the header panel’s height when the HeaderPanelPosition is set to Top or Bottom. This is a bindable property.
| |
|
Gets or sets spacing before the first item and the panel’s start edge. This is a bindable property.
| |
|
Gets or sets the spacing between item headers. This is a bindable property.
| |
|
Gets or sets the color the Tab View uses to paint the header panel’s shadow. This is a bindable property.
| |
|
Gets or sets the height of the header panel’s shadow. This is a bindable property.
| |
|
Gets or sets the blur radius of the header panel’s shadow. This is a bindable property.
| |
|
Gets or sets whether the Header Panel‘s shadow is visible. This is a bindable property.
|
Use the following settings to customize the Content Area area:
|
Property
|
Description
| | --- | --- | |
Behavior
| |
|
Gets or sets whether swipes over the content area switch tab items. This is a bindable property.
| |
Content
| |
|
Gets or sets a collection used to generate the Tab View’s tab items. This is a bindable property.
| |
|
Gets or sets a view that the TabView displays in the content area when the item is selected. This is a bindable property.
| |
Appearance
| |
|
Gets or sets the template the Tab View uses to generate tab item content from the ItemsSource. This is a bindable property.
|
The Item Header is an element displayed in the Header Panel. The following settings configure item headers:
Item Header
Selected Item Header
Note
The TabView‘s properties configure the appearance of all item headers and each TabViewItem exposes properties that configure its appearance individually.
|
TabView Property
|
TabItem Property
|
Description
| | --- | --- | --- | |
Content
| | |
|
Gets or sets the text of the item header title. This is a bindable property.
| | |
|
Gets or sets an icon the item header displays. This is a bindable property.
| |
| |
Gets or sets a collection used to generate the Tab View’s tab items. This is a bindable property.
| |
Appearance
| |
|
|
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.
| |
|
|
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
|
|
Gets or sets the background color of an item header when it is selected.
| |
|
|
Gets or sets the font family to which the font of item header text belongs.
| |
|
|
Gets or sets the size of the item header text’s font.
| |
|
|
Gets or sets whether the item header text’s font is bold, italic, either or neither.
| |
|
|
Gets or sets elements (an icon and / or text) the header item shows.
| |
|
|
Gets or sets the color of the item header’s text.
| |
|
|
Gets or sets the color of the item header’s text when the item is selected.
| |
|
|
Gets or sets the color of the item header’s icon.
| |
|
|
Gets or sets the color of the item header’s icon when the item is selected.
| |
|
|
Gets or sets the position of the item header’s icon.
| |
|
|
Gets or sets the spacing between an icon and text of the item header.
| | |
|
Gets or sets the item header padding.
| |
| |
Gets or sets the template the Tab View uses to generate headers of the tab items from the ItemsSource. This is a bindable property.
|
The Selected Item Indicator is an element that highlights the header of a selected tab item. The following properties allow you to configure this viual element.
|
Property
|
Description
| | --- | --- | |
|
Gets or sets the color of the Selected Item Indicator. This is a bindable property.
| |
|
Gets or sets the height of the Selected Item Indicator. This is a bindable property.
| |
IsSelectedItemIndicatorVisible
|
Gets or sets whether the Selected Item Indicator is visible. This is a bindable property.
|