Split Button

The RadSplitButton control inherits from the ContentControl control and implements the ICommandSource interface. The ICommandSource implementation allows you to attach commands to the button, that will be executed when the button is clicked.

To learn more about the members of the RadSplitButton class you can read here.

You can see how to use an ICommand with a button in the Commands topic.

Basically the RadSplitButton is a UI combination of the RadButton and the RadDropDownButton. The RadButton element represents the ButtonPart of the RadSplitButton, while the RadDropDownButton represents the drop down part. The first one can also behave as a toggle button.

Instantiating RadSplitButton

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

The RadSplitButton 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"

Example 1: Defining a button in XAML

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

Example 2: Defining a button in code

RadSplitButton radSplitButton = new RadSplitButton() { Content = "Click Me!" }; 
Dim radSplitButton As New RadSplitButton() With { _ 
    .Content = "Click Me!" _ 

Figure 1: The created split button

The created split button

Adding DropDown Content

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

Example 3: Adding content to the drop down of the button

<telerik:RadSplitButton AutoOpenDelay="0:0:0.0" 
                        Content="Click or Choose an Item"> 
            <ListBoxItem Content="Item 1" /> 
            <ListBoxItem Content="Item 2" /> 
            <ListBoxItem Content="Item 3" /> 

If you want to display dynamic content inside the drop down area, you can use the DropDownContentTemplate and the DropDownContentTemplateSelector properties. To learn more about TemplateSelectors you can read the Data Templating Overview MSDN article.

Figure 2: RadSplitButton with dropdown content

RadSplitButton with dropdown content

Toggling the RadSplitButton

The functional part of the RadSplitButton is represented by a RadButton. This part handles the click event of the RadSplitButton and it can behave as a toggle button. In order to take advantage of this feature you just have to set the RadSplitButton.IsToggle property to True.

Example 4: Manually toggling the button

<telerik:RadSplitButton IsToggle="True" /> 

Figure 3: RadSplitButton as toggle button

RadSplitButton as toggle button

Auto Opening

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

Example 5: Setting the AutoOpenDelay property

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

Customizing the RadSplitButton

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

  • ButtonPartStyle - gets/sets the style of the RadButton that represents the ButtonPart of the RadSplitButton.

  • CornerRadius - this property is of type CornerRadius and it controls the CornerRadius of the RadSplitButton control.

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

  • 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 placed - Absolute, Bottom, Center, Left, Right, Top.

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

  • IsBackgroundVisible - this property is of type bool and it controls the visibility of the background and the border of the RadSplitButton control in normal state.

  • IsButtonPartVisible - gets/sets whether the button part is visible.

  • IsChecked - get/sets the checked state of the button when its ButtonPart behaves like a ToggleButton.

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

  • ToggleCornerRadius - gets/sets the CornerRadius of the RadSplitButton.ButtonPart when it behaves like a ToggleButton.

  • TogglePartStyle - gets/sets the style of the RadToggleButton that represents the ButtonPart of the RadSplitButton, when it behaves like a ToggleButton.

Example 6: Customizing RadSplitButton

<telerik:RadSplitButton DropDownButtonPosition="Bottom"  
                        Content="Click or Choose an Item"  
                        DropDownWidth="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"> 
            <ListBoxItem Content="Item 1" /> 
            <ListBoxItem Content="Item 2" /> 
            <ListBoxItem Content="Item 3" /> 

Figure 4: Customized RadSplitButton

Customized RadSplitButton

See Also

In this article
Not finding the help you need? Improve this article