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

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

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

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

XAML
<Grid x:Name="LayoutRoot" Background="White"    <TextBox Height="24" HorizontalAlignment="Left" Margin="30,20,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" /> 
</Grid> 
 

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

図 1

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

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

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

AcceptsReturn:
[Enter] キーを押したときに、改行を入力するかどうかを指定するプロパティです。True または False を指定します。
Background:
背景色です。グラデーションをかけたり、イメージを指定することで画像を背景として設定することもできます。
BorderBrush:
枠の色です。
BorderThickness:
枠の線の幅です。
FontFamily:
表示するときに使用するフォント名です。
FontSize:
フォントの大きさです。
FontStyle:
このプロパティを Italic に変更すると、斜体で表示されます。
Foreground:
文字の色です。グラデーションをかけたり、イメージを指定することで画像を背景として設定することもできます。
TextAlignment:
表示させるテキストを、左揃え、中央揃え、右揃えに設定できます。
TextWrapping:
複数行の表示を可能にします。Wrap に変更することにより、表示する文字列が横幅を超えたときに改行します。
Visibility:
表示と非表示を切り替えることができます。Visible を指定すると表示し、Collapsed を指定すると表示しなくなります。

以下は、Text プロパティに "ここに入力" と表示させ、コントロールの大きさや、FontSize、Foreground を変更した例です。

XAML
    <TextBox Height="40" HorizontalAlignment="Left" Margin="30,20,0,0" Name="textBox1" VerticalAlignment="Top" Width="240" AcceptsReturn="False" FontSize="24" Foreground="Green" Text="ここに入力" /> 
 

図 2

入力された文字列を取得するには、プログラム中で Text プロパティを参照します。

以下のコードは、その例です。

Visual Basic
Dim mojiretsu As String 
' string型の mojiretsu というフィールドに入力された文字を格納 
' TextBox1 は、Name プロパティで設定した名前 
mojiretsu = TextBox1.Text 
 
C#
string mojiretsu; 
// string型の mojiretsu というフィールドに入力された文字を格納 
// textBox1 は、Name プロパティで設定した名前 
mojiretsu = textBox1.Text; 
 

TextBox コントロールは、文字が入力されるごとに TextChanged というイベントを発生します。

Visual Studio の XAML デザイナー上で、貼り付けている TextBox コントロールをダブルクリックすると、イベント発生時に実行されるイベントハンドラーが生成します。

以下の例は、文字が入力されたら文字色を赤に変更するプログラムの例です。

Visual Basic
Private Sub TextBox1_TextChanged(ByVal sender As System.ObjectByVal e As System.Windows.Controls.TextChangedEventArgsHandles TextBox1.TextChanged 
    Dim mojishoku As New SolidColorBrush 
    mojishoku.Color = Colors.Red 
    TextBox1.Foreground = mojishoku 
End Sub 
 
C#
private void textBox1_TextChanged(object sender, TextChangedEventArgs e) 
{ 
    SolidColorBrush mojishoku = new SolidColorBrush(); 
    mojishoku.Color = Colors.Red; 
    textBox1.Foreground = mojishoku; 
} 
 

Code Recipe Code Recipe