수직 메뉴

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> 

을하지만,이 코드는 아래 그림처럼 메뉴를 반환합니다 :

,751 :

먼저이 나타납니다3210

나는 항목이 같은 일이 나타납니다 가져가 마우스를 넣을 때 : 내가 원하는

을 그처럼 최초의 오른쪽에 열려 메뉴의 두 번째 수준, 첫 번째 이미지.

Answer 1

목표를 달성하기 위해 Menu에 대한 맞춤 템플릿을 만들어야합니다.

Here은 Menu의 기본값 인 ControlTemplate입니다. 가장 쉬운 방법은 그 것으로부터 시작하는 것입니다. TopLevelHeader 템플릿에 PopUp의 경우 HorizontalOffset 및 VerticalOffset을 추가해야하므로 사용자 요구에 맞출 수 있습니다 (또는 간단히 Placement을 Right으로 설정하십시오.).

또한 Width을 메뉴에 직접 설정하거나 (Width을 제한하는 일부 컨테이너에 배치하여) 메뉴를 설정해야합니다. 그렇지 않으면 모든 공간을 차지하게되고 팝업이 표시되지 않을 수 있습니다.

내가 여기에 여기에 전체 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에 ...

그 결과

좀 더 스타일은 당신이 원하는 정확한 결과를 얻기 위해 필요한 물론

,하지만 난 당신이 아이디어를 얻었기를 바랍니다.