Visual Elements
- 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 | |
Gets or sets the header panel’s position within the view. | |
Appearance | |
Gets or sets the background color of the view’s header panel. | |
Gets or sets a value that specifies how the view aligns item headers in the header panel. | |
Gets or sets the header panel’s width when the Header | |
Gets or sets the header panel’s height when the Header | |
Gets or sets spacing before the first item and the panel’s start edge. | |
Gets or sets the spacing between item headers. | |
Gets or sets the color the Tab View uses to paint the header panel’s shadow. | |
Gets or sets the height of the header panel’s shadow. | |
Gets or sets the blur radius of the header panel’s shadow. | |
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 | |
Gets or sets whether swipes over the content area switch tab items. | |
Content | |
Gets or sets a collection used to generate the Tab View’s tab items. | |
Gets or sets a view that the Tab | |
Appearance | |
Gets or sets the template the Tab View uses to generate tab items’ content from the Items |
#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:
The following table contains properties displayed by the previous image.
Note
The Tab
Tab | Tab | Description |
---|---|---|
Content | ||
Gets or sets the text of the item header title. | ||
Gets or sets an icon the item header displays. | ||
Gets or sets a collection used to generate the Tab View’s tab items. | ||
Appearance | ||
Gets or sets the width of item header | ||
Gets or sets the width of item header | ||
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 tab items’ headers from the Items |
#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 |
---|---|
Gets or sets the color of the Selected Item Indicator. | |
Gets or sets the height of the Selected Item Indicator. | |
Gets or sets whether the Selected Item Indicator is visible. |