動作確認環境: Silverlight 4、Visual Studio 2010、Microsoft Silverlight 4 Tools for Visual Studio 2010、Windows 7

Silverlight を使用したアプリケーションで、文字を入力する際に入力候補を表示するユーザー インターフェイスに作成する場合は AutoCompleteBox コントロールを使用します。

ここでは、XAML を使用した実装方法を紹介します。Visual Studio を使用した場合は、ツール ボックスにあるコントロールをドラッグ アンド ドロップすることにより、コントロールを使用できます。XAML のコード中に記述されている各プロパティは、Visual Studio のプロパティ ウィンドウからも変更できます。

以下の XAML のコードは、AutoCompleteBox コントロールを Grid パネルの中で使用した例です。

XAML
<Grid x:Name="LayoutRoot" Background="White"    <sdk:AutoCompleteBox Height="28" HorizontalAlignment="Left" Margin="30,20,0,0" Name="autoCompleteBox1" VerticalAlignment="Top" Width="120" /> 
</Grid>     
 

Visual Studio の XAML デザイナー上でみると、このようになっています。

図 1

各コントロールのプロパティの説明です。

Height:
コントロールの見た目の高さです。
HorizontalAlignment:
パネル内のコントロールの水平方向の位置を、Left、Center、Right、Stretch で表します。ここでは Left が指定されているので、コントロールはパネル内で左寄せされて表示されます。ただし、Margin プロパティが設定されていたときは、その値の分のマージンが設定されます。
Margin:
4 つのパラメーターは、順に左側、上側、右側、下側のマージンを示します。マージンとは、その親となるパネルまたはグリッドの縁からの距離です。主に Grid パネルに貼り付けているときに使用します。
Name:
コントロールの名前です。Visual Basic や C# のコードから呼び出すときに、ここで設定した名前を使用します。
VerticalAlignmen:
パネル内のコントロールの垂直方向の位置を、Top、Center、Bottom、Stretch で表します。ここでは Top が指定されているので、コントロールはパネル内で上寄せされて表示されます。ただし、Margin プロパティが設定されていたときは、その値の分のマージンが設定されます。
Width:
コントロールの見た目の幅です。

これら以外にも、下記のプロパティを設定することにより、見た目を変更できます。ここでは、よく使用されるプロパティを紹介します。

BorderBrush:
枠の色です。
BorderThickness:
枠の線の幅です。
FontFamily:
表示するときに使用するフォント名です。
FontSize:
フォントの大きさです。
FontStyle:
このプロパティを Italic に変更すると、斜体で表示されます。
Foreground:
文字の色です。グラデーションをかけたり、イメージを指定することで画像を背景として設定することもできます。
Visibility:
表示と非表示を切り替えることができます。Visible を指定すると表示し、Collapsed を指定すると表示しなくなります。

文字が入力されたときの候補は、以下のように設定します。

Visual Basic
'入力候補の定義 
Dim itemList As New List(Of String) 
itemList.Add("abcdef") 
itemList.Add("abcddd") 
itemList.Add("abbbbb") 
itemList.Add("aaaaaa") 
 
'入力候補の登録 
AutoCompleteBox1.ItemsSource = itemList 
 
C#
// 入力候補の定義 
List<string> itemList = new List<string>(); 
itemList.Add("abcdef"); 
itemList.Add("abcddd"); 
itemList.Add("abbbbb"); 
itemList.Add("aaaaaa"); 
 
// 入力候補の登録 
autoCompleteBox1.ItemsSource = itemList; 
 

入力候補をサンプル コードのように設定すると、以下のように "abc" と入力したときに、abc で始まる入力候補のみが表示されます。

図 2


Code Recipe Code Recipe