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

Question

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

我通过使用弹出控件和菜单控件尝试过，但效果并不理想

Answer 1

你必须做两件事：

1. 将Menu.ItemsPanel设置为StackPanel

2. 将MenuItems的弹出式广告位置从下方更改为右侧。我只是右键单击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>