Introduction
As the Windows Presentation Foundation (WPF) does not have a split button built-in, I decided to have a go at writing one. As I am fairly new to this Framework, I wanted something simple to start with, and this is what I came up with.
Although it would be possible to create a split button using Styles and Control Templates, I wanted to support the Windows Themes so a custom control seemed like the way to go.
The Control derives from System.Windows.Controls.Button.
Using the Code
To add a split button to a window, reference the assembly, then add an XML namespace to the Windows XAML file as shown below:
xmlns:m="clr-namespace:Wpf.Controls;assembly=Wpf.SplitButton"
The XAML below adds a split button to a window and shows how to add MenuItems that will be displayed by the context menu:
<m:SplitButton Content="Split Button" Placement="Bottom">
<MenuItem Header="MenuItem 1"/>
<MenuItem Header="MenuItem 2">
<MenuItem Header="MenuItem 1"/>
<MenuItem Header="MenuItem 2"/>
</MenuItem>
</m:SplitButton
The control assembly has a style defined for each of the Windows themes. To draw the control, I've used the ButtonChrome classes from the PresentationFramework DLLs.
The demo project has copies of these styles in the DemoStyles folder so that I could display each theme in the demo window using the x:Key attribute.
I've also added a Style that looks like a Button in Windows Explorer running on Windows Vista. To use this style, you have to set the Style property of the SplitButton explicitly using the following syntax:
Style="{DynamicResource {x:Static m:SplitButtonResources.VistaSplitButtonStyleKey}}"
Vista Styled Button with an Icon
Points of Interest
As shown above, the Button includes an Icon property.
To place the context menu, use the Placement, PlacementRectangle, HorizontalOffset and VerticalOffset properties. These are dependency properties defined by the ContextMenuService class, using the AddOwner method. I've added callbacks to each of these properties where I can set the equivalent property on the base Button's internal context menu.
The Button has two modes as defined by the Mode property, Split, which is the default and Dropdown. In Split mode, the control has two parts, the Button part which acts just like a normal button firing the Click event, and a dropdown button which displays the context menu when clicked. In Dropdown mode, clicking anywhere on the button displays the context menu.
Issues
This control was developed using the Beta2 release of Visual Studio 2008. Unfortunately the demo project does not display in the cider designer (for me anyway). This may be a bug in Visual Studio as it displays fine in Expression Blend and compiles and runs without problems.
History
24-Sept-2007: Article posted
02-Oct-2007: Article updated
- As was discussed in the
Icon Thread in the comments below, I've removed the Icon property from the SplitButton as it simply wasn't needed. The demo now includes the preferred method of adding an icon to the button as described by Josh.
09-Oct-2007: Article updated
- Fixed the error in the demo
20-Oct-2007: Article updated
