如何在 WPF 应用程序的另一侧创建一个内容不断变化的垂直菜单？

Question

我试图用 MenuItem 控件创建一个垂直菜单。但是，它并没有给我想要的图片。我能够创建以下菜单： enter image description here

但是，我想要的结果是这样的： enter image description here

Answer 1

不使用 MenuItem 控件，而是使用 TabControl，并将其 TabStripPlacement 属性设置为 Left，以获得您想要的结果。

这里是您的起点：

<TabControl TabStripPlacement="Left" HorizontalAlignment="Left" HorizontalContentAlignment="Stretch">
    <TabControl.Resources>
        <DataTemplate x:Key="MyHeaderTemplate">
            <Grid Background="#437C97" >
                <TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType=TabItem},Path=Header}" 
                           FontSize="18" Foreground="White" TextAlignment="Left" Margin="10,5" />
            </Grid>
        </DataTemplate>
    </TabControl.Resources>
    <TabItem Header="Add Project" HeaderTemplate="{StaticResource MyHeaderTemplate}" >
        <Grid>
            <TextBlock FontSize="32" Text="Add Project stuff goes here"/>
        </Grid>
    </TabItem>
    <TabItem Header="Add Supplier" HeaderTemplate="{StaticResource MyHeaderTemplate}">
        <Grid>
            <TextBlock FontSize="32" Text="Add Supplier stuff goes here"/>
        </Grid>
    </TabItem>
    <TabItem Header="Add Item" HeaderTemplate="{StaticResource MyHeaderTemplate}">
        <Grid>
            <TextBlock FontSize="32" Text="Add Item stuff goes here"/>
        </Grid>
    </TabItem>
    <TabItem Header="Add Contact" HeaderTemplate="{StaticResource MyHeaderTemplate}">
        <Grid>
            <TextBlock FontSize="32" Text="Add Contact stuff goes here"/>
        </Grid>
    </TabItem>
    <TabItem Header="Add Order" HeaderTemplate="{StaticResource MyHeaderTemplate}">
        <Grid>
            <TextBlock FontSize="32" Text="Add Order stuff goes here"/>
        </Grid>
    </TabItem>
</TabControl>

生成的 UI 将如下所示：

您可以研究其余部分以获得您想要的最终结果。

如何在 WPF 应用程序的另一侧创建一个内容不断变化的垂直菜单？

How to create a vertical menu with changing content on other side in WPF application?

c#

wpf

visual-studio-2019