WinUI 3 C++ 控件篇-导航和选项卡

winui3中和导航还有选项卡有关的控件

Frame 页面导航帧（承载 Page 实现页面跳转）
Page 独立页面载体
NavigationView 侧边栏导航视图
NavigationViewItem 导航菜单条目
NavigationViewItemHeader 导航分组标题
NavigationViewItemSeparator 导航分隔线
TabView 多标签页容器
TabViewItem 单个标签页
Pivot 滑动分页标签
PivotItem Pivot 分页项
SplitView 侧边抽屉分栏视图
SplitViewPaneInfo SplitView 侧边栏配置
BreadcrumbBar 路径面包屑导航栏
BreadcrumbBarItem 面包屑路径节点

关于侧边栏的，我们前面也提到过，Frame 我们也用过，Page也用过Navigation相关的也接触过了，下面我就演示一下TabView 之后的这几个控件

如下视频演示这几个控件的使用，一个是左侧栏，还有选项卡

<?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  -->
            <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  -->
            <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)