Drop-Down Menu Button with Telerik ContextMenu for Silverlight

Sometimes, when a button is clicked we want to display a drop-down menu with options. This is handy interface, usually present in toolbars, but sometimes - as standalone buttons, like the Save As button in the the VS2008 Save As dialog. Sometimes the drop-down buttons consist of two parts – action and menu, and are called split buttons. In this post I will demonstrate how to achieve the drop-down menu button part. If you need a split button, just add another button and keep track of what was the last clicked menu item. Note, that with Q3 2009 we will add similar button to RadControls for Silverlight / WPF, that will display a popup when it is clicked and you will be able to put whatever you like inside that popup. In this case, however, I want to display a context menu upon the button click.

Initially, I created an attached behavior, which handled the button and context menu state changes, etc. It worked, but was complex and then I figured that the problem can be solved with a simple binding. Here is the final piece of code:

<ToggleButton Content="Click me" HorizontalAlignment="Left" 

 IsChecked="{Binding IsOpen, ElementName=context, Mode=TwoWay}"> <telerikNavigation:RadContextMenu.ContextMenu> <telerikNavigation:RadContextMenu x:Name="context" Placement="Bottom" ItemClick="RadContextMenu_ItemClick"> <telerikNavigation:RadMenuItem Header="Item 1" /> <telerikNavigation:RadMenuItem Header="Item 2" /> <telerikNavigation:RadMenuItem Header="Item 3" /> </telerikNavigation:RadContextMenu> </telerikNavigation:RadContextMenu.ContextMenu> </ToggleButton>

There is one important thing that deserves to be noted - by default, RadContextMenu is displayed next to the mouse cursor. To display the menu below the button I had to set the Placement property of RadContextMenu to Bottom. You could use Top, Left or Right, depending on your preferences. RadContextMenu will automatically detect the window boundaries and will adjust its position if there isn’t enough space at the desired placement.

The final result is this:

You can download the sample application from here:

Thank you for reading, I hope this helps.