WinUI 3 C++ Controls Guide – Navigation & Tabs

Navigation and tab-related controls in WinUI 3

Frame Page navigation frame (hosts Page to implement page jumps)
Page Independent page carrier
NavigationView Sidebar navigation view
NavigationViewItem Navigation menu item
NavigationViewItemHeader Navigation group title
NavigationViewItemSeparator Navigation divider line
TabView Multi-tab container
TabViewItem Single tab page
Pivot Horizontal sliding tab control
PivotItem Pivot page item
SplitView Side drawer split layout view
SplitViewPaneInfo SplitView sidebar configuration
BreadcrumbBar Path breadcrumb navigation bar
BreadcrumbBarItem Breadcrumb path node

We have covered sidebar components before, and we have also used Frame, Page and other navigation-related controls. Below I will demonstrate the controls starting from TabView.

The following video demonstrates how these controls work, including the left sidebar and tab pages.

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="AppWinui.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppWinui"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="AppWinui">

    <Grid>
        <!-- SplitView SplitViewPaneInfo -->
        <SplitView x:Name="DemoSplitView"
                   DisplayMode="CompactInline"
                   CompactPaneLength="52"
                   OpenPaneLength="260"
                   IsPaneOpen="True">

            <!-- SplitView Side Pane -->
            <SplitView.Pane>
                <StackPanel Padding="10" Spacing="12">
                    <TextBlock Text="Side Menu" FontSize="16" FontWeight="SemiBold"/>
                    <Button x:Name="BtnShowTabView" Content="Open TabView Demo"/>
                    <Button x:Name="BtnShowPivot" Content="Open Pivot Demo"/>
                </StackPanel>
            </SplitView.Pane>

            <!-- SplitView Main Content Area -->
            <SplitView.Content>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <StackPanel x:Name="MainContentPanel" Grid.Row="1" Margin="8" Spacing="20" VerticalAlignment="Top">
             
                        <TextBlock Text="TabView Multi-Tab Demo" FontSize="20"/>
                        <TabView x:Name="DemoTabView">
                            <TabViewItem Header="Tab One">
                                <StackPanel Margin="12" Spacing="8">
                                    <TextBlock Text="Content inside Tab 1"/>
                                    <Button Content="Tab 1 Sample Button"/>
                                </StackPanel>
                            </TabViewItem>
                            <TabViewItem Header="Tab Two">
                                <Border Background="#E8F4FF" Padding="12" CornerRadius="6">
                                    <TextBlock Text="Styled content inside Tab 2"/>
                                </Border>
                            </TabViewItem>
                            <TabViewItem Header="Tab Three">
                                <TextBox PlaceholderText="Input box inside Tab 3" Width="300"/>
                            </TabViewItem>
                        </TabView>

                        <!-- Pivot / PivotItem -->
                        <TextBlock Text="Pivot Horizontal Sliding Demo" FontSize="20"/>
                        <Pivot x:Name="DemoPivot">
                            <PivotItem Header="Slide Page A">
                                <TextBlock Margin="12" Text="Horizontal slide page A content"/>
                            </PivotItem>
                            <PivotItem Header="Slide Page B">
                                <Border Background="#FFF7E6" Padding="12" CornerRadius="6">
                                    <TextBlock Text="Styled slide page B content"/>
                                </Border>
                            </PivotItem>
                            <PivotItem Header="Slide Page C">
                                <ToggleSwitch Header="Toggle option on slide page C" Margin="12"/>
                            </PivotItem>
                        </Pivot>
                    </StackPanel>
                </Grid>
            </SplitView.Content>
        </SplitView>
    </Grid>
    
</Window>
Code language: HTML, XML (xml)

WinUI 3 C++ Controls Guide – Navigation & Tabs