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

【问题标题】：WPF button with drop down list and arrow带有下拉列表和箭头的 WPF 按钮
【发布时间】：2013-07-18 06:15:47
【问题描述】：

有人可以建议最好的方法来使用带有箭头和下拉列表的按钮，就像在 Visual Studio 工具栏按钮新项目中一样。正如您在 VS 中发现的那样，鼠标悬停突出显示默认按钮和箭头按钮，从列表中选择项目后，默认按钮会根据您的选择进行更改。

这是一段显示下拉菜单的代码，但不是用于上述全部功能：

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

【问题讨论】：

我有类似的扩展器设置。它为您提供了很多开箱即用的外观和感觉。

标签： wpf button

【解决方案1】：

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

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# 代码： 当菜单被按下时，上下文菜单被打开。

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

【讨论】：

【解决方案2】：

看来你要解决三个问题：

样式/布局
突出显示下拉和按钮 OnMouseOver
更改默认按钮根据菜单的最后选择

样式/布局

这里有几个例子：

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

突出显示下拉和按钮 OnMouseOver

使用触发器进行实验；例如：

更改默认按钮根据菜单的最后选择

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

【讨论】：