Visual Elements of DevExpress Tab View for .NET MAUI

• Mar 21, 2023
• 4 minutes to read

This topic lists the TabView visual elements and enumerates properties that configure these elements.

Header Panel

The Header Panel displays Tab Item Headers. You can customize the following appearance settings:

Property	Description
Behavior
HeaderPanelPosition	Gets or sets the header panel’s position within the view. This is a bindable property.
Appearance
HeaderPanelBackgroundColor	Gets or sets the background color of the view’s header panel. This is a bindable property.
HeaderPanelContentAlignment	Gets or sets a value that specifies how the view aligns item headers in the header panel. This is a bindable property.
HeaderPanelWidth	Gets or sets the header panel’s width when the HeaderPanelPosition is set to Left or Right. This is a bindable property.
HeaderPanelHeight	Gets or sets the header panel’s height when the HeaderPanelPosition is set to Top or Bottom. This is a bindable property.
HeaderPanelIndent	Gets or sets spacing before the first item and the panel’s start edge. This is a bindable property.
HeaderPanelItemSpacing	Gets or sets the spacing between item headers. This is a bindable property.
HeaderPanelShadowColor	Gets or sets the color the Tab View uses to paint the header panel’s shadow. This is a bindable property.
HeaderPanelShadowHeight	Gets or sets the height of the header panel’s shadow. This is a bindable property.
HeaderPanelShadowRadius	Gets or sets the blur radius of the header panel’s shadow. This is a bindable property.
IsHeaderPanelShadowVisible	Gets or sets whether the Header Panel‘s shadow is visible. This is a bindable property.

Content Area

Use the following settings to customize the Content Area area:

Property	Description
Behavior
TabView.SwipeEnabled	Gets or sets whether swipes over the content area switch tab items. This is a bindable property.
Content
TabView.ItemsSource	Gets or sets a collection used to generate the Tab View’s tab items. This is a bindable property.
TabViewItem.Content	Gets or sets a view that the TabView displays in the content area when the item is selected. This is a bindable property.
Appearance
TabView.ItemTemplate	Gets or sets the template the Tab View uses to generate tab item content from the ItemsSource. This is a bindable property.

Item Header

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
	HeaderText	Gets or sets the text of the item header title. This is a bindable property.
	HeaderIcon	Gets or sets an icon the item header displays. This is a bindable property.
ItemsSource		Gets or sets a collection used to generate the Tab View’s tab items. This is a bindable property.
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.
	HeaderPadding	Gets or sets the item header padding.
ItemHeaderTemplate		Gets or sets the template the Tab View uses to generate headers of the tab items from the ItemsSource. This is a bindable property.

Selected Item Indicator

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
SelectedItemIndicatorColor	Gets or sets the color of the Selected Item Indicator. This is a bindable property.
SelectedItemIndicatorHeight	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.