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

本コンテンツは書籍「Silverlight 大全」と連動したサンプル コードです

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

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

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

XAML
スクリプトの編集|{#scriptcode_dlg.remove_script}
<Grid x:Name="LayoutRoot" Background="White"    <Slider Height="23" HorizontalAlignment="Left" Margin="30,20,0,0" Name="slider1" VerticalAlignment="Top" Width="200" /> 
</Grid>

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

横に長い棒の部分をトラックと呼び、値を変更させるためのつまみを Thumb と呼びます。

図 1

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

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

選択している値を取得するには、以下のプロパティを使用します。

Value:
選択している値が入ります。値を指定することもできます。

Slider コントロールは下記のプロパティを設定することにより、選択する値の範囲やクリックしたときの値の増減の変更を変えることができます。

Minimum:
選択範囲の最小値です。デフォルトの値は 0 です。
Maximum:
選択範囲の最大値です。デフォルトの値は 10 です。
SmallChange:
カーソル キーを使用して値を変化させるときの増減する値です。デフォルトの値は 0.1 です。
LargeChange:
トラックの部分をクリックして値を変化させるときの増減する値です。デフォルトの値は 1 です。

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

Background:
背景色です。グラデーションをかけたり、イメージを指定することで画像を背景として設定することもできます。
Orientation:
Vertical に変更すると、縦長の Silder になります。
Visibility:
表示と非表示を切り替えることができます。Visible を指定すると表示し、Collapsed を指定すると表示しなくなります。

値が変更されると、ValueChanged イベントが発生します。ValueChanged イベントに対応したイベント ハンドラーを作成するには、Visual Studio の XAML デザイナー上で、貼り付けている Slider をダブルクリックします。

以下のコードは、値が変更されたときに呼ばれるイベント ハンドラーで、その値を取得する例です。

Visual Basic
スクリプトの編集|{#scriptcode_dlg.remove_script}
Private Sub Slider1_ValueChanged(ByVal sender As System.ObjectByVal e As System.Windows.RoutedPropertyChangedEventArgs(Of System.Double)) Handles Slider1.ValueChanged 
    Dim atai As Double 
 
    ' atai という名前のフィールドに、Slider コントロールで指定している値を代入 
    atai = Slider1.Value 
End Sub
C#
スクリプトの編集|{#scriptcode_dlg.remove_script}
private void slider1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) 
{ 
    double atai; 
 
    // atai という名前のフィールドに、Slider コントロールで指定している値を代入 
    atai = slider1.Value; 
}

Code Recipe Code Recipe

ページのトップへ