Create Menu Button with RadContextMenu and ToggleButton

In some scenarios you need to have a button that displays additional options upon clicking. This tutorial will show you how to achieve such drop-down button behavior using only a ToggleButton and a RadContextMenu. The two things you have to do are the following:

• Attach a RadContextMenu to the ToggleButton

• Bind the IsChecked property of the ToggleButton to the IsOpen property of the RadContextMenu

Here is the final code snippet.

XAML

	<ToggleButton Content="Click me"
	              HorizontalAlignment="Left"
	              IsChecked="{Binding IsOpen, ElementName=radContextMenu, Mode=TwoWay}">
	    <telerik:RadContextMenu.ContextMenu>
	        <telerik:RadContextMenu x:Name="radContextMenu" Placement="Bottom">
	            <telerik:RadMenuItem Header="Item 1" />
	            <telerik:RadMenuItem Header="Item 2" />
	            <telerik:RadMenuItem Header="Item 3" />
	        </telerik:RadContextMenu>
	    </telerik:RadContextMenu.ContextMenu>
	</ToggleButton>

The things you have to make attention to here are: how the RadContextMenu is attached to the ToggleButton and the ElementBinding applied to the ToggleButton's IsChecked property.

See Also

• Working with the RadContextMenu

• Placement

• Use RadContextMenu with a RadGridView

• Select the clicked Item of a RadTreeView

• Use Commands with the RadContextMenu

• Handle Item Clicks