By default, C1ColorPicker appears below the control when the user clicks the drop-down arrow at runtime. However, users can change the direction in which the control appears at runtime simply by making some simple changes either at Design-time, in XAML or in the code.

At Design Time

To change the drop-down window direction at design time:

1. Select the C1ColorPicker by clicking it once in Design view.
2. Navigate to the Properties window and locate the DropDownDirection property.
3. Click the drop-down arrow alongside the DropDownDirection property and select any option, for instance ForceAbove.

This will set the DropDownDirection property of ColorPicker control as per your selection.

In XAML

Change the drop-down window direction in XAML by adding DropDownDirection="ForceAbove" to the <Extended:C1ColorPicker> tag. The XAML view should appear similar to the following:

<Extended:C1ColorPicker x:Name="C1ColorPicker1" HorizontalAlignment="Left" VerticalAlignment="Top"
 Margin="147,553,0,0" Height="77" DropDownDirection="ForceAbove"/>

In Code

Through code, you can customize the direction in which the drop-down window should appear by adding the following code below the constructor.

Me.C1ColorPicker1.DropDownDirection = DropDownDirection.ForceAbove

this.C1ColorPicker2.DropDownDirection = DropDownDirection.ForceAbove;

Run the application. Observe that on clicking the C1ColorPicker's drop-down arrow, the drop-down appears above the C1ColorPicker control similar to the following image.