Создание вертикального меню в Wpf

Как можно создать вертикальное меню в левой части окна в Visual Studio (в wpf) с помощью xaml, например, в http://www.wpftutorial.net/? Я пробую код:

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

но это не задача, так как она отображает горизонтальное меню вверху.

Не обязательно, чтобы это было сделано с помощью меню управления. Если какой-либо другой элемент управления с похожим внешним видом является подходящим, он является приемлемым.

Ответы

Ответ 1

Конечно, просто измените MenuItem.ItemsPanel на использование вертикальной StackPanel вместо горизонтальной по умолчанию.

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

</Menu>

Ответ 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>

Ответ 3

Вы можете отрегулировать ItemsPanel, используя стиль (который, как мне кажется, намного больше 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>

VerticalAlignment = "Center" предназначен для украшения, вы можете его пропустить.

тогда в коде меню

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