タイトルバー

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

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

カスタムタイトルバーがあるアプリウィンドウのスクリーンショット

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

タイトルバー領域とアプリ 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されると反転されます。

タイトルバーを作成する

重要な API:TitleBar クラス、 Title プロパティ

WinUI 3 ギャラリーアプリを開き、TitleBar の動作を確認する

WinUI 3 ギャラリー アプリには、WinUI コントロールと機能の対話型の例が含まれています。 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;
}

ドラッグ領域をカスタマイズする

ユーザーは、タイトルバーをドラッグしてウィンドウを移動します。 TitleBar コントロールは、ユーザーがドラッグできるコンテンツ領域の部分と、クリックなどのポインター入力を受け取るパーツを決定します。

Windows アプリ SDK 2.1.3 以降、TitleBar コントロールはコンテンツ内の要素を調べ、ボタン、テキストボックス、コンボボックスなどの対話型コントロールのみをドラッグ領域から除外します。空のスペースと非対話型要素 (TextBlock など) は既定でドラッグ可能であるため、マークアップを変更する必要はありません。以前のバージョンでは、コンテンツ領域の空き領域がウィンドウのドラッグをブロックすることがありました。この既定の動作は、TitleBar_ContentDragRegions ランタイム互換性に関する変更です。詳細については、「 RuntimeCompatibilityOptions.DisabledChanges」を参照してください。

重要な API:TitleBar.IsDragRegion 添付プロパティ、 AutoRefreshDragRegions プロパティ、 RecomputeDragRegions メソッド

次の例は、WinUI 3 ギャラリーのサンプルに基づいています。タイトルバーのコンテンツは、AutoSuggestBox と Button を含むグリッドです。どちらのコントロールもクリック可能で、その横の空き領域はドラッグ可能です。

<TitleBar x:Name="AppTitleBar" Title="My App">
    <TitleBar.Resources>
        <!-- Stretch the content across the available width of the title bar. -->
        <HorizontalAlignment x:Key="TitleBarContentHorizontalAlignment">Stretch</HorizontalAlignment>
    </TitleBar.Resources>
    <TitleBar.Content>
        <Grid ColumnSpacing="8">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <AutoSuggestBox MaxWidth="580"
                            VerticalAlignment="Center"
                            PlaceholderText="Search..."
                            QueryIcon="Find" />

            <StackPanel x:Name="RightPanel"
                        Grid.Column="1"
                        Orientation="Horizontal"
                        Spacing="8"
                        VerticalAlignment="Center">
                <Button x:Name="StatusButton"
                        Content="Status"
                        Click="StatusButton_Click" />
            </StackPanel>
        </Grid>
    </TitleBar.Content>
</TitleBar>

要素のドラッグ動作をオーバーライドする

タイトルバーのコンテンツ内の要素の既定の動作をオーバーライドするには、 TitleBar.IsDragRegion 添付プロパティを設定します。このプロパティは null 許容のブール値です。

Value	Behavior
未設定 (`null`)	TitleBar コントロールが判断します。対話型コントロールはクリック可能で、他の要素はドラッグできる。
`True`	要素は、対話型コントロールの場合でもドラッグ可能です。要素上でのポインター入力によってウィンドウが移動するため、ユーザーは要素をクリックできません。
`False`	対話型コントロールではない場合でも、要素はクリック可能です。

StackPanel などのパネルで、そのプロパティを設定できます。

Falseに設定すると、パネルの領域全体がクリック可能で、子間のスペースも含まれます。
Trueに設定すると、プロパティを False に設定した子を除き、パネルとその子はドラッグ可能になります。

必要な最小の要素にプロパティを設定して、タイトルバーの大きな領域が誤ってドラッグ可能またはクリック可能にならないようにします。

次の使用例は、ユーザーがコントロール間のスペースを押したときにウィンドウをドラッグしないように、書式設定コントロールのグループ全体をクリックできるようにします。

<StackPanel Orientation="Horizontal" Spacing="8" TitleBar.IsDragRegion="False">
    <ComboBox PlaceholderText="Font" />
    <ComboBox PlaceholderText="Size" />
    <ToggleButton Content="Bold" />
</StackPanel>

コードでは、SetIsDragRegion を呼び出して値を設定し、を ClearValue と共に呼び出して既定の動作に戻します。値を読み取るには、GetIsDragRegionを呼び出します。プロパティが設定されていない場合は、 null を返します。値が変更されると、TitleBar コントロールはドラッグ領域を更新します。

// Make the button draggable. Users can't click it.
TitleBar.SetIsDragRegion(StatusButton, true);

// Make the button clickable.
TitleBar.SetIsDragRegion(StatusButton, false);

// Clear the value so that the TitleBar control decides.
StatusButton.ClearValue(TitleBar.IsDragRegionProperty);

コンテンツが変更されたときにドラッグ領域を更新する

TitleBar コントロールは、コンテンツの設定または置換、コンテンツの読み込み時、タイトルバーのサイズの変更時、および要素の TitleBar.IsDragRegion 値の変更時にドラッグ領域を更新します。

実行時にタイトルバーのコンテンツ内の要素を追加、削除、またはサイズ変更する場合は、変更後に RecomputeDragRegions を呼び出します。

private void AddButton_Click(object sender, RoutedEventArgs e)
{
    RightPanel.Children.Insert(0, new Button { Content = "Extra" });

    // Update the drag regions so that the new button is clickable.
    AppTitleBar.RecomputeDragRegions();
}

タイトルバーのコンテンツが頻繁に変更される場合は、代わりに AutoRefreshDragRegions を True に設定できます。 TitleBar コントロールは、各レイアウトパスの後でドラッグ領域を更新します。このオプションはパフォーマンスに影響を与える可能性があるため、既定では False です。

<TitleBar x:Name="AppTitleBar" Title="My App" AutoRefreshDragRegions="True">
    <!-- Title bar content that changes at run time. -->
</TitleBar>

Note

ドラッグ領域はポインター入力にのみ影響します。キーボードフォーカスや、スクリーンリーダーなどのUI オートメーションクライアントがタイトルバーの要素を操作する方法は変更されません。タイトルバーの対話型コントロールにキーボードを使用して引き続きアクセスできることを確認します。

アプリで TitleBar コントロールが使用されていない場合は、 InputNonClientPointerSource クラスを使用して、カスタムタイトルバーの対話型領域を設定します。詳細については、「対話型コンテンツ」を参照してください。

フィードバック

このページはお役に立ちましたか?

最終更新: 2026-10-15

タイトル バー