WPF SplitButton?

Question

I've just spent a very frustrating afternoon trawling Google looking for a commercial-grade WPF SplitButton control that will work in a ToolBar. A SplitButton is one where you can click on the main part of the Button to take a default action, or click on a little triangle on the right to get a drop-down menu of alternate actions).

I found several on the web (including the one on CodeProject, and including the two on CodePlex). None of them work properly in a ToolBar--they either don't appear at all, or they don't have toolbar button styling. I even looked at some commercial offerings, like ActiPro's pop-up button (in their SharedLibrary DLL). Same problems.

And yes, I've seen all the posts about how easy it is to create one. It's very easy to create a bad one, but not so easy to create one that looks and works like the SplitButtons in Outlook or Visual Studio, where the drop-down menu doesn't disappear if you release the mouse button.

So, here's my question: Are there any commercial-grade SplitButtons out there, either open-source or commercial, that work in toolbars? I'm not looking for a control that is part of a $1,500 annual subscription to somebody's controls library, but if there is a reasonably-priced SplitButton, I'd sure like to find it.

Answer 1

The only true "commercial-grade" split button that I know of is the one by Syncfusion, which is included as part of their ribbon controls (although it works outside of the ribbon as well).

That being said, I remember this implementation as being fairly usable and complete, if you're looking for something free.

Answer 2

Another good free implementation that seem to have it all:

http://huydinhpham.blogspot.com/2008/09/wpf-drop-down-and-split-button.html

• The split button can be used in the toolbar and has a proper toolbar style. It can also be restyled if you want.
• Dropdown menu is exposed via its own property - i.e splitbutton can have it's own context menu separate from the dropdown one (even though it seems illogical it can be useful in some cases - like toolbar context menu that pops up when you right click on a button placed in the toolbar).
• The dropdown menu is standard ContextMenu - i.e. content can be databound, menu items restyled etc.
• Both the main and the dropdown parts of the split button have command properties associated with them.

Answer 3

The Extended WPF Toolkit Community Edition (which is free) has a nice SplitButton (and it has a DropDownButton as well)

<xctk:SplitButton Content="Click Me">
    <xctk:SplitButton.DropDownContent>
        <xctk:ColorCanvas />
    </xctk:SplitButton.DropDownContent>
 </xctk:SplitButton>

Answer 4

I don't know what exactly you are looking for in a split button, but this video on how to create one is pretty complete and makes a splitbutton that is just about perfect.

http://windowsclient.net/learn/video.aspx?v=3929

I know you didn't want a tutorial, but I've used this before and you couldn't tell the difference between it and the ones in outlook.

Answer 5

There is a pretty good split button implementation for WPF and Silverlight over Delay's blog:

Banana SplitButton (A WPF-specific fix for SplitButton and some code analysis improvements for the Silverlight version, too)

Answer 6

I think what you mean is called a DropDownButton. There is a boolean property on MenuItem "StaysOpenOnClick" which could solve your problem.

Answer 7

I was looking for the same and just rolled my own (you will need to style to your liking (to match the ToolBar) and you could refactor it / convert it into a custom control ... etc.)

<StackPanel x:Name="Split" Orientation="Horizontal">
    <Button Command="{Binding MainCommand}">
        <StackPanel>
            <Image Source="{StaticResource MainCommandImage}"/>
            <TextBlock>MainCommand</TextBlock>
        </StackPanel>
    </Button>
    <Separator HorizontalAlignment="Left" Width="1" VerticalAlignment="Stretch" Margin="0,5"/>
    <CheckBox Width="16" IsThreeState="False">
        <Grid>
            <Path Fill="Black" Data="{StaticResource DownArrowGeometry}"
                  Stretch="Uniform" Height="6" Width="6" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Popup x:Name="popupOptions" AllowsTransparency="True" PopupAnimation="Fade" StaysOpen="False" 
                   Placement="Bottom" PlacementTarget="{Binding ElementName=Split}" HorizontalOffset="-3"
                   IsOpen="{Binding RelativeSource={RelativeSource AncestorType={x:Type CheckBox}, AncestorLevel=1}, Path=IsChecked}">
                <StackPanel>
                    <StackPanel>
                        <Image Source="{StaticResource SubCommandImage1}"/>
                        <TextBlock>SubCommand1</TextBlock>
                     </StackPanel>
                    <StackPanel>
                        <Image Source="{StaticResource SubCommandImage2}"/>
                        <TextBlock>SubCommand2</TextBlock>
                     </StackPanel>
                </StackPanel>
            </Popup>
        </Grid>
    </CheckBox>
</StackPanel>

Answer 8

Using the WPF Toolkit split button to show a context menu is reasonably straight forward. Add a context menu in your window resources. On the window load - bind the context menu to the split button and then use the context menu as you would do normally.

It really needs to be added in the WPF Toolkit as the majority use case for this button is to replicate the old WinForm Splitt button.

<Window x:Class="SplitButtonTesting.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <ContextMenu x:Key="contextMenu" IsOpen="{Binding IsOpen}">
        <MenuItem Header="One" />
        <MenuItem Header="Two" />
        <MenuItem Header="More...">
            <MenuItem Header="One" />
            <MenuItem Header="Two" />
        </MenuItem>
    </ContextMenu>
</Window.Resources>
<DockPanel>

    <Menu DockPanel.Dock="Top" x:Name="ApplicationMenu">

        <xctk:SplitButton x:Name="SplitButton" Content="Main Button" DropDownContent="{x:Null}" />

    </Menu>
    <Border />

</DockPanel>

Code behind:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;

namespace SplitButtonTesting
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            SetupSplitButton();
        }

        public void SetupSplitButton()
       {
           var menu = this.Resources["contextMenu"] as ContextMenu;

           menu.PlacementTarget = SplitButton;

            menu.Placement = PlacementMode.Bottom;
            menu.DataContext = SplitButton;
        }
    }
}