タイトル バー

TitleBar コントロールを使用すると、アプリのカスタム タイトル バーを簡単に作成できます。 タイトル バーは、Windows アプリのユーザー インターフェイスの基本的なコンポーネントであり、アイコンとタイトルを使用してアプリを識別し、ユーザーがウィンドウを閉じ、最大化、最小化、復元できるシステム キャプション ボタンを収容し、ユーザーがウィンドウを画面の周りにドラッグできるようにします。

カスタム タイトル バーを使用して、タイトル バー領域をアプリの UI とより適切に統合できます。 タイトル バーは、マイカテーマを使用して、アプリのビジュアル スタイルに合わせてカスタマイズできます。 ドキュメントのタイトルや現在の状態 ("編集"、"表示" など) など、その他の関連情報を含めることができます。 また、AutoSuggestBox や PersonPicture などの他の WinUI コントロールをホストして、アプリのまとまりのあるユーザー エクスペリエンスを提供することもできます。

これは適切なコントロールですか?

タイトル バー領域とアプリ UI を統合する場合は、字幕、 マイカ テーマ、WinUI コントロールとの統合などのカスタマイズを使用する場合は、TitleBar コントロールを使用します。

解剖学

既定では、タイトル バーにはシステム キャプション ボタンのみが表示されます。 タイトル バーのその他の部分は、関連付けられているプロパティ設定に応じて表示または非表示になります。

タイトル バーは、次の領域に分かれています。

• 戻るボタン:IsBackButtonEnabled、 IsBackButtonVisible、 BackRequested - ナビゲーション用の組み込みの戻るボタン。
• ウィンドウ切り替えボタン:IsPaneToggleButtonVisible、 PaneToggleRequested - このボタンは、NavigationView コントロールと組み合わせて使用することを目的としています。
• Left ヘッダー:LeftHeader
• Icon:IconSource
• Title:タイトル
• Subtitle:Subtitle
• Content:Content
• 右ヘッダー:RightHeader
• 最小ドラッグ領域: この領域はシステム キャプション ボタンの横に予約されているため、ユーザーは常にウィンドウをドラッグするための場所を取得できます。
• システム キャプション ボタン: これらのボタンは TitleBar コントロールの一部ではありません。RTL または LTR の設定に応じて、キャプション ボタンが表示される領域を割り当てるだけです。 キャプション ボタンとカスタマイズは 、AppWindowTitleBar によって処理されます。

レイアウトは、FlowDirection がRightToLeftされると反転されます。

タイトル バーを作成する

WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソース コードを取得する

次の使用例は、システム タイトル バーを置き換える単純なタイトル バーを作成します。 タイトル、アイコン、マイカテーマがあります。

<Window
    ...  >
    <Window.SystemBackdrop>
        <MicaBackdrop Kind="Base"/>
    </Window.SystemBackdrop>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <TitleBar x:Name="SimpleTitleBar"
                  Title="My App">
            <TitleBar.IconSource>
                <FontIconSource Glyph="&#xF4AA;"/>
            </TitleBar.IconSource>
        </TitleBar>

        <!-- App content -->
        <Frame x:Name="RootFrame" Grid.Row="1"/>
    </Grid>
</Window>

public MainWindow()
{
    this.InitializeComponent();

    // Hides the default system title bar.
    ExtendsContentIntoTitleBar = true;
    // Replace system title bar with the WinUI TitleBar control. 
    SetTitleBar(SimpleTitleBar); 
}

NavigationView との統合

ナビゲーション ビューには、戻るボタンとウィンドウの切り替えボタンが組み込まれています。 Fluent Design ガイダンスでは、カスタム タイトル バーを使用するときに、これらのコントロールをタイトル バーに配置することをお勧めします。

この例では、ナビゲーション ビューで戻るボタンとウィンドウのトグル ボタンを非表示にし、代わりにタイトル バーの対応するボタンを使用して、TitleBar コントロールを NavigationView コントロールと統合する方法を示します。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <TitleBar Title="My App"
              IsBackButtonVisible="True"
              IsBackButtonEnabled="{x:Bind RootFrame.CanGoBack, Mode=OneWay}"
              BackRequested="TitleBar_BackRequested"
              IsPaneToggleButtonVisible="True"
              PaneToggleRequested="TitleBar_PaneToggleRequested">
    </TitleBar>

    <NavigationView x:Name="RootNavigationView" Grid.Row="1"
                    IsBackButtonVisible="Collapsed"
                    IsPaneToggleButtonVisible="False">
        <Frame x:Name="RootFrame" />
    </NavigationView>
</Grid>

private void TitleBar_BackRequested(TitleBar sender, object args)
{
    if (RootFrame.CanGoBack)
    {
        RootFrame.GoBack();
    }
}

private void TitleBar_PaneToggleRequested(TitleBar sender, object args)
{
    RootNavigationView.IsPaneOpen = !RootNavigationView.IsPaneOpen;
}

UWP と WinUI 2

TitleBar コントロールは、UWP および WinUI 2 では使用できません。 代わりに、 タイトル バーのカスタマイズ (UWP アプリ) に関するページを参照してください。

関連資料

• タイトル バー (デザイン)
• タイトル バーのカスタマイズ
• TitleBar クラス