如何使用WPF在左侧创建带标签的简单菜单？

Question

我一直在用Windows Forms开发一些简单的应用程序（仅用于教育目的），现在我开始学习WPF，但对我来说似乎有点复杂。

我想创建一个简单的菜单，就像你可以在图片中看到的那样。我一直试图在谷歌和YouTube上找到它，但我刚刚找到了很多关于“汉堡菜单”的教程，这不是我想要的。

Answer 1

这是WPF闪耀的一个领域：您描述的布局只需一个重新设置的标签控件即可实现。

使用TabStripPlacement Left的<{1}}开始使用无样式的标签控件：

然后修改TabControl样式，在TabPanel后面添加渐变和边距：

添加图片并覆盖TabItem样式以设置字体并删除背景。我用雪佛龙来表示选择而不是用粗体表示文本，但这样做的处理方法也是一样的。

以下是用于上述屏幕截图的完整XAML：

<Window x:Class="StackOverflowTabControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:StackOverflowTabControl"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
        <Style x:Key="ItemContainerStyle" TargetType="{x:Type TabItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid Margin="15,5">
                            <Path Width="10" Height="14" Margin="0,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Stretch="Fill" Fill="#FF000000" Data="F1 M 39.8307,37.6042L 36.6641,34.4375L 25.1849,23.3542L 35.4766,23.3542L 50.5182,37.6042L 35.4766,51.8542L 25.1849,51.8542L 36.6641,40.7708L 39.8307,37.6042 Z " Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
                            <ContentPresenter Content="{TemplateBinding Header}" Margin="20,5,10,5">
                                <ContentPresenter.Resources>
                                    <Style TargetType="{x:Type TextBlock}">
                                        <Setter Property="FontSize" Value="18" />
                                        <Setter Property="FontWeight" Value="Light" />
                                    </Style>
                                </ContentPresenter.Resources>
                            </ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
            <Setter Property="TabStripPlacement" Value="Left" />
            <Setter Property="ItemContainerStyle" Value="{StaticResource ItemContainerStyle}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabControl}">
                        <Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="1*" />
                            </Grid.ColumnDefinitions>
                            <Border Grid.Column="0" Padding="5">
                                <Border.Background>
                                    <LinearGradientBrush EndPoint="0,0" StartPoint="1,0">
                                        <GradientStop Color="#FFC7C7C7" Offset="0"/>
                                        <GradientStop Color="#FFECECEC" Offset="1"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                                <DockPanel>
                                    <Image DockPanel.Dock="Bottom" HorizontalAlignment="Center" Margin="20" Source="pack://application:,,,/StackOverflowTabControl;component/twc.png" Width="200" />
                                    <TabPanel x:Name="headerPanel" Background="Transparent" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
                                </DockPanel>
                            </Border>
                            <Border x:Name="contentPanel" Grid.Column="1" Margin="5,0,0,0">
                                <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <TabControl Style="{DynamicResource TabControlStyle1}">
            <TabItem Header="System Information">
                <TextBlock Text="Windows 10 pro" />
            </TabItem>
            <TabItem Header="Something else">
                <TextBlock Text="Other page" />
            </TabItem>
        </TabControl>
    </Grid>
</Window>