手順 2：コントロールの追加

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

次の手順に従います。

XAML ビューで、タグのすぐ下に次のマークアップを追加して、ページに StackPanel を追加します。

XAML	コードのコピー
<StackPanel Height="Auto" Width="Auto" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal"></StackPanel>

ツールボックスで、［アセット］ボタン（二重山かっこアイコン）をクリックして、［アセット］ダイアログボックスを開きます。
［アセットライブラリ］ダイアログボックスで、左ペインから［コントロール］項目を選択し、右ペインで［C1ColorPicker］アイコンをクリックします。

［C1ColorPicker］アイコンが、ツールボックスの［アセット］ボタンの下に表示されます。
<StackPanel></StackPanel> タグペアの内側をクリックし、C1ColorPicker アイコンをダブルクリックしてコントロールをパネルに追加します。

デザインビューで C1ColorPicker コントロールをクリックし、［プロパティ］ウィンドウに移動して、次のプロパティを設定します。

コード内でコントロールにアクセスできるように、［Name］を「c1cp1」に設定して名前を付けます。
［Width］を「65」に、［Height］を「50」に設定します。
［HorizontalAlignment］および［VerticalAlignment］を Center に設定して、コントロールをパネルの中央に配置します。
Left、Right、Top、Bottom、Margin の各プロパティを「5」に設定します。
DropDownDirection を AboveOrBelow に設定して、コントロールの開き方を制御します。
Mode を Advanced に設定して、詳細カラーピッカーのみを表示します。
SelectedColor を Black（または "#FF000000"）に設定します。

XAML は次のようになります。

XAML	コードのコピー
<c1:C1ColorPicker x:Name="c1cp1" Width="65" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5" DropDownDirection="AboveOrBelow"Mode="Advanced" SelectedColor="Black"/>

次の XAML を <c1:C1ColorPicker x:Name="c1cp1"/> タグの直後に追加して、２つめの C1ColorPicker コントロールを StackPanel に追加します。

XAML	コードのコピー
<c1:C1ColorPicker x:Name="c1cp2" Width="65" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5" DropDownDirection="BelowOrAbove" Mode="Both" SelectedColor="White"/>7re>

デフォルト値に設定されていた Mode、DropDownDirection などのプロパティが異なる値に設定されていることに注意してください。

XAML ビューで、<UserControl> タグの Width="640" Height="480" を Width="Auto" Height="Auto" に置き換えます。次のようになります。

XAML	コードのコピー
<UserControl xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml xmlns:c1=http://schemas.componentone.com/winfx/2006/xaml x:Class="C1ColorPicker.MainPage" Width="Auto" Height="Auto">

XAML

コードのコピー

<UserControl xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
xmlns:c1=http://schemas.componentone.com/winfx/2006/xaml
x:Class="C1ColorPicker.MainPage" Width="Auto" Height="Auto">

ページのデザインビューは次の図のようになります。

これで、アプリケーションのユーザーインターフェイスが正しくセットアップされましたが、ここでアプリケーションを起動して色を選択しても、カラーピッカーは何も実行しません。次の手順では、コントロールに機能を追加するコードをアプリケーションに追加します。