C# WinUI 3アプリでタイトルバーに検索ボックスを追加する方法

C# WinUI 3アプリを作っていく途中で、躓いた部分を備忘録的に投稿します。今回はWinUI3プロジェクトでXaml上で作成した画面のタイトルバーをカスタマイズする方法です。

タイトルバーのカスタマイズ

最近のトレンドなのか、VSCodeのようにタイトルバーにコントロールが追加されているアプリが増えてきています。

調べてみたら、XamlにGridを追加してタイトルバーのカスタマイズができるようになっていました。

公式ページの「タイトル バーのカスタマイズ」を参考にしました。

タイトルバーに検索ボックスを追加する方法

さっそく、タイトルバーに検索ボックスを追加してみます。

最初に追加するのはXamlファイル。

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

  <Grid x:Name="AppTitleBar" Height="48">
    <Grid.ColumnDefinitions>
      <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
      <ColumnDefinition x:Name="IconColumn" Width="Auto"/>
      <ColumnDefinition x:Name="TitleColumn" Width="Auto"/>
      <ColumnDefinition x:Name="LeftDragColumn" Width="*"/>
      <ColumnDefinition x:Name="SearchColumn" Width="Auto"/>
      <ColumnDefinition x:Name="RightDragColumn" Width="*"/>
      <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
    </Grid.ColumnDefinitions>
    <Image x:Name="TitleBarIcon" Source="/Assets/StoreLogo.png"
      Grid.Column="1"
      Width="16" Height="16"
      Margin="8,0,0,0"/>
    <TextBlock x:Name="TitleTextBlock" 
      Text="App title" 
      Style="{StaticResource CaptionTextBlockStyle}"
      Grid.Column="2"
      VerticalAlignment="Center"
      Margin="4,0,0,0"/>
        <AutoSuggestBox Grid.Column="4" QueryIcon="Find"
          PlaceholderText="検索"
          VerticalAlignment="Center"
          Width="260" Margin="4,0"/>
  </Grid>
</Grid>

追加する場所は下の画像を参考にしてください。

次にCSファイルのMainWindowクラスのコンストラクター部分にコードを追加します。

public sealed partial class MainWindow : Window
{
  public MainWindow()
  {
    this.InitializeComponent();

    ExtendsContentIntoTitleBar = true;
    SetTitleBar(AppTitleBar);
  }
}

追加する場所はしたの画像を参考にしてください。

ビルドして実行すると、こんな感じでタイトルバーの中央に検索ボックスが追加されます。

Windows.Formアプリの時よりも、案外簡単に追加できました。

そもそもXamlはクライアント領域のコントロールを定義するものだと勝手に思っていましたが、タイトルバーとかにもコントロールの配置が可能になっているようです。

まとめ

今回は短い記事ですが、WinUI 3 アプリでXamlに配置したコントロールをタイトルバーに配置して、検索ボックスの追加を行う方法について書きました。

Xamlファイルに追加したいコントロールを追加してExtensionContentInfoTitleBarを利用することで案外簡単に、タイトルバー（キャプションバー）のカスタマイズを行うことができました。

C#のWinUI 3アプリでタイトルバーにコントロールを追加したい人の参考になれば幸いです。

スポンサーリンク

最後までご覧いただき、ありがとうございます。