创建垂直菜单

Question

我尝试做一个如下图所示的菜单：

我有这段代码：

    <Menu >
        <Menu.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </Menu.ItemsPanel>
        <MenuItem Header="Item1">
            <MenuItem Header="SubItem 1">
                <MenuItem Header="SubItem 1.1"></MenuItem>
                <MenuItem Header="SubItem 1.2"></MenuItem>
                <MenuItem Header="SubItem 1.3"></MenuItem>
                <MenuItem Header="SubItem 1.4"></MenuItem>
            </MenuItem>
            <MenuItem Header="SubItem 2"></MenuItem>
            <MenuItem Header="SubItem 3"></MenuItem>
            <MenuItem Header="SubItem 4"></MenuItem>
        </MenuItem>
        <MenuItem Header="Item2">
            <MenuItem Header="SubItem 1"></MenuItem>
            <MenuItem Header="SubItem 2"></MenuItem>
            <MenuItem Header="SubItem 3"></MenuItem>
        </MenuItem>
    </Menu>

但是这段代码会返回如下图所示的菜单：

首先出现这个：

当我将鼠标悬停时，项目1显示如下：

我希望菜单的第二级在第一级的右侧打开，就像第一张图像一样。

Answer 1

您必须为Menu创建自定义模板才能实现目标。

Here是Menu的默认ControlTemplate，我认为最简单的方法是从中开始。您必须在HorizontalOffset模板中为VerticalOffset添加PopUp和TopLevelHeader，以便根据需要进行调整（或只需将Placement设置为Right Width - 在我看来这更容易。）

此外，您应该为您的菜单设置Width（直接或将其放在限制它的// ... <!-- TopLevelHeader --> <ControlTemplate x:Key="{x:Static MenuItem.TopLevelHeaderTemplateKey}" TargetType="MenuItem"> <Border Name="Border" > <Grid> <ContentPresenter Margin="6,3,6,3" ContentSource="Header" RecognizesAccessKey="True" /> <Popup Name="Popup" Placement="Right" <!-- This is modified --> IsOpen="{TemplateBinding IsSubmenuOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Fade"> // ... (You need all the XAML from the linked MSDN site in your Resources somewhere) 容器中，否则会占用所有空间和PopUp可能不可见。

我不会在这里复制整个XAML，但这里是重要部分：

Menu

之后，您几乎可以像使用Width一样使用<Menu Width="300"> <Menu.ItemsPanel> <ItemsPanelTemplate> <VirtualizingStackPanel Orientation="Vertical"/> </ItemsPanelTemplate> </Menu.ItemsPanel> <MenuItem Header="Item1"> <MenuItem Header="SubItem 1"> <MenuItem Header="SubItem 1.1"></MenuItem> <MenuItem Header="SubItem 1.2"></MenuItem> <MenuItem Header="SubItem 1.3"></MenuItem> <MenuItem Header="SubItem 1.4"></MenuItem> </MenuItem> <MenuItem Header="SubItem 2"></MenuItem> <MenuItem Header="SubItem 3"></MenuItem> <MenuItem Header="SubItem 4"></MenuItem> </MenuItem> <MenuItem Header="Item2"> <MenuItem Header="SubItem 1"></MenuItem> <MenuItem Header="SubItem 2"></MenuItem> <MenuItem Header="SubItem 3"></MenuItem> </MenuItem> </Menu> ：

Menu

您可能希望为该模板命名并直接将其应用于此Menus，而不是弄乱您应用中的其他{{1}} ...

结果：

当然需要更多样式来获得您想要的确切结果，但我希望您能有这个想法。