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="タブ1">
                                <StackPanel Margin="12" Spacing="8">
                                    <TextBlock Text="タブ1のコンテンツ"/>
                                    <Button Content="タブ1 サンプルボタン"/>
                                </StackPanel>
                            </TabViewItem>
                            <TabViewItem Header="タブ2">
                                <Border Background="#E8F4FF" Padding="12" CornerRadius="6">
                                    <TextBlock Text="タブ2 装飾付きコンテンツ"/>
                                </Border>
                            </TabViewItem>
                            <TabViewItem Header="タブ3">
                                <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++ コントロール解説 – ナビゲーションとタブ