WPF按钮，带有下拉列表和箭头 [英] WPF button with drop down list and arrow

问题描述

有人可以建议使用带箭头和下拉列表的按钮的最佳方法吗，例如Visual Studio工具栏按钮中的新项.您可以在VS中找到，鼠标悬停会同时突出显示默认按钮和箭头按钮，并且从列表中选择一项之后，默认按钮会根据您的选择进行更改.

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>

推荐答案

解决方案是使用菜单项并进行装饰.

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

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#代码:按下菜单后，将打开上下文菜单.

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

这篇关于WPF按钮，带有下拉列表和箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！