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

Silverlight を使用したアプリケーションで、数値を変更するユーザー インターフェイスに作成する場合は NumericUpDown コントロールを使用します。

ここでは、XAML を使用した実装方法を紹介します。Visual Studio を使用した場合は、ツール ボックスにあるコントロールをドラッグ アンド ドロップすることにより、コントロールを使用できます。ツール ボックスに NumericUpDown コントロールが表示されていないときは、ツール ボックス上で右クリックして [アイテムの選択] を選び、[Silverlight コンポーネント] タブにある NumericUpDown にチェックを入れてください。XAML のコード中に記述されている各プロパティは、Visual Studio のプロパティ ウィンドウからも変更できます。

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

XAML
<Grid x:Name="LayoutRoot" Background="White"    <toolkit:NumericUpDown Height="22" HorizontalAlignment="Left" Margin="30,20,0,0" Name="numericUpDown1" VerticalAlignment="Top" /> 
</Grid> 
 

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

図 1

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

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

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

数値の上限や下限、増加する数値の量を決めるには、下記の各プロパティを使用します。

Maximum:
入力できる数値の最大値です。
Minimum:
入力できる数値の最小値です。
Increment:
1 度に変化する数値です。

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

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

NumericUpDown コントロールは、数値が変更されるごとに ValueChanged というイベントを発生します。

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

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

 

Visual Basic
Private Sub NumericUpDown1_ValueChanged(ByVal sender As System.ObjectByVal e As System.Windows.RoutedPropertyChangedEventArgs(Of System.Double)) Handles NumericUpDown1.ValueChanged 
    Dim mojishoku As New SolidColorBrush 
    mojishoku.Color = Colors.Red 
    NumericUpDown1.Foreground = mojishoku 
End Sub 
 
C#
private void numericUpDown1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) 
{ 
    SolidColorBrush mojishoku = new SolidColorBrush(); 
    mojishoku.Color = Colors.Red; 
    numericUpDown1.Foreground = mojishoku; 
} 
 

Code Recipe Code Recipe