WinUI 3でデスクトップアプリを作ると、最初は画面中央のコンテンツに目が向きがちです。しかし、Windows 11らしいアプリに仕上げるうえで意外に大きな印象差を生むのがタイトルバーです。
Windows App SDK 1.7以降では、WinUI 3にTitleBarコントロールが用意されています。タイトルやアイコンを表示するだけでなく、戻るボタンやペイン切り替えボタン、任意のコンテンツをタイトルバー領域へ組み込めます。今回は、標準タイトルバーから一歩進んで、WinUI 3らしいタイトルバーを組み立てる方法を整理します。
従来のカスタムタイトルバーは少し手間がかかりました
Windowsのタイトルバーには、ウィンドウをドラッグする領域と、最小化・最大化・閉じるといったシステムのキャプションボタンがあります。単純にGridやTextBlockを上部へ置くだけでは、その部分は通常のアプリコンテンツであり、タイトルバーとしてウィンドウをドラッグできる領域にはなりません。
従来のWinUI 3でもWindow.ExtendsContentIntoTitleBarとSetTitleBarを使って独自UIをタイトルバーにすることはできました。ただし、タイトル、アイコン、ドラッグ領域、キャプションボタンとの位置関係などを開発者側で考える必要がありました。
現在のTitleBarコントロールは、この定番構成をWinUIのコントロールとして扱いやすくしたものです。Microsoftの公式ドキュメントでも、モダンなWinUI 3デスクトップアプリを構成する要素として、Mica、TitleBar、NavigationView、InfoBarなどを組み合わせるパターンが紹介されています。
まずは最小構成を作る
Windows App SDK 1.7以降を利用しているプロジェクトなら、XAMLにTitleBarを配置できます。次の例では、1行目をタイトルバー、2行目を通常のコンテンツ領域にしています。
<Window
x:Class="WinUITips.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TitleBar x:Name="AppTitleBar"
Title="HIRO WinUI Sample"
Subtitle="WinUI 3 Tips" />
<Grid Grid.Row="1" Padding="24">
<TextBlock Text="メインコンテンツ"
FontSize="24" />
</Grid>
</Grid>
</Window>ただし、XAMLへ置いただけではまだ通常のUIです。MainWindow側で、既定のシステムタイトルバーを隠し、このコントロールをタイトルバーとして登録します。
public MainWindow()
{
InitializeComponent();
ExtendsContentIntoTitleBar = true;
SetTitleBar(AppTitleBar);
}この2行は何をしているのか
ExtendsContentIntoTitleBar = trueは、アプリのコンテンツをタイトルバー領域まで拡張するための設定です。MicrosoftのAPIドキュメントでは、この値をtrueにして既定タイトルバーを隠し、SetTitleBarと組み合わせてカスタムタイトルバーを指定する仕組みが説明されています。
続くSetTitleBar(AppTitleBar)は、XAML上のAppTitleBarをウィンドウのタイトルバーとして登録します。これによって単なる上部UIではなく、ウィンドウをドラッグするための領域としても扱われます。
ここで初心者が間違えやすいのは、SetTitleBarだけ呼べばよいと考えることです。ExtendsContentIntoTitleBarがfalseのままでは、Microsoftのドキュメント上、SetTitleBarを呼んでもカスタムタイトルバーとして機能しません。
TitleBarコントロールを使う利点
専用コントロールを使う大きな利点は、Windowsのタイトルバーに必要な領域を自分で一から再現しなくてよいことです。TitleBarはシステムのキャプションボタンが置かれる場所を考慮し、ユーザーがウィンドウをつかめる最小ドラッグ領域も確保します。
さらに、IconSource、Title、Subtitleに加えて、戻るボタンやペイン切り替えボタン、左右のヘッダー、任意のコンテンツを組み込めます。NavigationViewを使うアプリなら、ナビゲーション用の操作をタイトルバー側へまとめる設計も可能です。
実務ではどこで役立つのか
業務アプリでは、画面上部にアプリ名、その下にさらにNavigationViewのヘッダーを置き、似た情報が二重に表示されることがあります。TitleBarへアプリのアイデンティティを集約すると、縦方向のスペースを有効に使えます。Microsoftも、アプリ名やアイコンをタイトルバーとページ本文の両方へ重複して配置しないことを推奨しています。
また、複数ページを持つ設定ツールや管理ツールでは、TitleBarの戻るボタンやペイン切り替えボタンとNavigationViewを連携させることで、Windows 11のアプリらしい一貫したナビゲーションを作りやすくなります。タイトルバーは単なる飾りではなく、アプリ全体のシェル設計の一部として考えると分かりやすいです。
注意点：ExtendsContentIntoTitleBarはXAMLに書かない
ExtendsContentIntoTitleBarはXAMLのIntelliSenseに表示されることがありますが、MicrosoftのAPIドキュメントでは、XAMLで設定するとエラーになるためコード側で設定するよう注意されています。今回の例のようにMainWindowのコンストラクターで設定しておくのが分かりやすいでしょう。
また、TitleBarコントロール自体はWindows App SDK 1.7から利用できます。それ以前のWindows App SDKを対象にしている既存プロジェクトでは、そのまま同じコードを利用できません。プロジェクトが参照しているWindows App SDKのバージョンを確認してから導入してください。
なお、より低レベルにタイトルバーを制御したい場合にはAppWindowTitleBarもあります。Windows App SDKのAppWindowはトップレベルウィンドウを扱う抽象化で、WinUI以外のWPF、Windows Forms、Win32からも利用できるウィンドウAPIです。一方、WinUI 3で標準的なタイトル、アイコン、ナビゲーションを組み合わせたいなら、まずTitleBarコントロールから検討すると構成をシンプルにできます。
まとめ
WinUI 3でモダンなタイトルバーを作るときは、Windows App SDK 1.7以降のTitleBarコントロールが有力な選択肢です。XAMLにTitleBarを配置し、コード側でExtendsContentIntoTitleBar = trueとSetTitleBarを設定する、という役割分担を覚えておくと理解しやすくなります。
タイトルバーを整える目的は見た目だけではありません。ドラッグ領域やキャプションボタンとの共存をWindowsの仕組みに沿って扱いながら、NavigationViewなどと組み合わせてアプリ全体の操作を整理できます。新しいWinUI 3アプリを作るときは、本文領域だけでなく、ウィンドウ全体をひとつのUIとして設計してみてください。
参考資料
- Microsoft Learn – Title bar
- Microsoft Learn – Structure a modern WinUI 3 desktop app
- Microsoft Learn – Windowing overview for WinUI and Windows App SDK
- Microsoft Learn – Window.ExtendsContentIntoTitleBar
コメント