TabView Class

A view that organizes content into groups at the same hierarchy level and allows tab navigation between them.

Assembly: DevExpress.Maui.Controls.dll

NuGet Package: DevExpress.Maui.Controls

Declaration

[ContentProperty("Items")]
public class TabView :
    View,
    IDXViewController,
    IAppearanceOwner,
    IVisualTreeElement

Remarks

The TabView component allows you to implement tab navigation through a collection of views (tab items) in a .NET MAUI application. A tab item has a header displayed within the header panel and a view displayed in the content area when a user selects an item. To navigate between tab items, a user can tap tab item headers or swipe left or right within the content area.

TabView - Elements

When a user switches between tabs, the TabView applies animation effects to tabs. You can use the ScrollAnimationEnabled property to enable and disable the animation.

You can populate a TabView with tab items as follows:

Create Tab Items Manually

Add TabViewItem objects to the TabView.Items collection.

Read Tutorial

Generate Tab Items from a Data Source

Assign a data source to the TabView.ItemsSource property, and use the TabView.ItemHeaderTemplate and TabView.ItemTemplate properties to define templates for a tab item’s header and content area.

Read Tutorial

Header Panel

A header panel shows tab item headers (tabs) that users can tap to switch views in the content area. Use the HeaderPanelPosition property to specify the header panel position relative to the content area. A TabView also has properties to adjust the following appearance settings of the header panel:

TabView - Header Panel

Property	Description
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.
HeaderPanelMaxHeight	Gets or sets the header panel’s maximum height when HeaderPanelPosition is Top or Bottom. This is a bindable property.
HeaderPanelMaxWidth	Gets or sets the header panel’s maximum width when HeaderPanelPosition is Left or Right. This is a bindable property.
HeaderPanelMinHeight	Gets or sets the header panel’s minimum height when the HeaderPanelPosition is Top or Bottom. This is a bindable property.
HeaderPanelMinWidth	Gets or sets the header panel’s minimum width when the HeaderPanelPosition is set to Left or Right. This is a bindable property.
HeaderPanelItemSpacing	Gets or sets the spacing between item headers. This is a bindable property.
IsHeaderPanelShadowVisible	Gets or sets whether the Header Panel’s shadow is visible. 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.
HeaderPanelShadowColor	Gets or sets the color the Tab View uses to paint the header panel’s shadow. This is a bindable property.

Content Area

In the content area, the TabView displays the main content of a selected tab item.

TabView - Content Area

The property used to specify tab item content depends on the way in which you create tab items:

TabViewItem.Content, if you create tab items manually.
TabView.ItemTemplate, if you generate tab items from a data source.

Tab Item Header

A TabView’s item header is a tab displayed within the header panel. An item header can contain an icon and text to identify the tab item content. Use one of the following ways to specify icons and text for tab item headers depending on the way you add tab items to the TabView:

How you add tab items	How to specify icons and text for item headers
Populate the TabView.Items collection with TabViewItem objects	Add icons for tabs (.svg files) to the project and set their Build Action property to MauiImage. Then, assign an icon and text string to the HeaderIcon and HeaderText properties of each TabViewItem object.
Generate tab items from a data source assigned to the TabView.ItemsSource property	Use the TabView.ItemHeaderIconDataMember and TabView.ItemHeaderTextDataMember properties to specify data source fields that contain icons and text strings for headers of tab items.

A TabView allows you to customize the appearance of a tab item header and its elements.

TabView - Tab Item Header

You can use properties of the TabView object to specify the same appearance settings for headers of all tab items, or use properties of TabViewItem objects to customize each tab item individually.

TabView’s Property	TabViewItem’s Property	Appearance Parameter
ItemHeaderWidth	HeaderWidth	An item header width. The TabView uses these properties only when its HeaderPanelPosition property is set to Top or Bottom.
ItemHeaderHeight	HeaderHeight	An item header height. The TabView uses these properties only when its HeaderPanelPosition property is set to Left or Right.
ItemHeaderMaxWidth	HeaderMaxWidth	An item header’s maximum width.
ItemHeaderMinWidth	HeaderMinWidth	An item header’s minimum width.
ItemHeaderMaxHeight	HeaderMaxHeight	An item header’s maximum height.
ItemHeaderMinHeight	HeaderMinHeight	An item header’s minimum height.
ItemHeaderVisibleElements	HeaderVisibleElements	Elements (an icon and/or text) that an item header displays.
ItemHeaderFontFamily	HeaderFontFamily	The font family to which the text font of an item header belongs.
ItemHeaderFontSize	HeaderFontSize	The font size of an item header.
ItemHeaderFontAttributes	HeaderFontAttributes	Font settings (bold, italic, both, or neither) of an item header.
ItemHeaderTextColor	HeaderTextColor	The color of item header text.
ItemHeaderIconColor	HeaderIconColor	The color of an item header icon.
ItemHeaderIconPosition	HeaderIconPosition	The position of an item header icon relative to text.
ItemHeaderIconSpacing	HeaderIconSpacing	The spacing between an item header icon and text.
ItemHeaderPadding	HeaderPadding	An item header padding.

Selected Tab Item Header

A TabView can paint a selected tab item in different colors within the header panel.

TabView - Selected Tab Item Header

Use a TabView object’s properties to apply the same colors to any tab item when it is selected, or a TabViewItem object’s properties to specify a color for a single selected tab item.

TabView’s Property	TabItem’s Property	Appearance Parameter
SelectedItemHeaderBackgroundColor	SelectedHeaderBackgroundColor	The background color of an item header when the item is selected.
SelectedItemHeaderIconColor	SelectedHeaderIconColor	The icon color of an item header when the item is selected.
SelectedItemHeaderTextColor	SelectedHeaderTextColor	The text color of an item header when the item is selected.