WPF button with drop down list and arrow

button, wpf

Solution

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

Problem

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> ```

Original source

Related problems