WPF SplitButton?

Viewed 27882

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.

8 Answers

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.

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.

enter image description here

<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;
        }
    }
}
Related