この手順では、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> |
これで、白黒の直線グラデーションが四角形に追加されます。ページのデザインビューは、次の図のようになります。
これで、Silverlight アプリケーションとカスタマイズした Rectangle コントロールが作成されました。次の手順では、C1ColorPicker のコントロールを追加してカスタマイズします。