手順 1：アプリケーションの作成

この手順では、Expression Blend で ColorPicker for Silverlight を使って Silverlight アプリケーションを作成します。C1ColorPicker コントロールをアプリケーションに追加すると、完全な機能を備えた色入力セレクタとして使用できます。プロジェクトをセットアップし、C1ColorPicker コントロールをアプリケーションに追加するには、次の手順に従います。

Expression Blend で、［ファイル］→［新しいプロジェクト］を選択します。
［新しいプロジェクト］ダイアログボックスで、左ペインからプロジェクトの種類として［Silverlight］を選択し、右ペインから ［Silverlight アプリケーション + Web サイト］を選択します。プロジェクトの［名前］と［場所］を入力し、ドロップダウンボックスで［言語］を選択し、［OK］をクリックします。新しいアプリケーションが作成され、MainPage.xaml ファイルがデザインビューで開きます。
［プロジェクト］ウィンドウに移動し、プロジェクトファイルリストで［参照］ フォルダを右クリックします。［参照の追加］ ダイアログボックスで ［参照の追加］を選択し、C1.Silverlight.dll アセンブリと C1.Silverlight.Extended.dll アセンブリを見つけて選択し、［開く］をクリックします。ダイアログボックスが閉じ、プロジェクトに参照が追加されます。
UserControl のデザイン領域をクリックして選択します。Visual Studio とは異なり Blend では、次の手順に示すように、Silverlight コントロールを直接デザインサーフェスに追加できます。
ツールボックスに移動し、［Rectangle］アイコンをダブルクリックして、Grid に標準コントロールを追加します。
<Rectangle> タグに x:Name="rc1" Width="Auto" Height="Auto" を追加します。次のようになります。
<Rectangle x:Name="rc1" Width="Auto" Height="Auto"></Rectangle>

これで、四角形が Grid 全体に拡大されます。

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

XAML	コードのコピー
<Rectangle x:Name="rc1" Height="Auto" Width="Auto"> <Rectangle.Fill> <LinearGradientBrush x:Name="colors"> <GradientStop x:Name="col1" Color="Black" Offset="0" /> <GradientStop x:Name="col2" Color="White" Offset="1" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>

XAML

コードのコピー

<Rectangle x:Name="rc1" Height="Auto" Width="Auto">
    <Rectangle.Fill>
        <LinearGradientBrush x:Name="colors">
            <GradientStop x:Name="col1" Color="Black" Offset="0" />
            <GradientStop x:Name="col2" Color="White" Offset="1" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

これで、白黒の直線グラデーションが四角形に追加されます。ページのデザインビューは、次の図のようになります。

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