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 highlighting both default button and arrow button and after selecting an item from list the default button is changing according your selection.

Here is a piece of code which is showing drop down menu, but not for full functionality described above:

<StackPanel Orientation="Horizontal">
    <Border CornerRadius="0" BorderBrush="Black" BorderThickness="1">
        <Button Name="CreateButton" Click="CreateButton_Click"  Background="Transparent" BorderBrush="{x:Null}">
            <Image Source="/OMS.Resources;component/Resources/Images/LibraryImages/add1.png" />
            <Button.ContextMenu>
                <ContextMenu HorizontalAlignment="Right">
                    <MenuItem Header=" doc" Click="CreateDocButton_Click">
                        <MenuItem.Icon>
                            <Image Source="/OMS.Resources;component/Resources/Images/LibraryImages/add_sheet.png" Width="24" Height="24" />
                        </MenuItem.Icon>
                    </MenuItem>
                    <MenuItem Header=" xls" Click="CreateXlsButton_Click">
                        <MenuItem.Icon>
                            <Image Source="/OMS.Resources;component/Resources/Images/LibraryImages/add_sheet.png" Width="24" Height="24" />
                        </MenuItem.Icon>
                    </MenuItem>
                    <MenuItem Header=" txt" Click="CreateTxtButton_Click">
                        <MenuItem.Icon>
                            <Image Source="/OMS.Resources;component/Resources/Images/LibraryImages/add_sheet.png" Width="24" Height="24" />
                        </MenuItem.Icon>
                    </MenuItem>
                </ContextMenu>
            </Button.ContextMenu>
        </Button>
    </Border>
    <Border CornerRadius="0" BorderBrush="Black" BorderThickness="1">
        <Button HorizontalAlignment="Left" VerticalAlignment="Stretch"  Background="Transparent" BorderBrush="{x:Null}"
        ContextMenuService.IsEnabled="False" Click="AddButtonContextMenu_Click">
            <Image Source="/OMS.Resources;component/Resources/Images/LibraryImages/arrow_down.png" VerticalAlignment="Center" Width="9" />
        </Button>
    </Border>
</StackPanel>

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

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.