Question

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

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

但它不是任务，因为它在顶部显示水平菜单。

不需要通过控制菜单明确地完成。如果任何其他具有相似外观的控件是合适的，则可以接受。

Answer 1

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

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

</Menu>

Answer 2

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

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>

在Wpf中创建一个垂直菜单

3 个答案: