手順 1:アプリケーションの設定

この手順では、最初に Visual Studio で RangeSlider for WPF/Silverlight を使用する WPF/Silverlight アプリケーションを作成します。

次の手順に従います。

Visual Studio で、［ファイル］→［新しいプロジェクト］を選択します。
［新しいプロジェクト］ダイアログボックスの左ペインから言語を選択し、テンプレートリストから［アプリケーション］を選択します。
プロジェクトの名前（たとえば、「QuickStart」）を入力し、［OK］をクリックします。［新しい WPF/Silverlight アプリケーション］ダイアログボックスが表示されます。
［OK］をクリックしてデフォルト設定を受け入れ、［新しい WPF/Silverlight アプリケーション］ダイアログボックスを閉じると、プロジェクトが作成されます。
参照の追加ダイアログボックスで、以下のアセンブリを見つけて選択し、［OK］をクリックしてプロジェクトに参照を追加します。
- WPF: C1.WPF.4.dll
- Silverlight: C1.Silverlight.5.dll
デザインビューでは、グリッドにクリックします。
ツールボックスに移動し、［Rectangle］アイコンをダブルクリックして、Grid に標準コントロールを追加します。
［デザイン］ペインで、Rectangle1 のサイズを変更してグリッド全体に拡大します。

［XAML］ビューに切り替えて、Fill を <Rectangle> タグに追加します。次のようになります。

XAML	コードのコピー
<Rectangle Name="rectangle1" Stroke="Black"> <Rectangle.Fill> <RadialGradientBrush x:Name="colors"> <GradientStop x:Name="goldcol" Color="Gold" Offset="0" /> <GradientStop x:Name="blackcol" Color="Black" Offset="1" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle>

XAML

コードのコピー

<Rectangle Name="rectangle1" Stroke="Black">
    <Rectangle.Fill>
        <RadialGradientBrush x:Name="colors">
            <GradientStop x:Name="goldcol" Color="Gold" Offset="0" />
            <GradientStop x:Name="blackcol" Color="Black" Offset="1" />
        </RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

これで、黒と金色の放射状グラデーションが四角形に追加されます。

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

これで、WPF/Silverlight アプリケーションとカスタマイズした Rectangle コントロールが作成されました。次の手順では、C1RangeSlider コントロールを追加してカスタマイズします。