Create a vertical Menu in a Wpf

Question

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.

Answer 1

Sure, just change MenuItem.ItemsPanel to use a Vertical StackPanel instead of the Default Horizontal one

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

</Menu>

Answer 2

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>

Answer 3

You can adjust the ItemsPanel using Style (which I feel is much more wpf-ish)

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

the VerticalAlignment="Center" is there for beautification purposes, you can definitely skip it.

then in the menu code

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