TabView Class

Definition

Namespace:

Microsoft.UI.Xaml.Controls

The TabView control is a way to display a set of tabs and their respective content. Tab controls are useful for displaying several pages (or documents) of content while giving a user the capability to rearrange, open, or close new tabs.

Is this the right control?

Use a TabView to help the user manage multiple app pages or documents within the same window.

Do not use a TabView to display a static set of tabs that the user cannot rearrange, open, or close. Use a NavigationView (NavigationViewPaneDisplayMode of Top) instead.

This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).

/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="TabItems")]
/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.UI.Xaml.XamlContract, 65536)]
class TabView : Control

[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="TabItems")]
[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.UI.Xaml.XamlContract), 65536)]
public class TabView : Control

Public Class TabView
Inherits Control

Inheritance

Control

TabView

Attributes

MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute ContractVersionAttribute

Examples

Tip

For more info, design guidance, and code examples, see Tab view.

Open the WinUI 2 Gallery app and see TabView in action.

The WinUI 2 Gallery app includes interactive examples of most WinUI 2 controls, features, and functionality. Get the app from the Microsoft Store or get the source code on GitHub.

Basic TabView Sample, similar to a Web Browser

<TabView AddTabButtonClick="Tabs_AddTabButtonClick"
         TabCloseRequested="Tabs_TabCloseRequested" />

// Add a new Tab to the TabView
private void Tabs_AddTabButtonClick(TabView sender, TabViewAddTabButtonClickEventArgs e)
{
    var newTab = new TabViewItem();
    newTab.IconSource = new SymbolIconSource() { Symbol = Symbol.Document };
    newTab.Header = "New Document";

    // The Content of a TabViewItem is often a frame which hosts a page.
    Frame frame = new Frame();
    newTab.Content = frame;
    frame.Navigate(typeof(BaconIpsumPage));

    sender.TabItems.Add(newTab);
}

// Remove the requested tab from the TabView
private void Tabs_TabCloseRequested(TabView sender, TabViewTabCloseRequestedEventArgs args)
{
    sender.TabItems.Remove(args.Tab);
}

Remarks

Control style and template

You can modify the default Style and ControlTemplate to give the control a unique appearance. For information about modifying a control's style and template, see XAML styles. The default style, template, and resources that define the look of the control are included in the generic.xaml file. For design purposes, generic.xaml is installed with the WinUI (Microsoft.UI.Xaml) NuGet package. By default, this location is \Users\<username>\.nuget\packages\microsoft.ui.xaml\<version>\lib\uap10.0\Microsoft.UI.Xaml\Themes\generic.xaml. Styles and resources from different versions of WinUI might have different values.

XAML also includes resources that you can use to modify the colors of a control in different visual states without modifying the control template. Modifying these resources is preferred to setting properties such as Background and Foreground. For more info, see the Light-weight styling section of the XAML styles article.

Constructors

TabView()

Initializes a new instance of the TabView class. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).

Properties

AddTabButtonCommand	Gets or sets the command to invoke when the add (+) button is tapped. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
AddTabButtonCommandParameter	Gets or sets the parameter to pass to the AddTabButtonCommand property. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
AddTabButtonCommandParameterProperty	Identifies the AddTabButtonCommandParameter dependency property. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
AddTabButtonCommandProperty	Identifies the AddButtonCommand dependency property. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
AllowDropTabs	Gets or sets a value that determines whether the TabView can be a drop target for the purposes of drag-and-drop operations. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
AllowDropTabsProperty	Identifies the AllowDropTabs dependency property. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
CanDragTabs	Gets or sets a value that indicates whether tabs can be dragged as a data payload. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
CanDragTabsProperty	Identifies the CanDragTabs dependency property. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
CanReorderTabs	Gets or sets a value that indicates whether the tabs in the TabStrip can be reordered through user interaction. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
CanReorderTabsProperty	Identifies the CanReorderTabs dependency property. Identifies the CanReorderTabs dependency property. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
CloseButtonOverlayMode	Gets or sets a value that indicates the behavior of the close button within tabs. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
CloseButtonOverlayModeProperty	Identifies the CloseButtonOverlayMode dependency property. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
IsAddTabButtonVisible	Gets or sets whether the add (+) tab button is visible. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
IsAddTabButtonVisibleProperty	Identifies the IsAddTabButtonVisible dependency property. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
SelectedIndex	Gets or sets the index of the selected item. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
SelectedIndexProperty	Identifies the SelectedIndex dependency property. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
SelectedItem	Gets or sets the selected item. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
SelectedItemProperty	Identifies the SelectedItem dependency property. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabItems	Gets the collection used to generate the tabs within the control. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabItemsProperty	Identifies the TabItems dependency property. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabItemsSource	Gets or sets an object source used to generate the tabs within the TabView. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabItemsSourceProperty	Identifies the TabItemsSource dependency property. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabItemTemplate	Gets or sets the DataTemplate used to display each item. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabItemTemplateProperty	Identifies the TabItemTemplate dependency property. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabItemTemplateSelector	Gets or sets a selection object that changes the DataTemplate to apply for content, based on processing information about the content item or its container at run time. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabItemTemplateSelectorProperty	Identifies the TabItemTemplateSelector dependency property. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabStripFooter	Gets or sets the content that is shown to the right of the tab strip. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabStripFooterProperty	Identifies the TabStripFooter dependency property. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabStripFooterTemplate	Gets or sets the DataTemplate used to display the content of the TabStripFooter. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabStripFooterTemplateProperty	Identifies the TabStripFooterTemplate dependency property. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabStripHeader	Gets or sets the content that is shown to the left of the tab strip. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabStripHeaderProperty	Identifies the TabStripHeader dependency property. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabStripHeaderTemplate	Gets or sets the DataTemplate used to display the content of the TabStripHeader. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabStripHeaderTemplateProperty	Identifies the TabStripHeaderTemplate dependency property. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabWidthMode	Gets or sets how the tabs should be sized. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabWidthModeProperty	Identifies the TabWidthMode dependency property. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).

Methods

ContainerFromIndex(Int32)	Returns the container for the item at the specified index within the collection. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
ContainerFromItem(Object)	Returns the container corresponding to the specified item. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).

Events

AddTabButtonClick	Occurs when the add (+) tab button has been clicked. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
SelectionChanged	Occurs when the currently selected tab changes. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabCloseRequested	Raised when the user attempts to close a Tab via clicking the x-to-close button, CTRL+F4, or mousewheel. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabDragCompleted	Raised when the user completes the drag action. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabDragStarting	Occurs when a drag operation is initiated. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabDroppedOutside	Occurs when the user completes a drag and drop operation by dropping a tab outside of the TabStrip area. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabItemsChanged	Raised when the items collection has changed. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabStripDragOver	Occurs when the input system reports an underlying drag event with the TabStrip as the potential drop target. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
TabStripDrop	Occurs when the input system reports an underlying drop event with the TabStrip as the drop target. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).

See also

• TabViewItem
• TabViewCloseButtonOverlayMode
• Guidelines for TabView