C# WinUI 3アプリを作っていく途中で、調べたことを忘録的に投稿します。今回はWinUI3プロジェクトで［AutoSuggestBox］コントロールで表示させた候補リストの選択を矢印キーで行う方法です。
入力したキーワードで候補を表示
［AutoSuggestBox］コントロールは、キーワードから用意した候補リストを表示してユーザーに選択させる表示が可能です。
例えば、こんな感じでテキストボックスに入力した文字に該当する一覧を表示して、ユーザーに選択する機能がアプリに追加できます。
この一覧の選択をマウスカーソルではなく、キーボードの矢印キーで選択できるようにしてみます。
矢印キーが入力されている間は、他のイベントをキャンセルするためのフラグを追加して、新しく［ProcessKeyboardAccelerators］イベントを追加します。
［ProcessKeyboardAccelerators］に受け取ったキーが矢印キー（例では、［UP］と［DOWN］キー）の場合にフラグ変数を有効にします。
private bool IsSuggestSelecting = false;
private void AutoSuggestFindTitle_ProcessKeyboardAccelerators(UIElement sender, ProcessKeyboardAcceleratorEventArgs args)
{
if (args.Key == VirtualKey.Down || args.Key == VirtualKey.Up)
{
IsSuggestSelecting = true;
}
}テキストが変更された際のイベントの先頭でフラグを判定して、キー入力中は処理をキャンセルします。
private void AutoSuggestFindTitle_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
{
if (IsSuggestSelecting == true)
{
return;
}
//テキストが変更された場合の処理
}実行する［AutoSuggestBox］コントロールで表示した候補リストを上と下の矢印キーで移動できるようになります。
また、この状態だとキーワードを編集してもリストが更新されなくなるので、［ProcessKeyboardAccelerators］イベントを修正します。
private void AutoSuggestFindTitle_ProcessKeyboardAccelerators(UIElement sender, ProcessKeyboardAcceleratorEventArgs args)
{
if (args.Key == VirtualKey.Down || args.Key == VirtualKey.Up)
{
IsSuggestSelecting = true;
}
if (args.Key == VirtualKey.Delete || args.Key == VirtualKey.Back || args.Key == VirtualKey.Enter)
{
IsSuggestSelecting = false;
}
}［DELETE］や［BACKSPACE］でキーワードを削除した場合や、［ENTER］キーで候補を選択した場合にフラグを元に戻すことで候補リストが更新されるようになります。
まとめ
今回はWinUI3プロジェクトで［AutoSuggestBox］コントロールで表示させた候補リストの選択を矢印キーで行う方法について紹介しました。
［AutoSuggestBox］コントロールで表示されるリストはマウスで選択できますが、矢印キーで選択を変更した場合に新しい候補に更新されてしまい、候補の移動が出来ません。
フラグを用意してキー入力中の動作を制御することで、候補一覧の選択を矢印キーで操作が可能になります。
WinUI 3で［AutoSuggestBox］コントロールの候補一覧をカーソルキーで移動したい人の参考になれば幸いです。
スポンサーリンク
最後までご覧いただき、ありがとうございます。