# Changing the Drop-Down Window Direction

## Content

By default, when the user clicks the C1ColorPicker control's drop-down arrow at run-time the color picker will appear below the control, and if that is not possible, above the control. However, you can customize where you would like the color picker to appear. For more information about the drop-down arrow direction, see [Drop-Down Direction](/componentone/docs/wpf/online-colorpicker5/working-with-colorpicker/DropDownDirection).
**At Design Time**
To change the drop-down window direction at run time, complete the following steps:

1. Click the **C1ColorPicker** control once to select it.
2. Navigate to the Properties window and click the [C1ColorPicker.DropDownDirection](/componentone/api/wpf/online-colorpicker5/dotnet-api/C1.WPF.ColorPicker/C1.WPF.ColorPicker.C1ColorPicker.DropDownDirection.html) drop-down arrow.
3. Choose an option, for example **ForceAbove**.

This will set the **C1ColorPicker.DropDownDirection** property to the option you chose.
**In XAML**
For example, change the drop-down window direction add DropDownDirection="ForceAbove" to the [c1:C1ColorPicker](c1:C1ColorPicker) tag so that it appears similar to the following:

```xml
<c1:C1ColorPicker Name="C1ColorPicker1" DropDownDirection="ForceAbove" Margin="296,98,273,0" Height="45" VerticalAlignment="Top" />
```

**In Code**
For example, to change the drop-down window direction, add the following code to your project:

```csharp
this.c1ColorPicker1.DropDownDirection = DropDownDirection.ForceAbove;
```

```vbnet
Me.C1ColorPicker1.DropDownDirection = DropDownDirection.ForceAbove
```

This will set the **DropDownDirection** property to **ForceAbove**.
Run the application and observe:
When you click the **C1ColorPicker** control's drop-down arrow, the drop down window will appear above the control:
![](https://cdn.mescius.io/document-site-files/images/cffeaa03-6a9f-4bf4-a1f4-c4c15266c18f/colorpicker_images/dropdowndirection.png)