CodeZine(コードジン)

特集ページ一覧

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

Silverlight 3徹底入門(2)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

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の実行結果
[図2] AutoCompleteBoxの実行結果

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Silverlight 3徹底入門

もっと読む

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト かるあ (杉山 洋一)(カルア(スギヤマ ヨウイチ))

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5