带有菜单项和子菜单项的 Xceed splitbutton

Question

我试图在拆分按钮下有一个下拉菜单。其中一些 menuItems 应该有子菜单项。如果您想要一个示例，请单击 Firefox 中的书签按钮（右上角）。

我不能使用菜单，因为它总是水平放置。所以我选择了一个堆栈面板：

<Window x:Class="WpfApplication3.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
    Title="MainWindow" Height="350" Width="525">
<Grid>


    <xctk:SplitButton Content="SplitButton" BorderThickness="1" BorderBrush="Black" Margin="0,0,408,290">
        <xctk:SplitButton.DropDownContent>
            <StackPanel Width="161" HorizontalAlignment="Left">


                <MenuItem Header="MenuItem1" HorizontalAlignment="Left" Width="517">
                    <MenuItem.Items>
                        <MenuItem Header="submenuItem1"/>
                        <MenuItem Header="submenuItem2"/>                            
                    </MenuItem.Items>

                </MenuItem>
                <MenuItem Header="MenuItem2"/>
                <MenuItem Header="MenuItem3"/>

            </StackPanel>                   
        </xctk:SplitButton.DropDownContent>

    </xctk:SplitButton>
</Grid>

这里的问题是子菜单项不显示。他们甚至没有旁边的小箭头。您可以在没有 SplitButton 的情况下执行此操作，只需留下堆栈面板和其中的所有内容，您就会遇到同样的问题。我尝试将父菜单项放在其自己的标签中，但我希望子菜单项出现在其父项的右侧（就像 firefox 示例：假设您的 firefox 窗口未最大化，并且您已经允许足够的屏幕空间让项目出现）。

Answer 1

您使用MenuItem 控件的方式是错误的，它应该托管在Menu 控件或另一个MenuItem 中。

至于你的问题的解决方法，有两种。第一个是编写一个自定义控件，该控件重用ContextMenu 来承载菜单项，您将编写如下内容：

    <m:SplitButton Content="Split Button" Placement="Bottom">
        <MenuItem Header="MenuItem 1"/> 
        <MenuItem Header="MenuItem 2"> 
             <MenuItem Header="MenuItem 1"/> 
             <MenuItem Header="MenuItem 2"/> 
        </MenuItem>
    </m:SplitButton

http://www.codeproject.com/Articles/20612/A-WPF-SplitButton

第二种方法是在DropDownContent 中托管Menu 控件并重新设置所有内容的样式，会有很多xaml 标记。

Menu 控件将很容易重新设置样式，您唯一需要做的就是使用以下标记确保菜单项垂直而不是水平显示：

    <Style TargetType="Menu">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Vertical" IsItemsHost="True" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>

最难的部分是设置MenuItems 的样式，它们的样式基于Role 属性。它可以有四个可能的值：

1. TopLevelHeader : Menu 的直接子菜单项。
2. TopLevelItem : Menu 的直接子级，没有子菜单项。
3. SubmenuHeader : MenuItem 的直接子菜单项。
4. SubmenuItem : MenuItem 的直接子级，没有子菜单项。

问候