Silverlight 3に新しく追加されたコントロール

Silverlight 3徹底入門（2）

AutoCompleteBox

　AutoCompleteBoxコントロールはその名の通りテキストボックスにオートコンプリート機能を追加したコントロールです。使い方はとても簡単です。ページの初期化イベントなどでAutoCompleteBoxコントロールのItemSourceプロパティにオートコンプリートで表示したい文字列のコレクションを設定するだけです（リスト2）。

［リスト2］ ItemsSourceプロパティーを設定するコード

public AutoCompleteBoxSamplePage()
{
  InitializeComponent();

  AutoCompleteBox1.ItemsSource = GetItemSource();
}

private List<string> GetItemSource()
{
  return new List<string>() {
    "Button","HyperlinkButton","RepeatButton","CheckBox","ComboBox","ListBox",
    "RadioButton","Slider","Calendar","DatePicker","TextBlock","ProgressBar",
    "AutoCompleteBox","PasswordBox","TextBox","DataGrid","DataPager","TreeView",
    "Image","MultiScaleImage","MediaElement","InkPresenter","Border","Canvas",
    "ContentControl","Grid","GridSplitter","StackPanel","VirtualizingStackPanel"  };
}

　［リスト2］のコードは検索文字列のリストを作成し、AutoCompleteBoxクラスのItemSourceプロパティーに設定しデータバインドを行っているコードです。

　次にXAML側のコードを確認します（リスト3）。

［リスト3］AutoCompleteBoxSamplePageのデザイン（XAML）

<UserControl
  x:Class="CodeZine2.AutoCompleteBoxSamplePage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
  xmlns:input="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input"
  xmlns:common="clr-namespace:System.Windows;assembly=System.Windows.Controls">

  <Grid x:Name="LayoutRoot">
    <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
    <input:AutoCompleteBox x:Name="AutoCompleteBox1"
      MinimumPrefixLength="2"
      FilterMode="StartsWith"
      IsTextCompletionEnabled="True"
      VerticalAlignment="Top" Width="200" />
    <ContentPresenter Name="SelectedValue"
      Content="{Binding SelectedItem, ElementName=AutoCompleteBox1}"  />
    </StackPanel>
  </Grid>
</UserControl>

　AutoCompleteBoxコントロールは、何文字目でオートコンプリートの候補を表示するか（MinimumPrefixLength）、文字の検索方法（FilterMode）、最初に見つかった語句をテキストボックスに表示するか（IsTextCompletionEnabled）といったプロパティを設定します。

　詳しいプロパティやイベントに関してはMSDNの「AutoCompleteBoxクラス」を確認してください。

　このコードを実行すると、テキストボックスに2文字入力を行うと自動的に候補の一覧が表示され選択中のテキストがテキストボックスの右側に表示されるようになります（図2）。

［図2］ AutoCompleteBoxの実行結果