情報を検索する際によく見かけるSearchBarコントロール。

今回はこのSearchBarコントロールの全てのPublicプロパティと実際の動作についてまとめてみました。

SearchBarの使い方

かりまたかりまた

使い方は簡単で、以下のようにXamlに記述するのみです。


Windows8.1AndroidiPhone
かりまたかりまた

プロパティを設定しないでSearchBarコントロールを配置するとこれらのように表示されます。よく見てみると気付きますが、iPhoneの場合は上部の画面上部の時間とコントロールが被ってしまっています。なので、以下の様にしてiPhoneの場合にのみ、上部にスペースを空けてコントロールを配置してやります。


SearchBarのPublicプロパティ一覧

CancelButtonColorプロパティ
FontAttributesプロパティ
FontFamilyプロパティ
FontSizeプロパティ
HorizontalTextAlignmentプロパティ
Placeholderプロパティ
PlaceholderColorプロパティ
SearchCommandプロパティ
SearchCommandParameterプロパティ
Textプロパティ
TextColorプロパティ

SearchBarのプロパティをXamlで適用してみる

りんちゃんりんちゃん

MainPage.xamlに以下のように記述してみてにゃ~。


Windows8.1AndroidiPhone
りんちゃんりんちゃん

(iPhoneの速度が壊滅的だにゃ………。)

りんちゃんりんちゃん

Windows8.1にはそもそもキャンセルボタンがないのにゃ~。

コードビハインドでSearchBarを設定してみる

りんちゃんりんちゃん

コードビハインドに以下のコードを書いてみるのにゃ~。


りんちゃんりんちゃん

動作自体は上部のXamlで記述したものとほぼ同じなのでGIFはあえて載せないにゃ~。

SearchBarのPublicイベント一覧

SearchButtonPressedイベント
TextChangedイベント

SearchBarのイベントを使ってみる

SearchBarのSearchButtonPressedイベントを使ってみる

かりまたかりまた

MainPage.xamlには以下のように記述してください。


かりまたかりまた

MainPage.xaml.csには以下の様に書いてください。


SearchBarのTextChangedイベントを使ってみる

かりまたかりまた

MainPage.xamlには以下のように記述してください。


かりまたかりまた

コードビハインドは以下のように記述してください。