眠るシーラカンスと水底のプログラマー

　WindowsPhoneToolkitのコントロールを紹介していくコーナーの3回目。

 

　今回は入力文字候補を出してくれるAutoCompleteBox。

 

 

　入力補助としてユーザーが入力する単語がある程度予測ができる場合に非常に便利だ。

　前に入力した単語を覚えていて次回は候補として出すという使い方もあり。

 

導入

 

　おなじみのMicrosoft.Phone.Controls.Toolkit.dllの追加。

　今回はNuGetを利用して楽ちん導入。

 

 

　NuGetの使い方は[Windows Phone] WindowsPhoneToolkit 紹介 その0 インストールを参照のほど。

 

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

 を追加。

 

基本的なAutoCompleteBox

 

まずは配置して動作を見てみましょう。

XAMLコードに以下を追加、

 

            <TextBlock Height="30" HorizontalAlignment="Left" Margin="45,6,0,0" Name="textBlock1" Text="デフォルト(wと入力してください)" VerticalAlignment="Top" />
            <toolkit:AutoCompleteBox HorizontalAlignment="Left" Margin="28,42,0,0" Name="autoCompleteBox" VerticalAlignment="Top" Width="389" />

 

コードビハインドで補完するための単語リストを渡してあげる。

 

                    List<string> list = new List<string>();
                    list.Add("Windows Phone");
                    list.Add("Windows8");
                    list.Add("windows Server 8");
                    list.Add("VisualStudio11");
                    this.autoCompleteBox.ItemsSource = list;

これで基本的なAutoCompleteBoxが表示できます。

 

主なプロパティ

 

　FilterMode

　補完の条件に「大文字小文字の区別をつける」といった補完条件をつけるのに利用します。

　先頭文字からヒット、大文字小文字の区別をつける場合、

 

// 先頭からマッチ、大文字小文字を区別する
                    this.autoCompleteBox.FilterMode = AutoCompleteFilterMode.StartsWithCaseSensitive;

 

 

　部分一致にしたい場合は、

 

                    // 部分一致(途中でも含まれる部分ならヒット)
                    this.autoCompleteBox.FilterMode = AutoCompleteFilterMode.Contains;

 

　というように指定します。

　指定の指定、種類が知りたい場合はAutoCompleteFilterMode 列挙体の記事が詳しく書かれています。

 

TextFilter

　補完条件に自作の判定を追加することができます。

        /// <summary>
        /// 入力文字と補完候補を比較して一覧に表示するか判定する
        /// このサンプルは入力文字に関係なく候補に8が含まれていたら返すだけ・・・
        /// </summary>
        /// <param name="search">入力された文字</param>
        /// <param name="value">補完候補</param>
        /// <returns></returns>
        bool containFilter(string search, string value)
        {
            //System.Diagnostics.Debug.WriteLine(search);
            //System.Diagnostics.Debug.WriteLine(value);

            return value.Contains("8");
        }

 

　上記のような関数をTextFilterに指定します。

　関数は第一引数に「フォームに入力された文字」、第二引数に「補完判定対象となるリストから一単語」が渡されます。

　returnでtrueを返せばそれが補完対象としてリスト表示されます。

　今回のサンプルは第一引数に関係なく文字に8を含むものを補完します。

 

                    this.autoCompleteBox3.TextFilter += this.containFilter;

 

 

メモ：補完候補が文字列ではない場合はItemFilter を利用します。

 

 

エラー

　デザインビュー上から2目以降のAutoCompleteBoxを配置しようとすると、

 

エラーになりました。

 

XAMLコードを直接触れば編集可能なので、とりあえずXAMLで配置。一度配置してしまえば、デザインビューでも操作可能になりました。

サンプルをダウンロードする(SDK7.1)