Create a vertical Menu in a Wpf

2018-06-21 20:08:58

How is it possible to create a vertical menu on the left side of the window in Visual Studio (in a wpf) with xaml like the one in http://www.wpftutorial.net/? I try the code:

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

but it does not the task, since it presents a horizontal menu on the top.

It is not required to be done definitely by the control menu. If any other control with similar appearance is appropriate, it is acceptable.

当然，只要将MenuItem.ItemsPanel改为使用垂直堆栈面板而不是默认的水平面板

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

</Menu>

Accepted anwer is good. But it is a long way to get a good side bar working. you can use this control if what you need is a working menu now.

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

you can install it from nuget too.

here is an example

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

链接地址: http://www.djcxy.com/p/61312.html

上一篇: 有没有一种方法可视化编辑WPF自定义控件？

下一篇: 在Wpf中创建一个垂直菜单