创建垂直菜单

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上时，会出现以下内容： 我希望菜单的第二层在第一层右侧打开，就像第一张图片中那样。

- Rafael

---

我猜你现在将Y点设置为与触发ShowComment事件的项目高度相匹配。而且，它与第一个菜单匹配！那么代码还需要什么呢？我认为你可以通过将高度设置为菜单的总大小来实现。 - Afzaal Ahmad Zeeshan

我没有理解清楚，你能给我一个例子吗？ - Rafael

将子菜单的位置设置为与主菜单的顶部边框相匹配！ - Afzaal Ahmad Zeeshan

“Menu”旨在创建类似于标准Windows应用程序标题栏下方运行的菜单条。您是否正在尝试创建弹出式菜单？如果是这样，您的顶级菜单应该是“ContextMenu”。 - Mike Strobel

我该如何将一个ContextMenu固定在屏幕的一侧？ - Rafael

Answer 1

您需要为您的菜单创建自定义模板以实现您的目标。 这里是菜单的默认ControlTemplate，我认为最简单的方法是从那里开始。您将不得不为TopLevelHeader模板中的PopUp添加HorizontalOffset和VerticalOffset，以便将其对齐到您的需求（或者仅将Placement设置为Right - 在我看来更容易）。

此外，您应该为您的菜单设置一个Width（直接设置或通过将其放置在某个限制其Width的容器中），否则它将占用所有空间，而PopUp可能不可见。

我不会在此处复制整个XAML，但以下是重要部分：

// ...
<!-- 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)

之后，您可以几乎与以前相同地使用您的菜单（我只添加了宽度）：

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

你可能想要给这个模板命名并直接应用于这个菜单，以免弄乱应用程序中的其他菜单...

结果：

当然，要得到您想要的确切结果还需要一些样式设置，但我希望您已经理解了这个想法。

- qqbenq