WinUI 3 C++ 控制項教學 – 導覽與分頁標籤

WinUI3 中與導覽、分頁標籤相關的控制項

Frame 頁面導覽框架（承載 Page 實現頁面切換）
Page 獨立頁面容器
NavigationView 側邊欄導覽檢視
NavigationViewItem 導覽選單項目
NavigationViewItemHeader 導覽分組標題
NavigationViewItemSeparator 導覽分隔線
TabView 多標籤頁容器
TabViewItem 單一標籤頁
Pivot 水平滑動分頁標籤
PivotItem Pivot 分頁項目
SplitView 側邊抽屜分割檢視
SplitViewPaneInfo SplitView 側邊欄設定
BreadcrumbBar 路徑麵包屑導覽列
BreadcrumbBarItem 麵包屑路徑節點

側邊欄相關控制項前面已有介紹，Frame、Page 以及各類導覽元件我們也都使用過，接下來示範 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="側邊選單" FontSize="16" FontWeight="SemiBold"/>
                    <Button x:Name="BtnShowTabView" Content="開啟 TabView 示範"/>
                    <Button x:Name="BtnShowPivot" Content="開啟 Pivot 示範"/>
                </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 多標籤頁示範" FontSize="20"/>
                        <TabView x:Name="DemoTabView">
                            <TabViewItem Header="標籤一">
                                <StackPanel Margin="12" Spacing="8">
                                    <TextBlock Text="標籤 1 內文"/>
                                    <Button Content="標籤1 範例按鈕"/>
                                </StackPanel>
                            </TabViewItem>
                            <TabViewItem Header="標籤二">
                                <Border Background="#E8F4FF" Padding="12" CornerRadius="6">
                                    <TextBlock Text="標籤 2 樣式化內容"/>
                                </Border>
                            </TabViewItem>
                            <TabViewItem Header="標籤三">
                                <TextBox PlaceholderText="標籤3 輸入方塊" Width="300"/>
                            </TabViewItem>
                        </TabView>

                        <!-- Pivot / PivotItem -->
                        <TextBlock Text="Pivot 水平滑動分頁示範" FontSize="20"/>
                        <Pivot x:Name="DemoPivot">
                            <PivotItem Header="滑動頁面 A">
                                <TextBlock Margin="12" Text="水平滑動頁 A 內容"/>
                            </PivotItem>
                            <PivotItem Header="滑動頁面 B">
                                <Border Background="#FFF7E6" Padding="12" CornerRadius="6">
                                    <TextBlock Text="滑動頁 B 樣式化內容"/>
                                </Border>
                            </PivotItem>
                            <PivotItem Header="滑動頁面 C">
                                <ToggleSwitch Header="滑動頁 C 開關選項" Margin="12"/>
                            </PivotItem>
                        </Pivot>
                    </StackPanel>
                </Grid>
            </SplitView.Content>
        </SplitView>
    </Grid>
    
</Window>
Code language: HTML, XML (xml)

WinUI 3 C++ 控制項教學 – 導覽與分頁標籤