Data binding the SplitButton’s ContextMenu

Someone recently posted an article to CodeProject which provides a pretty nice implementation of a “split button.” WPF does not have a built-in split button, so this is a solid addition to the standard control library. The original article can be found here.

The author of SplitButton allows you, the developer, to easily populate its ContextMenu by adding child MenuItem elements to the SplitButton in XAML. That looks something like so:

Bound SplitButton (manual)

Using this “manual” approach is fine for many scenarios, but won’t help in others. It is not unusual to populate a menu with items that come from an XML file; like a config file just for that menu. This blog post shows how to bind the SplitButton’s dropdown menu to some XML data.

Here is the XML data we will use to populate the SplitButton’s menu:

Bound SplitButton (xml)

Eventually we want the SplitButton’s menu to look like this:

Bound SplitButton (screenshot)

We can accomplish this by configuring the SplitButton’s ContextMenu to use the XML data as a source for generating its items. This works because SplitButtons uses its ContextMenu as the dropdown shown when you click on the “dropdown button.” Here is the complete declaration of our bound SplitButton:

Bound SplitButton (button declaration)

The SplitButton’s ContextMenu is configured in four ways.

  1. Its ItemsSource is bound to the XML data seen previously. This means that the MenuItems will be created automatically based on the XML data to which it is bound.
  2. The routed Click event of MenuItem is handled by the ContextMenu, so that when the user clicks on any of its MenuItems the same OnXmlMenuItemClick handler in the code-behind will be called.
  3. Its ItemContainerStyle is set to a Style which assigns the command’s ID to the Tag of the MenuItem. The “command” in this sense represents whatever action should occur when the item is clicked, and its ID is used in the code-behind to figure out what to do when an item is clicked.
  4. Its ItemTemplate is set to a DataTemplate which displays the command’s title. This is what you see when you look at a menu item in the dropdown.

The method in the Window’s code-behind, which executes when an item in the SplitButton’s ContextMenu is clicked, is defined like this:

Bound SplitButton (handler)

Download the demo app here: Bound SplitButton (demo project) Be sure to change the file extension from .DOC to .ZIP and then decompress it.  NOTE: This demo project, which I took from the CodeProject article, was built using a beta of Visual Studio 2008.  All modifications were made to the Window1.xaml and Window1.xaml.cs files in the Demo project.

4 Responses to Data binding the SplitButton’s ContextMenu

  1. Stefan Olson says:

    Josh,

    I want to add an icon to the menu item, so I added this:

    Which results in a XamlParseException when I run:
    Value cannot be null.
    Parameter name: name Error at object ‘System.Windows.Controls.Image’ in markup file ‘SplitButton;component/window1.xaml’ Line 46 Position 34.

    Have I missed something obvious??

    …Stefan

  2. Stefan Olson says:

    Ok, so it lost my markup, so try again, w/o tags:
    Setter Property=”Icon”
    Setter.Value
    Image Source=”C:\test.png”/

    /Setter.Value

    /Setter

  3. Pavel says:

    Is there any way to assign click handler not via MenuItem.Click, but rather using command mechanism? I’m using your snippet in a datatemplate and cannot directly assign click event handlers.

  4. Huy says:

    This is my version of this control (http://huydinhpham.blogspot.com/2008/09/wpf-drop-down-and-split-button.html).
    Thank you Josh, keep up the good work.

%d bloggers like this: