WPF button with drop down list and arrow

Question

Can someone suggest the best way to have a button with an arrow and dropdown list like in visual studio toolbar button new item. As you can find in VS the mouse hover is highlig

Answer 1

The solution is to make use a menu item and decorate it.

XAML Code:

<MenuItem Click="AddPresetButton_Click" x:Name="AddPresetButton">
    <MenuItem.Icon>
        <Image Source="/MyApp.Application;component/Resources/add.png" Height="20"/>
    </MenuItem.Icon>
    <MenuItem.Header>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="Add Preset"/>
            <Image Source="/MyApp.Application;component/Resources/arrow_down_simple.png"
                   Height="10" Margin="2,0,0,0"/>
        </StackPanel>
    </MenuItem.Header>
    <MenuItem.ContextMenu>
        <ContextMenu>
            <MenuItem Header="Add 1"/>
            <MenuItem Header="Add 2"/>
            <MenuItem Header="Add 3"/>
        </ContextMenu>
    </MenuItem.ContextMenu>
</MenuItem>

C# Code: When the menu is pressed the context menu is opened.

private void AddPresetButton_Click(object sender, RoutedEventArgs e)
{
    var addButton = sender as FrameworkElement;
    if (addButton != null)
    {
        addButton.ContextMenu.IsOpen = true;
    }
}

Answer 2

Check out the ComboBox control that comes packaged with a standard WPF application.

Answer 3

I would suggest to use WPF Tookit and its SplitButton control, its free

Answer 4

It looks like you have three problems to solve:

1. Styling / Layout
2. Highlight dropdown and button OnMouseOver
3. Change default button according to menu's last selection

Styling / Layout

Here are a couple of examples:

• http://dvoituron.wordpress.com/2011/01/06/toolbar-dropdownbutton-in-wpf/
• http://blogs.msdn.com/b/llobo/archive/2006/10/25/split-button-in-wpf.aspx

I am sure there are many other ways (e.g. using a plain button and ComboBox styled appropriately)

Highlighting dropdown and button OnMouseOver

Experiment with triggers; e.g:

• WPF Mouseover Trigger Effect for Child Controls
• WPF - How to change children's style on mouseover of parent

Change default button according to menu's last selection

Try the MVVM approach: The button element will be bound to a property on your ViewModel. Each menu item will call an action (ICommand) in your ViewModel. This ViewModel will know which menu item was called, and update the button's property on the ViewModel. The button will automatically update using data binding.