Edit this page

DropDown Button

The RadDropDownButton control derives from the RadButton control. Therefore it has all of the features that the RadButton control has.

To learn more about the members of the RadDropDownButton class you can read here. To learn how to use it with commands you should read the Commands topic.

Instantiating RadDropDownButton

You can instantiate your RadDropDownButton in both XAML and code. Here is an example:

The RadDropDownButton control is located in the Telerik.Windows.Controls.dll and in order to use it in your project you have to add a reference to the assembly. You can find more info here.
Then in XAML you have to declare the namespace: xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

[XAML] Example 1: Defining a button in XAML

<telerik:RadDropDownButton Content="Click Me!" />

[C#] Example 2: Defining a button in code

RadDropDownButton radDropDownButton = new RadDropDownButton() { Content = "Click Me!" };

[VB.NET] Example 2: Defining a button in code

Dim radDropDownButton As New RadDropDownButton() With { _
    .Content = "Click Me!" _
}

Adding DropDown Content

In order to add content to the drop down area of the RadDropDownButton you have to use its DropDownContent property. It is of type object so you can add any control as content of the drop down. Here is an example of a ListBox inside a RadDropDownButton.

[XAML] Example 3: Adding content to the button

<telerik:RadDropDownButton AutoOpenDelay="0:0:0.0"
                           Content="Choose an Item">
    <telerik:RadDropDownButton.DropDownContent>
        <ListBox>
            <ListBoxItem Content="Item 1" />
            <ListBoxItem Content="Item 2" />
            <ListBoxItem Content="Item 3" />
        </ListBox>
    </telerik:RadDropDownButton.DropDownContent>
</telerik:RadDropDownButton>

If you want to display dynamic content inside the drop down area, you can use the DropDownContentTemplate and the DropDownContentTemplateSelector properties. You can read about TemplateSelectors in MSDN.

Auto Opening

You can allow the RadDropDownButton to automatically display its DropDownContent, when the mouse hovers over it. This behaviour is controlled via the AutoOpenDelay property of the RadDropDownButton, that specifies the time, after which you want to display the RadDropDownButton.DropDownContent. In order to disable the auto opening feature of the control, you have to set the AutoOpenDelay to "0". Here is an example:

[XAML] Example 4: Setting the AutoOpenDelay

<telerik:RadDropDownButton AutoOpenDelay="0:0:0.5" />

Customizing the RadDropDownButton

You can easily customize the RadDropDownButton by using the following properties:

  • CloseOnEscape - specifies whether the drop down should be closed when the ESC key gets pressed. The default value is True.

  • IsOpen - gets or sets whether the DropDownContent of the button is opened.

  • KeepOpen - gets or sets whether the DropDownContent should remain open while clicking outside it.

  • PopupPlacementTarget- gets/sets the placement for the popup element.

  • DropDownButtonPosition - specifies the position of the drop down arrow. The possible values are Bottom, Left, Right (default), Top.

  • DropDownHeight - specifies the height of the drop down area.

  • DropDownIndicatorVisibility - specifies whether the drop down arrow should be visible. The default value is Visible.

  • DropDownMaxHeight - specifies the maximal height of the drop down area.

  • DropDownMaxWidth - specifies the maximal width of the drop down area.

  • DropDownPlacement - specifies where the drop down area should be place - Absolute, Bottom, Center, Left, Right, Top.

  • DropDownWidth - specifies the width of the drop down area.

See Also