C# WinUI3 のタイトルバーにサジェスト付きの検索ボックスを表示させる手順

C# WinUI 3アプリを作っていく途中で、調べたことを忘録的に投稿します。今回はWinUI3プロジェクトでタイトルバーに、候補を表示する検索ボックスを追加する場合の手順です。

タイトルバーに検索ボックスを表示

Visual Studio Codeで実装されている、こんな感じの検索ボックスを実装してみます。

ウィンドウの初期化に次のコードを追加して、アイコンやシステムメニューを非表示にして画面の一部をタイトルバーに置き換えます。

public MainWindow()
{
  this.InitializeComponent();
  IntPtr hWnd = WinRT.Interop.WindowNative.GetWindowHandle(this);
  Microsoft.UI.WindowId windowId = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(hWnd);
  Microsoft.UI.Windowing.AppWindow appWindow = Microsoft.UI.Windowing.AppWindow.GetFromWindowId(windowId);

  appWindow.TitleBar.IconShowOptions = IconShowOptions.HideIconAndSystemMenu;

}

実行すると、こんな感じ。

キャプションやアイコンも非表示になり、画面上部をマウスのドラッグで移動が可能になります。

Xamlを変更して［AutoSuggestBox］コントロールを追加します。

<Window
  x:Class="MinimumWindowApp.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:MinimumWindowApp"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  Title="SuggestBoxWindowApp">

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

    <Grid x:Name="AppTitleBarGrid" Height="48">
      <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="SearchBoxColm" MinWidth="320"/>
      </Grid.ColumnDefinitions>
      <AutoSuggestBox x:Name="SearchBox" Grid.Column="0" QueryIcon="Find" PlaceholderText="検索" VerticalAlignment="Center" MaxWidth="320" TextChanged="SearchBox_TextChanged" SuggestionChosen="SearchBox_SuggestionChosen" QuerySubmitted="SearchBox_QuerySubmitted">
      </AutoSuggestBox>
    </Grid>
  </Grid>
</Window>

実行すると、タイトルバー部分に検索ボックスが追加されます。

［AutoSuggestBox］コントロールを利用するには［TextChanged］と［QuerySubmitted］、［SuggestionChosen］の３種類のイベントが用意されています。

キーワードが入力された際に［TextChanged］イベントで取得して、キーワードに対応した候補をリストとして追加します。

引数が［Reason.UserInput］の場合は、ユーザーが入力した文字として判定できます。

private void SearchBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
{
  //キーワード入力時のイベント
  if(args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
  {
    //ユーザーがキーワードを変更
    string[] suggestList = { "札幌", "仙台", "東京", "名古屋", "大阪", "福岡" };
    sender.ItemsSource = suggestList;
  }
}

実行すると、こんな感じで候補が表示されます。

表示したリストから選択すると［SuggestionChosen］イベントで選んだ内容が取得できます。

検索キーワードに何も処理を行う場合には、このイベントは必要ありません。

private void SearchBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
{
  //候補選択痔のイベント 文字列の場合は処理は不要
  sender.Text = args.SelectedItem.ToString();
}

最後に、［QuerySubmitted］イベントで［Enter］キーや［虫眼鏡］アイコンのクリック時の操作を追加します。

private void SearchBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
{
  //検索時のイベント
  string que = "";
  if(args.ChosenSuggestion == null)
  {
    //入力した文字列
    que = args.QueryText;
  }
  else
  {
    //リストから選択
    que = args.ChosenSuggestion.ToString();
  }
}

イベントプロシージャーの［AutoSuggestBoxQuerySubmittedEventArgs ］引数の［ChosenSuggestion］プロパティで、”入力した文字列” と、”選択した候補” の判定が可能です。

ここまでの操作で、タイトルバーに入力したキーワードに対応した候補を一覧表示する検索ボックスを実装できます。

まとめ

今回は短い記事ですが、Visual StudioのWinUI3プロジェクトで、タイトルバーに入力したキーワードに対応した候補を一覧表示する検索ボックスを追加する手順について紹介しました。

［AutoSuggestBox］コントロールを利用して、入力した文字列に対応した候補を表示する検索ボックスが実装できます。

WinUI 3アプリでVisual Studio Codeの［コマンド パレット］のような検索ボックスをタイトルバーに追加したい人の参考になれば幸いです。

スポンサーリンク

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