带有下拉列表和箭头的 WPF 按钮

WPF button with drop down list and arrow

提问by artos

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.

有人可以建议使用带有箭头和下拉列表的按钮的最佳方法，例如在 Visual Studio 工具栏按钮新项目中。正如您在 VS 中所发现的，鼠标悬停同时突出显示默认按钮和箭头按钮，从列表中选择一个项目后，默认按钮会根据您的选择而改变。

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>

回答by Demarsch

I would suggest to use WPF Tookitand its SplitButtoncontrol, its free

我建议使用WPF Tookit及其SplitButton控件，它是免费的

回答by Joe Sonderegger

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

解决方案是使用菜单项并对其进行装饰。

XAML Code:

XAML 代码：

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

C# 代码：按下菜单时会打开上下文菜单。

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

回答by JoelBellot

It looks like you have three problems to solve:

看起来您需要解决三个问题：

1. Styling / Layout
2. Highlight dropdown andbutton OnMouseOver
3. Change default button accordingto menu's last selection

1. 造型/布局
2. 突出显示下拉菜单和按钮 OnMouseOver
3. 根据菜单的最后选择更改默认按钮

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

• 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)

我确信还有很多其他方法（例如使用普通按钮和适当样式的 ComboBox）

Highlighting dropdown and button OnMouseOver

突出显示下拉菜单和按钮 OnMouseOver

Experiment with triggers; e.g:

试验触发器；例如：

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

• 子控件的 WPF 鼠标悬停触发效果
• WPF - 如何在父母鼠标悬停时改变孩子的风格

Change default button accordingto 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.

尝试 MVVM 方法：按钮元素将绑定到您的 ViewModel 上的属性。每个菜单项都会在您的 ViewModel 中调用一个操作 (ICommand)。此 ViewModel 将知道调用了哪个菜单项，并更新 ViewModel 上按钮的属性。该按钮将使用数据绑定自动更新。

回答by HandleThatError

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

查看随标准 WPF 应用程序打包的 ComboBox 控件。