Xamarin.Forms で SearchBar を使うには (バグありの可能性)

こんにちは。エクセルソフトの田淵です。

Xamarin.Forms で、ListView を絞り込み表示とかしたい場合は SearchBar が便利です。

今回も Adam さんの Xamarin.Forms SearchBar Recipe を活用させていただきました。

2015/7/31 時点の最新版 Xamarin.Forms 1.4.4.6392 での情報です。

動作イメージ

f:id:ytabuchi:20150731154049g:plain:w300

サンプル

GitHub

使い方

例えば ListView で使用する場合は、カスタムの ListView に検索用のメソッドを用意し、SearchBar の TextChanged や SearchButtonPressed で検索メソッドを呼び出します。

ContentPage はこんな感じで、

public class SearchBarPageCS : ContentPage
{
    MyListView mylist;
    SearchBar searchbar;
    public SearchBarPageCS()
    {
        mylist = new MyListView();
        searchbar = new SearchBar
        {
            Placeholder = "Search",
        };
        searchbar.TextChanged += (sender, e) => mylist.SearchFilter(e.NewTextValue);
        searchbar.SearchButtonPressed += (sender, e) => mylist.SearchFilter(searchbar.Text);

        Content = new StackLayout
        {
            Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0),
            Children = {
                searchbar,
                mylist,
            }
        };
    }

}

ListView はこんな感じです。日本語のひらがなカタカナを無視するには Caltureなんちゃらを使用してｺﾞﾆｮｺﾞﾆｮするんでしょうか？半角英数字/全角英数字にも対応したいですね！

public class MyListView : ListView
{
    List<string> listData;
    public MyListView()
    {
        string[] str = { "test1", "TEST2", "abc", "XYZ", "ａｂｃ", "ｘｙｚ", "あいうえお", "カキクケコ", "表示性能" };
        listData = new List<string>(str);

        this.ItemsSource = listData;
    }

    /// <summary>
    /// MyListView を引数でフィルターするメソッドです。
    /// </summary>
    /// <param name="filter">string</param>
    public void SearchFilter(string filter)
    {
        this.BeginRefresh();

        if (string.IsNullOrWhiteSpace(filter))
        {
            this.ItemsSource = listData;
        }
        else
        {
            // 英語の大文字小文字対策のみですが、日本語の全角半角対策も入れるべきだと思います。
            // 良いメソッドをご存知の方はご紹介ください＞＜
            this.ItemsSource = listData
                .Where(x => x.ToLower().Contains(filter.ToLower()));
        }

        this.EndRefresh();
    }
}