SearchBar

.NET マルチプラットフォーム アプリ UI (.NET MAUI) SearchBar は、検索の開始に使用されるユーザー入力コントロールです。 SearchBar コントロールでは、プレースホルダー テキスト、クエリ入力、検索実行、取り消しをサポートしています。 次の iOS のスクリーンショットは、結果が ListView に表示された SearchBar クエリを示しています。

SearchBar は次の特性を定義します。

• CancelButtonColor は、キャンセル ボタンの色を定義する Color です。
• HorizontalTextAlignment は、クエリ テキストの水平方向の配置を定義する TextAlignment 列挙値です。
• SearchCommand は ICommand で、指のタップやクリックなどのユーザー アクションを、ビューモデル上で定義されたコマンドにバインドすることができます。
• SearchCommandParameter は object で、SearchCommand に渡す必要があるパラメーターを指定します。
• VerticalTextAlignment は TextAlignment 列挙値で、クエリ テキストの垂直方向の配置を定義します。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

さらに、SearchBar は SearchButtonPressed イベントを定義しており、これは検索ボタンがクリックされたり、Enter キーが押されたりしたときに発生します。

SearchBar は InputView クラスから派生し、このクラスから次のプロパティを継承します。

• double 型の CharacterSpacing は、入力されたテキストの文字間の間隔を設定します。
• int 型の CursorPosition は、エディター内でのカーソルの位置を定義します。
• FontAttributes 型の FontAttributes は、テキストのスタイルを指定します。
• bool 型の FontAutoScalingEnabled は、オペレーティング システムで設定されたスケーリング設定をテキストに反映するかどうかを定義します。 このプロパティの既定値は true です。
• string 型の FontFamily は、フォント ファミリを定義します。
• double 型の FontSize は、フォント サイズを定義します。
• bool 型の IsReadOnly は、ユーザーがテキストを変更できないようにするかどうかを定義します。 このプロパティの既定値は false です。
• bool 型の IsSpellCheckEnabled は、スペル チェックを有効にするかどうかを制御します。
• bool 型の IsTextPredictionEnabled は、テキスト予測と自動テキスト修正を有効にするかどうかを制御します。
• Keyboard 型の Keyboard は、テキストを入力するときに表示されるソフト入力キーボードを指定します。
• int 型の MaxLength は、入力の最大長を定義します。
• string 型の Placeholder は、コントロールが空の場合に表示されるテキストを定義します。
• Color 型の PlaceholderColor は、プレースホルダー テキストの色を定義します。
• int 型の SelectionLength は、コントロール内で選択したテキストの長さを表します。
• string 型の Text は、コントロールに入力されたテキストを定義します。
• Color 型の TextColor は、入力されたテキストの色を定義します。
• TextTransform 型の TextTransform は、入力されたテキストの大文字と小文字の区別を指定します。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

さらに、InputView は TextChanged イベントも定義します。これは、Entry のテキストが変更されたときに発生するイベントです。 TextChanged イベントに付随する TextChangedEventArgs オブジェクトには、NewTextValue プロパティと OldTextValue プロパティがあり、それぞれ新しいテキストと前のテキストを指定します。

SearchBar を作成する

検索バーを作成するには、SearchBar オブジェクトを作成し、その Placeholder プロパティを、ユーザーに検索語の入力を指示するテキストに設定します。

次の XAML の例は、SearchBar を作成する方法を示しています。

<SearchBar Placeholder="Search items..." />

同等の C# コードを次に示します。

SearchBar searchBar = new SearchBar { Placeholder = "Search items..." };

Note

iOS では、テキスト入力フィールドが画面の下部付近にある場合、ソフト入力キーボードで覆い隠される可能性があり、テキストを入力しにくくなります。 ただし、.NET MAUI iOS アプリでは、テキスト入力フィールドがソフト入力キーボードで覆い隠されそうな場合、ページが自動的にスクロールされ、フィールドがソフト入力キーボードの上に配置されます。 Microsoft.Maui.Platform 名前空間内の KeyboardAutoManagerScroll.Disconnect メソッドを呼び出して、この既定の動作を無効にすることができます。 KeyboardAutoManagerScroll.Connect メソッドを呼び出して、動作を無効にした後、その動作を再度有効にすることができます。

イベント ハンドラーを使用して検索を実行する

SearchBar コントロールを使用して検索を実行するには、次のいずれかのイベントにイベント ハンドラーをアタッチします。

• SearchButtonPressed は、ユーザーが検索ボタンを選ぶか、Enter キーを押したときに呼び出されます。
• TextChanged は、クエリ ボックス内のテキストが変更されるたびに呼び出されます。 このイベントは、InputView クラスから継承されます。

次の XAML の例では、TextChanged イベントにアタッチされたイベント ハンドラーを示し、ListView を使用して検索結果を表示します。

<SearchBar TextChanged="OnTextChanged" />
<ListView x:Name="searchResults" >

この例では、TextChanged イベントは、OnTextChanged という名前のイベント ハンドラーに設定されます。 このハンドラーは、次の分離コード ファイルにあります。

void OnTextChanged(object sender, EventArgs e)
{
    SearchBar searchBar = (SearchBar)sender;
    searchResults.ItemsSource = DataService.GetSearchResults(searchBar.Text);
}

この例では、GetSearchResults メソッドを備えた DataService クラスは、クエリに一致する項目を返すために使用されます。 SearchBar コントロールの Text プロパティ値が GetSearchResults メソッドに渡され、その結果を使用して ListView コントロールの ItemsSource プロパティが更新されます。 全体的な効果としては、検索結果が ListView に表示されます。

ビューモデルを使用して検索を実行する

SearchCommand プロパティを ICommand 実装にバインドすると、イベント ハンドラーを使用せずに検索を実行できます。 コマンドの詳細については、「コマンド」をご覧ください。

次の例は、PerformSearch という名前の ICommand プロパティを含んだビューモデル クラスを示しています。

public class SearchViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public ICommand PerformSearch => new Command<string>((string query) =>
    {
        SearchResults = DataService.GetSearchResults(query);
    });

    private List<string> searchResults = DataService.Fruits;
    public List<string> SearchResults
    {
        get
        {
            return searchResults;
        }
        set
        {
            searchResults = value;
            NotifyPropertyChanged();
        }
    }
}

Note

このビューモデルでは、検索を実行できる DataService クラスが存在することを前提としています。

次の XAML の例では、SearchViewModel クラスを使用しています。

<ContentPage ...>
    <ContentPage.BindingContext>
        <viewmodels:SearchViewModel />
    </ContentPage.BindingContext>
    <StackLayout>
        <SearchBar x:Name="searchBar"
                   SearchCommand="{Binding PerformSearch}"
                   SearchCommandParameter="{Binding Text, Source={x:Reference searchBar}}"/>
        <ListView x:Name="searchResults"
                  ItemsSource="{Binding SearchResults}" />
    </StackLayout>
</ContentPage>

この例では、BindingContext は SearchViewModel クラスのインスタンスに設定されています。 SearchBar.SearchCommand プロパティは PerformSearch ビューモデル プロパティにバインドされ、SearchCommandParameter プロパティは SearchBar.Text プロパティにバインドされます。 同様に、ListView.ItemsSource プロパティはビューモデルの SearchResults プロパティにバインドされます。

ソフト入力キーボードの表示と非表示

Microsoft.Maui 名前空間内の SoftInputExtensions クラスは、テキスト入力をサポートするコントロール上で、ソフト入力キーボードとの対話をサポートする一連の拡張メソッドを提供します。 このクラスには、次のメソッドが定義されています。

• IsSoftInputShowing は、デバイスが現在ソフト入力キーボードを表示しているかどうかを確認します。
• HideSoftInputAsync は、ソフト入力キーボードが現在表示されている場合、それを非表示にしようとします。
• ShowSoftInputAsync は、ソフト入力キーボードが現在非表示になっている場合、それを表示しようとします。

次の例は、searchBar という名前の SearchBar が現在表示されている場合に、そこでソフト入力キーボードを非表示にする方法を示しています。

if (searchBar.IsSoftInputShowing())
   await searchBar.HideSoftInputAsync(System.Threading.CancellationToken.None);