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

Question

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

25

有人可以建议如何创建一个带有箭头和下拉列表的按钮，就像在Visual Studio工具栏按钮新项目中一样。正如您可以在VS中找到的那样，鼠标悬停会突出显示默认按钮和箭头按钮，并在从列表中选择项目后更改默认按钮以符合您的选择。

enter image description here

这里是一段代码，它显示了下拉菜单，但不具备上述完整的功能：

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

- artos

1

我有一个类似的设置，使用扩展器。它可以为你提供很多开箱即用的外观和感觉。 - Nollaig

2个回答

7

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

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

样式/布局

以下是一些示例：

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

鼠标悬停时突出显示下拉框和按钮

尝试使用触发器; 例如：

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

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

- JoelBellot

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joe Sonderegger · Accepted Answer

解决方案是利用菜单项并对其进行装饰。 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;
    }
}