この手順では、引き続き、手順 1 で作成した UWP アプリケーションに C1ColorPicker コントロールを追加します。既存の Rectangle コントロールのグラデーション塗りつぶしを制御するために、2 つの C1ColorPicker コントロールを追加します。

1. デザインビューで、四角形を選択し、Visual Studio ツールボックスに移動します。
2. ツールボックスで、C1ColorPicker アイコンを見つけて 2 回ダブルクリックし、四角形に 2 つの ColorPicker コントロールを追加します。
3. 追加した C1ColorPicker コントロールのサイズを変更し、それらを四角形の中央に配置します。
4. デザインビューで、最初の ColorPicker コントロール（C1ColorPicker1）をクリックし、［プロパティ］ウィンドウに移動して、そのプロパティを次のように設定します。
   • DropDownDirection プロパティを AboveorBelow に設定して、ColorPicker を開く方向を制御します。
   • Mode プロパティを Advanced に設定して、高度な色オプションを開きます。
   • SelectedColor プロパティを Black（"FF000000"）に設定します。
5. これらのプロパティを設定すると、XAML ビューは次のようになります。
   

   XAML	コードのコピー
   <Extended:C1ColorPicker x:Name="C1ColorPicker1" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="497,319,0,0" Width="125" Height="67" DropDownDirection="AboveOrBelow" Mode="Advanced"/>

6. 2 つめの ColorPicker コントロール（C1ColorPicker2）をクリックし、その SelectedColor プロパティを White に設定し、他のプロパティはデフォルトのままにします。ページのデザインビューは次のように表示されます。

これで、UWP アプリケーションのユーザーインタフェースの設計は完了です。しかし、アプリケーションを実行しても、出力ウィンドウに 2 つの C1ColorPicker コントロールが表示されるだけです。これらのコントロールで色を選択しても何も実行されません。次の手順では、追加した ColorPicker コントロールに機能を提供するためのコードをアプリケーションに追加します。