Under construction

(?)

TabControl

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

Examples
 ​ 

Basic TabControl
 ​ 

The following example creates a simple TabControl that has 3 tabs.

<TabControl>

    <TabItem Header="TabItem 1">
        <TextBlock Text="Content 1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </TabItem>

    <TabItem Header="TabItem 2">
        <TextBlock Text="Content 2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </TabItem>

    <TabItem Header="TabItem 3">
        <TextBlock Text="Content 3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </TabItem>

</TabControl>

A basic TabControl

TabItem with icon
 ​ 

You can add icons to every TabItem using the ui:TabItemHelper.Icon property.

<TabControl>

    <TabItem Header="TabItem 1">
        <ui:TabItemHelper.Icon>
            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.ActionCenter}"/>
        </ui:TabItemHelper.Icon>
        
        <TextBlock Text="Content 1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </TabItem>

    <TabItem Header="TabItem 2">
        <ui:TabItemHelper.Icon>
            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Settings}"/>
        </ui:TabItemHelper.Icon>
        
        <TextBlock Text="Content 2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </TabItem>

    <TabItem Header="TabItem 3">
        <ui:TabItemHelper.Icon>
            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Home}"/>
        </ui:TabItemHelper.Icon>

        <TextBlock Text="Content 3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </TabItem>

</TabControl>

TabItem with icons

Handling command buttons
 ​ 

The default style of TabControl comes with a close button that you can use for removing or closing the tab. You can use ui:TabItemHelper.CloseTabButtonCommand to handle the click of the close button.

There's also a add tab button that you can use for creating new tabs. You can use ui:TabControlHelper.AddTabButtonCommand to handle the click of the add button.

If you want to remove the close button for the whole TabControl, you can apply ui:TabControlHelper.IsAddTabButtonVisible on your TabControl. This will remove both the close buttons and add tab button.

<TabControl ui:TabControlHelper.IsAddTabButtonVisible="False">

    <TabItem Header="TabItem 1">
        <TextBlock Text="Content 1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </TabItem>

    <TabItem Header="TabItem 2">
        <TextBlock Text="Content 2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </TabItem>

    <TabItem Header="TabItem 3">
        <TextBlock Text="Content 3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </TabItem>

</TabControl>

All close buttons are removed

You can also use the ui:TabControlHelper.TabStripHeader and ui:TabControlHelper.TabStripFooter property to add the strip header and footer.

Since this two properties accept object values, you can add literally anything to the header and footer, like text, controls, icons and more.

<TabControl>
    <ui:TabControlHelper.TabStripHeader>
        <Border MinWidth="48" Background="Red">
            <TextBlock Text="Header" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5"/>
        </Border>
    </ui:TabControlHelper.TabStripHeader>
    <ui:TabControlHelper.TabStripFooter>
        <Border MinWidth="48" Background="CornflowerBlue">
            <TextBlock Text="Footer" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5"/>
        </Border>
    </ui:TabControlHelper.TabStripFooter>


    <TabItem Header="TabItem 1">
        <TextBlock Text="Content 1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </TabItem>

    <TabItem Header="TabItem 2">
        <TextBlock Text="Content 2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </TabItem>

    <TabItem Header="TabItem 3">
        <TextBlock Text="Content 3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </TabItem>

</TabControl>

TabControl with customizable header and footer

Pivot style
 ​ 

The Pivot enables touch-swiping between a small set of content sections. To create a Pivot control, simply apply the pivot style to a TabControl.

<TabControl Style="{StaticResource {x:Static ui:ThemeKeys.TabControlPivotStyleKey}}">

    <TabItem Header="TabItem 1">
        <TextBlock Text="Content 1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </TabItem>

    <TabItem Header="TabItem 2">
        <TextBlock Text="Content 2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </TabItem>

    <TabItem Header="TabItem 3">
        <TextBlock Text="Content 3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </TabItem>

</TabControl>

A basic pivot style

warning

Once a TabControl is applied Pivot style, the TabStripPlacement property will be unusable. A Pivot can only have its Tabs on the top.

Actually this is because we didn't work out the code other placement scenarios, If you are interested, feel free to add this feature in Pivot.xaml, and PRs are welcomed!

Also, if you want to add headers to Pivot styled TabControl, please don't use ui:TabControlHelper, instead use ui:PivotHelper like this:

  • ui:TabControlHelper.TabStripHeader → ui:PivotHelper.LeftHeader

  • ui:TabControlHelper.TabStripFooter → ui:PivotHelper.RightHeader

Pivot with icons
 ​ 

You can add icons for a Pivot tab item using ui:TabItemHelper.Icon as well. However, we recommend you adjust the icon's size since the Pivot header is larger, the recommended value is 20 or 24.

<TabControl Style="{StaticResource {x:Static ui:ThemeKeys.TabControlPivotStyleKey}}" >

    <TabItem Header="TabItem 1">
        <ui:TabItemHelper.Icon>
            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Shop}" FontSize="20"/>
        </ui:TabItemHelper.Icon>
        <TextBlock Text="Content 1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </TabItem>

    <TabItem Header="TabItem 2">
        <ui:TabItemHelper.Icon>
            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Settings}" FontSize="20"/>
        </ui:TabItemHelper.Icon>
        <TextBlock Text="Content 2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </TabItem>

    <TabItem Header="TabItem 3">
        <TextBlock Text="Content 3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </TabItem>

</TabControl>

A pivot with icons

warning

This feature is only available for version 0.9.28 or higher. If you have set the ui:TabItemHelper.Icon property and find out the icon not appearing, please consider upgrading the library version.

If you can't see the version 0.9.28 in the Nuget Package Manager, this means this version has't released yet. Please wait for the release or compile the library yourself.

Remarks
 ​ 

Is this the right control?
 ​ 

To create a control that displays a collection of tabs that can be used to display several documents, which can be added, closed or moved, use a TabControl with the default style.

To achieve common top navigation patterns, we recommend using NavigationView or a TabControl with Pivot style.

Some key differences between the NavigationView and Pivot are listed here:

  • Pivot supports touch-swiping to switch between items.
  • Overflow items in a Pivot carousel, while NavigationView uses a menu dropdown overflow so that users can see all items.
  • Pivot handles navigation between content sections, while NavigationView allows for more control over navigation behavior.

Styles
 ​ 

There are two built-in styles for TabControl control:

  • DefaultTabControlStyle: The default style for TabControl, you can access it with ui:ThemeKeys.DefaultTabControlStyleKey.

  • TabControlPivotStyle: The Pivot style for TabControl, you can access it with ui:ThemeKeys.TabControlPivotStyleKey.

There are two built-in styles for TabItem control:

  • DefaultTabItemStyle: The default style for TabItem, you can access it with ui:ThemeKeys.DefaultTabItemStyleKey.

  • TabItemPivotStyle: The Pivot style for TabControl, you can access it with ui:ThemeKeys.TabItemPivotStyleKey.

See also
 ​ 

Microsoft Learn
 ​