-api-id | -api-type |
---|---|
T:Microsoft.UI.Xaml.Controls.TabView |
winrt class |
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.
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 Windows App SDK NuGet package. By default, this location is \Users\<username>\.nuget\packages\microsoft.windowsappsdk\<version>\lib\uap10.0\Microsoft.UI\Themes\generic.xaml
. Styles and resources from different versions of the SDK 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.
TabViewItem, TabViewCloseButtonOverlayMode, Guidelines for TabView
Tip
For more info, design guidance, and code examples, see Tab view.
[!div class="nextstepaction"] Open the WinUI 3 Gallery app and see the TabView in action
The WinUI 3 Gallery app includes interactive examples of most WinUI 3 controls, features, and functionality. Get the app from the Microsoft Store or get the source code on GitHub
<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);
}