如何在WPF中创建垂直菜单并在菜单右侧创建子菜单？

Question

如图所示，如何在WPF中创建菜单？

我已经尝试过使用Popup控件和Menus控件，但是效果并不理想

Answer 1

您必须做两件事：

1. 将Menu.ItemsPanel设置为StackPanel

2. 从底部到右侧更改弹出菜单项的位置 。 我只是在Visual Studio Designer中的MenuItem上单击鼠标右键，然后从上下文菜单中选择EditTempalate。 在模板中，我找到了弹出控件，并将放置位置更改为Right。 很好用

最终XAML：

<Menu HorizontalAlignment="Left">
    <Menu.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel />
        </ItemsPanelTemplate>
    </Menu.ItemsPanel>
    <MenuItem Header="Item 1" />
    <MenuItem Header="Item 2" Style="{StaticResource MenuItemStyle1}">
        <MenuItem Header="Sub item 1" />
        <MenuItem Header="Sub item 2" />
        <MenuItem Header="Sub item 3" />
        <MenuItem Header="Sub item 4" />
    </MenuItem>
    <MenuItem Header="Item 3" />
    <MenuItem Header="Item 4" />
</Menu>

结果：

Answer 2

您可以使用ToggleButton和Popup实现此菜单。

 <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"></ColumnDefinition>
        <ColumnDefinition Width="500"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="30"></RowDefinition>
        <RowDefinition Height="30"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>

    <ToggleButton Content="Home"   Name="ToggleButton1" Foreground="Black"  Focusable="false" IsChecked="{Binding Path=IsOpen,Mode=TwoWay,ElementName=Popup1}" ClickMode="Press"/>
    <ToggleButton Content="Controls" Grid.Row="1"   Name="ToggleButton2" Foreground="Black"  Focusable="false" IsChecked="{Binding Path=IsOpen,Mode=TwoWay,ElementName=Popup2}" ClickMode="Press"/>

    <Popup VerticalAlignment="Top"   PlacementTarget="{Binding ElementName=ToggleButton1}" Grid.Column="1"  HorizontalAlignment="Left" Name="Popup1" Placement="Right" IsOpen="False"  AllowsTransparency="True" Focusable="False" PopupAnimation="Slide">
        <Grid Background="Gray" HorizontalAlignment="Left" VerticalAlignment="Stretch" SnapsToDevicePixels="True" Width="300" Height="300">
            <StackPanel  HorizontalAlignment="Stretch" Background="Transparent">
                <TextBlock Text="Xaml"></TextBlock>
                <TextBlock Text="Routed Events"></TextBlock>
                <TextBlock Text="Visual Tree"></TextBlock>
            </StackPanel>
        </Grid>
    </Popup>

    <Popup VerticalAlignment="Top"   PlacementTarget="{Binding ElementName=ToggleButton2}" Grid.Column="1"  HorizontalAlignment="Left" Name="Popup2" Placement="Right" IsOpen="False"  AllowsTransparency="True" Focusable="False" PopupAnimation="Slide">
        <Grid Background="Green" HorizontalAlignment="Left" VerticalAlignment="Stretch" SnapsToDevicePixels="True" Width="300" Height="300">
            <StackPanel  HorizontalAlignment="Stretch" Background="Transparent">
                <TextBlock Text="Xaml"></TextBlock>
                <TextBlock Text="Routed Events"></TextBlock>
                <TextBlock Text="Visual Tree"></TextBlock>
            </StackPanel>
        </Grid>
    </Popup>
</Grid>

输出量

Answer 3

尝试使用MenuItem.ItemsPanel

例如

<Menu>
<Menu.ItemsPanel>
    <ItemsPanelTemplate>
        <VirtualizingStackPanel Orientation="Vertical"/>
    </ItemsPanelTemplate>
</Menu.ItemsPanel>
</Menu>

Answer 4

只需使用PopupMenu控件即可。 无需更改项目面板。