Xamarin.Formsでスマホアプリ開発

C#Xamarin.Formsでスマホ開発#31 SearchBarの使い方を解説

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。

SearchBarとは?

SearchBarとは,Googleの検索エリアみたいな感じで,検索文字を入れるコントロールです。文字を入れるたびに検索を実行することもできますし,キーボードの右下の虫眼鏡ボタンを押したときに検索をさせることもできます。

準備

今回はSearchBarPageというコンテンツページを作成して検証していきたいと思います。ここまで順番に解説をよんでいただいている方は,SearchBarPage という新規のコンテンツページを作って,ControlsPageから呼び出せるようにしてください。ここから初めて読んでいる方は,Xamarin.Formsのデフォルトで作成されるMainPageにSearchBarPageの実装をして問題ありません。

SearchBarPageの追加

Pagesフォルダーに新規追加でSearchBarPageという名前のコンテンツページを作成してください。作成されたらデフォルトのラベルを削除して,次のように記述します。

Placeholder

SearchBarに何も入力していないときに表示されるガイド用の薄いグレーの文字に何を表示するかを設定します。「検索文字を入力してください…」など自由に設定できます。

TextChanged

テキストが変更された時に検索したい場合はこのイベントを実装して,文字が変わるたびに検索処理をすることができます。

SearchButtonPressed

虫眼鏡ボタンで確定したときにだけ検索したいのであれば,SearchButtonPressedイベントを実装します。通常はTextChangedかこちらのどちらかの実装のみでよいと思います。

ListView

ListViewは今回のレクチャーのメイン要素ではないのでサラッと記述します。TextCellというものを指定すると,「タイトル」と「詳細」を表示できる行を作成できます。今回はIdとProductNameを表示する一覧を作成する想定なので,その名前でバインドしておきます。

コードビハインド側の実装

ProductDto

ProductDtoはListViewにバインドするためのクラスです。IdとProductNameだけのシンプルなクラスです。

ObservableCollection

ProductDtoをリストにするためのコレクションクラスです。_dtosという名前でインスタンスを作成し,コンストラクタでリストを生成してMyListViewにバインドしています。リストの中身は何でもいいのですが,今回の検索の検証がしやすいように「ABCDE」などの文字を入れています。

GetDto

_dtosを検索文字で絞り込んだリストを返却しています。文字が設定されていない場合は_dtosの内容そのままが返却されます。大文字小文字を区別しないのであれば,ToUpper関数を比較する両方の文字に適応すればよいでしょう。

TextChanged

SearchBarのテキストが変更されるたびに通知されます。イベント引数のe.NewTextValueに変更後の値が通知されるので,その値でGetDtoを呼び出し,結果をMyListViewに再度バインドしています。

SearchButtonPressed

虫眼鏡ボタンが押されたタイミングで通知されます。このタイミングで検索を行う場合はここで検索処理をします。

実行

実行するとSearchBarとリストが表示されます。SearchBarに文字を入力すると,その文字を含む行だけが表示されるはずです。右下の虫眼鏡ボタンを押下すると,SearchButtonPressedが通知されます。

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。