創建垂直菜單

我試圖做類似下面的照片菜單：創建垂直菜單

This is the menu I am trying do

我有這樣的代碼：

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

但是這個代碼返回菜單就像在下面的圖片：

第一次出現這樣：

enter image description here

，當我把鼠標懸停在第1個顯示如下：

enter image description here

我想的是，菜單的第二級上的第一右側開，就像在第一張圖片。

來源

2014-09-30 Rafael

我想你現在已經將Y點設置爲與觸發ShowComment事件的Item的高度相匹配。而且，它與第一個菜單相匹配！還有什麼代碼？我認爲你可以這樣做，通過給予高度，等於菜單的總大小。 – 2014-09-30 14:30:06

我不明白你能給我一個例子嗎？ – Rafael 2014-09-30 14:31:45

設置子菜單的位置以匹配主菜單的頂部邊框！ – 2014-09-30 14:33:03

您必須爲您的Menu創建一個自定義模板才能實現您的目標。

Here是Menu的默認ControlTemplate，我覺得最簡單的方法就是從此開始。您必須在TopLevelHeader模板中爲PopUp添加HorizontalOffset和VerticalOffset，因此您可以將其與更改爲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）：

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

結果：

vertical menu

當然需要一些更多的造型，讓你想要的確切結果，但我希望你有這個想法。

來源

2014-09-30 15:47:33 qqbenq

創建垂直菜單

回答

相關問題