在Wpf中创建一个垂直菜单

Question

如何在Visual Studio（在WPF中）使用XAML创建类似http://www.wpftutorial.net/上的垂直菜单并将其放在窗口左侧？我尝试了以下代码：

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

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

不一定需要使用控制菜单来完成任务。如果有任何其他外观相似的控件适合，那也是可以接受的。

- arjacsoh

---

你的 Menu 周围有一个 DockPanel 吗？ - Jon

是的，我需要这样做，否则它无法正常工作。 - arjacsoh

你可以使用已接受的答案，或者使用 https://github.com/beto-rodriguez/MaterialMenu 这个现成的工具。 - bto.rdz

Answer 1

当然可以，只需将MenuItem.ItemsPanel更改为垂直的StackPanel，而不是默认的水平方向的即可。

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

</Menu>

- Rachel

---

如果菜单是添加到 DockPanel 的最后一个项，则默认情况下它将拉伸以填充所有剩余的空间。要么在你的 DockPanel 上设置 LastChildFill="False"，要么在菜单之后添加另一个元素。以下链接是一个很好的参考，可以了解不同的 WPF 布局：http://www.codeproject.com/KB/WPF/WPFLayoutQS.aspx - Rachel

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>

- bto.rdz

---

虽然这是一个不错的项目，“现在工作”有点牵强（我尝试过），并且它没有满足提问者的要求，而接受的答案则做到了。提问者要求菜单，而不是侧边栏。 - Mickael V.

Answer 3

您可以使用样式（我觉得这更符合WPF的风格）来调整ItemsPanel。

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

- Mark Adamantine

Answer 4

由于某些原因，在 ModernWPF 中，该解决方案对我不起作用，因此我改为在垂直 StackPanel 中使用多个菜单：

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

- Alex SSB