前の手順では、新しい WPF/Silverlight プロジェクトを作成し、アプリケーションにグラデーション付きの Rectangle コントロールを１つ追加しました。この手順では、引き続き、Rectangle のグラデーションを制御する C1RangeSlider コントロールを追加します。

次の手順に従います。

1. プロジェクトの XAML ウィンドウで、カーソルを </Rectangle> タグと </Grid> タグの間に置き、１回クリックします。

2. ツールボックスに移動し、［C1RangeSlider］アイコンをダブルクリックして、アプリケーション内の Rectangle の上にコントロールを追加します。

3. x:Name="c1rs1" を <c1:C1RangeSlider> タグに追加して、コントロールに名前を付けます。次のようになります。

   XAML	コードのコピー
   <c1:C1RangeSlider x:Name="c1rs1">

   それに一意の識別子を付けると、コードでそのコントロールにアクセスできるようになります。

4. <c1:C1RangeSlider> タグに Margin="50" を追加してマージンを追加します。次のようになります。

   XAML	コードのコピー
   <c1:C1RangeSlider x:Name="c1rs1" Margin="50">

   これで、各辺がグリッドの境界から同じ距離に設定されます。

5. <c1:C1RangeSlider> タグに Orientation="Vertical" を追加して、Orientation プロパティを Vertical に設定します。次のようになります。

   Example Title	コードのコピー
   <c1:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical">

   デフォルトでは、Orientation が Horizontal に設定されているため、コントロールが水平方向に表示されます。

6. <c1:C1RangeSlider> タグに UpperValue="1" を追加して、UpperValue プロパティを１に設定します。次のようになります。

   XAML	コードのコピー
   <c1:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical" UpperValue="1">

   これで、上のサムは１から始まります。

7. <c1:C1RangeSlider> タグに Maximum="1" を追加して、Maximum プロパティを１に設定します。次のようになります。

   XAML	コードのコピー
   <c1:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical" UpperValue="1" Maximum="1">

   これで、ユーザーは１より大きい値を選択できなくなります。

8. <c1:C1RangeSlider> タグに ValueChange="0.1" を追加して、ValueChange プロパティを 0.1 に設定します。次のようになります。

   XAML	コードのコピー
   <c1:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical" UpperValue="1" Maximum="1" ValueChange="0.1">

   これで、実行時にスライダをクリックすると、サムが 0.1 単位で移動します。

9. <c1:C1RangeSlider> タグに Opacity="0.8" を追加して、Opacity プロパティを「0.8」に設定します。次のようになります。:

   Example Title	コードのコピー
   <c1:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical" UpperValue="1" Maximum="1" ValueChange="0.1" Opacity="0.8">

   デフォルトで、このプロパティは１に設定されているため、コントロールは完全に不透明になります。これを小さい数値に変更すると、コントロールは少し透明になります。

10. <c1:C1RangeSlider> タグに LowerValueChanged="c1rs1_LowerValueChanged" UpperValueChanged="c1rs1_UpperValueChanged" を追加してイベントハンドラを指定します。次のようになります。

    XAML	コードのコピー
    <c1:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical" UpperValue="1" Maximum="1" ValueChange="0.1" Opacity="0.8" LowerValueChanged="c1rs1_LowerValueChanged" UpperValueChanged="c1rs1_UpperValueChanged">

    これらのイベントハンドラのコードは、この後の手順で追加します。

11. ここでアプリケーションを実行し、コントロールが次の図のように表示されていることを確認します。

    

アプリケーションのユーザーインターフェイスを設定しましたが、今はスライダを移動しても何も行われません。次の手順では、機能を追加するコードをアプリケーションに追加します。