SearchBar
.NET マルチプラットフォーム アプリ UI (.NET MAUI) SearchBar は、検索の開始に使用されるユーザー入力コントロールです。 SearchBar コントロールでは、プレースホルダー テキスト、クエリ入力、検索実行、取り消しをサポートしています。 次の iOS のスクリーンショットは、結果が ListView に表示された SearchBar クエリを示しています。
SearchBar は次の特性を定義します。
CancelButtonColor
は、キャンセル ボタンの色を定義する Color です。CursorPosition
はint
で、Text
プロパティに格納されている文字列に次の文字を挿入する位置を決定します。FontAttributes
はFontAttributes
列挙値で、SearchBar フォントが太字か斜体か、あるいはそのどちらでもないかを決定します。FontAutoScalingEnabled
はbool
で、アプリの UI がオペレーティング システムで設定されたテキストのスケーリング設定を反映するかどうかを定義します。FontFamily
はstring
で、SearchBar によって使用されるフォント ファミリを決定します。FontSize
はdouble
の値で、プラットフォーム間の特定のフォントサイズを表します。HorizontalTextAlignment
は、クエリ テキストの水平方向の配置を定義するTextAlignment
列挙値です。IsTextPredictionEnabled
はbool
で、テキスト予測と自動テキスト修正が有効になっているかどうかを決定します。SearchCommand
は ICommand で、指のタップやクリックなどのユーザー アクションを、ビューモデル上で定義されたコマンドにバインドすることができます。SearchCommandParameter
はobject
で、SearchCommand
に渡す必要があるパラメーターを指定します。SelectionLength
はint
で、SearchBar 内のテキスト選択の長さを返したり設定したりするために使用できます。VerticalTextAlignment
はTextAlignment
列挙値で、クエリ テキストの垂直方向の配置を定義します。
CancelButtonColor
は、キャンセル ボタンの色を定義する Color です。HorizontalTextAlignment
は、クエリ テキストの水平方向の配置を定義するTextAlignment
列挙値です。SearchCommand
は ICommand で、指のタップやクリックなどのユーザー アクションを、ビューモデル上で定義されたコマンドにバインドすることができます。SearchCommandParameter
はobject
で、SearchCommand
に渡す必要があるパラメーターを指定します。VerticalTextAlignment
はTextAlignment
列挙値で、クエリ テキストの垂直方向の配置を定義します。
これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。
さらに、SearchBar は SearchButtonPressed
イベントを定義しており、これは検索ボタンがクリックされたり、Enter キーが押されたりしたときに発生します。
SearchBar は InputView
クラスから派生し、このクラスから次のプロパティを継承します。
double
型のCharacterSpacing
は、入力されたテキストの文字間の間隔を設定します。bool
型のIsReadOnly
は、ユーザーがテキストを変更できないようにするかどうかを定義します。 このプロパティの既定値はfalse
です。bool
型のIsSpellCheckEnabled
は、スペル チェックを有効にするかどうかを制御します。Keyboard
型のKeyboard
は、テキストを入力するときに表示されるソフト入力キーボードを指定します。int
型のMaxLength
は、入力の最大長を定義します。string
型のPlaceholder
は、コントロールが空の場合に表示されるテキストを定義します。- Color 型の
PlaceholderColor
は、プレースホルダー テキストの色を定義します。 string
型のText
は、コントロールに入力されたテキストを定義します。- Color 型の
TextColor
は、入力されたテキストの色を定義します。 TextTransform
型のTextTransform
は、入力されたテキストの大文字と小文字の区別を指定します。
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);
.NET MAUI
フィードバック
https://aka.ms/ContentUserFeedback」を参照してください。
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「フィードバックの送信と表示