如何为 WPF 中的菜单项正确创建子菜单

Question

我目前正在尝试在 WPF/XAML 中设置 MenuItem 对象的样式，但我不知道如何为 MenuItem 输出子菜单。需要明确的是，这就是我所追求的：

这就是我目前的 MenuItem 样式：

<Style TargetType="{x:Type MenuItem}">
    <Setter Property="Background" Value="{StaticResource GridLightColour}"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="FontSize" Value="15"/>
    <Setter Property="FontFamily" Value="{StaticResource Exo2Light}"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="ScrollViewer.PanningMode" Value="Both"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type MenuItem}">
                <Grid SnapsToDevicePixels="true">
                    <DockPanel>
                        <Border x:Name="ContentBorder" BorderThickness="1" BorderBrush="{StaticResource GridLightColour}" Background="{StaticResource GridLightColour}">
                            <ContentPresenter x:Name="Content" ContentSource="Header" Margin="7,0,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Border>
                    </DockPanel>
                    <Popup x:Name="Popup" AllowsTransparency="true" Focusable="false" HorizontalOffset="0" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom" VerticalOffset="-1">
                        <Border BorderThickness="0" BorderBrush="{StaticResource ButtonColour}" Background="{StaticResource GridLightColour}">
                            <ScrollViewer x:Name="SubMenuScrollViewer" CanContentScroll="true" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
                                <Grid RenderOptions.ClearTypeHint="Enabled">
                                    <ItemsPresenter x:Name="ItemsPresenter" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="true" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
                                </Grid>
                            </ScrollViewer>
                        </Border>
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="{StaticResource MenuButtonMouseOverColour}" TargetName="ContentBorder"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Foreground" Value="{StaticResource ButtonMouseOverColour}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

最好的方法是什么？

Answer 1

除非您是 XAML 忍者，否则使用任何模板的最佳方法是从提取默认模板开始。

因为当你开始做这类事情时，完全打破控制是非常非常容易的。模板完全取代了构成您控制的所有内容。尤其要非常小心，确保完成后任何 contentpresenter 或命名部分仍在其中。

一步一步：

将所需类型的控件（菜单项）添加到视图中。

选择它。

在属性窗口中找到杂项组。

向下滚动到模板。

点击右边的小方框。

选择转换为新资源。

你会发现你需要为一些模板添加对东西的引用。

无论如何，确保它有效。

您现在开始使用一个工作模板（而不是一个损坏的模板）。

做一个小改动并测试一下。

重复。

一步一步地满足您的要求。

还有。

与其在代码中定义菜单项，不如从绑定的分层集合中将它们模板化。

Answer 2

默认的MenuItem已经默认处理了这种嵌套。无需重写控件的模板即可。

<DockPanel>
    <Menu DockPanel.Dock="Top">
        <MenuItem Header="File">
            <MenuItem Header="Open">
                <MenuItem Header="aaaaaaa" />
                <MenuItem Header="bbbbbbbb" />
                <MenuItem Header="ccccc" />
            </MenuItem>
            <MenuItem Header="Close" />
            <MenuItem Header="quit" />
        </MenuItem>
        <MenuItem Header="Edit">
            <MenuItem Header="Cut" />
            <MenuItem Header="Copy" />
            <MenuItem Header="Paste" />
        </MenuItem>
    </Menu>
    <Grid />
</DockPanel>

产生这个结果：

你可以随心所欲，只要继续嵌套项目......