In this step, you will continue by adding C1ColorPicker controls to the UWP application created in Step1. You will add two C1ColorPicker controls in order to control gradient fill in the existing Rectangle control.

1. In Design view, select the rectangle and navigate to the Visual Studio Toolbox.
   
2. In the Toolbox, locate and double-click C1ColorPicker icon twice to add two ColorPicker controls to the rectangle.
   
3. Resize the added C1ColorPicker controls and place them in the middle of the rectangle.
   
4. In Design view, click the first ColorPicker control, C1ColorPicker1, and navigate to the Properties window to set its properties as follows:
   • Set DropDownDirection property to AboveorBelow to control the direction in which the ColorPicker opens.
   • Set Mode property to Advanced to open advanced color options
   • Set SelectedColor property to Black or ("FF000000").
   
   
5. After setting these properties, the XAML view should appear similar to the follows:

   XAML	Copy Code
   <Extended:C1ColorPicker x:Name="C1ColorPicker1" HorizontalAlignment="Left" VerticalAlignment="Top" DropDownDirection="AboveOrBelow" Mode="Advanced" Margin="302,285,0,0" Width="275" SelectedColor="#000000" SelectedColorChanged="C1ColorPicker1_SelectedColorChanged" Height="85"/>

   
   
6. Click on the second ColorPicker control, C1ColorPicker2, and set its SelectedColor property to White, leaving other properties as default. The page's design view would appear as below.
   

With this, you have successfully designed the user interface for your UWP application. However, on running the application, you will only see two C1ColorPicker controls on the output window. These controls will not perform any function even if you select a color. In the next step, you will add code to your application to provide functionality to the added ColorPicker controls.