在 Wpf 中创建垂直菜单

Question

如何使用 xaml 在 Visual Studio（在 wpf 中）窗口的左侧创建一个垂直菜单，就像 http://">http:// /www.wpftutorial.net/？我尝试了代码：

<Menu DockPanel.Dock="Left" VerticalAlignment="Top" Background="Gray" BorderBrush="Black">

但它没有完成任务，因为它在顶部呈现了一个水平菜单。

并不一定需要通过控制菜单来完成。如果任何其他具有类似外观的控件是合适的，则可以接受。

Answer 1

当然，只需将 MenuItem.ItemsPanel 更改为使用垂直 StackPanel，而不是默认的水平 StackPanel

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

</Menu>

Answer 2

接受的答案很好。但要让侧边栏发挥作用还有很长的路要走。如果您现在需要的是工作菜单，则可以使用此控件。

https://github.com/beto-rodriguez/MaterialMenu

你也可以从 nuget 安装它。

这是一个例子

<materialMenu:SideMenu HorizontalAlignment="Left" x:Name="Menu"
                           MenuWidth="300"
                           Theme="Default"
                           State="Hidden">
        <materialMenu:SideMenu.Menu>
            <ScrollViewer VerticalScrollBarVisibility="Hidden">
                <StackPanel Orientation="Vertical">
                    <Border Background="#337AB5">
                        <Grid Margin="10">
                            <TextBox Height="150" BorderThickness="0" Background="Transparent"
                                VerticalContentAlignment="Bottom" FontFamily="Calibri" FontSize="18"
                                Foreground="WhiteSmoke" FontWeight="Bold">Welcome</TextBox>
                        </Grid>
                    </Border>
                    <materialMenu:MenuButton Text="Administration"></materialMenu:MenuButton>
                    <materialMenu:MenuButton Text="Packing"></materialMenu:MenuButton>
                    <materialMenu:MenuButton Text="Logistics"></materialMenu:MenuButton>
                </StackPanel>
            </ScrollViewer>
        </materialMenu:SideMenu.Menu>
    </materialMenu:SideMenu>

Answer 3

您可以使用 Style 调整 ItemsPanel（我觉得这更像是 wpf 风格），

<Window.Resources>
        <Style TargetType="Menu" x:Key="Horizontal">
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <StackPanel VerticalAlignment="Center"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>
<Window.Resources>

VerticalAlignment="Center" 是为了美化目的，您绝对可以跳过它。

然后在菜单代码中

<Menu Style="{StaticResource Horizontal}">
    ...
</Menu>

Answer 4

由于某种原因，该解决方案在 ModernWPF 中不适用于我，因此我在垂直 StackPanel 中使用了多个菜单：

<StackPanel Orientation="Vertical">
    <Menu>
        <MenuItem />
    </Menu>
    <Menu>
        <MenuItem />
    </Menu>
</StackPanel>