WPF：TabItem Header 使用 WPF 和 C# 的 TabControl 样式

Question

我是 WPF 新手，我正在尝试设置 TabControl 的样式，但在设置实际 TabItems 的样式时遇到困难：

我相信这可能没那么难，但我就是想不通，所以非常感谢您的帮助！

目前 TabControl 的XAML如下：

 <Window x:Class="FunctionalFun.UI.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:gc="clr-namespace:FunctionalFun.UI"
            mc:Ignorable="d"
            Title="mY Application" Height="800" Width="1080" ResizeMode="NoResize">
        <StackPanel>
            <Grid>
                <TabControl Name="TabControl1" TabStripPlacement="Left" Margin="-6,46,-14,-453">
                    <TabItem>
                        <TabItem.Header>
                            <Image Height="35" Width="35" Source="check-form_logo3.png"/>
                        </TabItem.Header>
<TabItem.Resources>
                            <Style TargetType="{x:Type Border}">
                                <Setter Property="CornerRadius" Value="10"/>
                            </Style>
                        </TabItem.Resources>
                        <Canvas>

                        </Canvas>

                    </TabItem>

                    <TabItem >
                        <TabItem.Header>
                            <Image Height="35" Width="35" Source="calendar-icon_logo1.png"/>
                        </TabItem.Header>
                        <TabItem.Resources>
                            <Style TargetType="{x:Type Border}">
                                <Setter Property="CornerRadius" Value="10"/>
                            </Style>
                        </TabItem.Resources>
                        <Canvas>


                        </Canvas>

                    </TabItem>

                    <TabItem >
                        <TabItem.Header>
                            <Image Width="35" Height="35" Source="table_logo4.png"/>
                        </TabItem.Header>
                        <Canvas>
                        </Canvas>
                    </TabItem>
                </TabControl>
            </Grid>
        </StackPanel>
    </Window>

Answer 1

一种选择是复制选项卡项的默认样式，然后更改其边框圆角半径、背景等，然后给它一个键，然后将您的样式应用到您的实际控件中，如下所示：

<StackPanel>
    <Grid>
        <Grid.Resources>
            <Style x:Key="CustomTabItem" TargetType="TabItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabItem}">
                            <Grid x:Name="Root"
                                  Background="AntiqueWhite">
                                <VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="SelectionStates">
      <VisualState x:Name="Unselected" />
      <VisualState x:Name="Selected">
        <Storyboard>
          <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                        Storyboard.TargetProperty="(Panel.Background).
            (GradientBrush.GradientStops)[1].(GradientStop.Color)">
            <EasingColorKeyFrame KeyTime="0"
                                 Value="{DynamicResource ControlPressedColor}" />
          </ColorAnimationUsingKeyFrames>
          <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)"
                                            Storyboard.TargetName="Border">
            <EasingThicknessKeyFrame KeyTime="0"
                                     Value="1,1,1,0" />
          </ThicknessAnimationUsingKeyFrames>
        </Storyboard>
      </VisualState>
    </VisualStateGroup>
    <VisualStateGroup x:Name="CommonStates">
      <VisualState x:Name="Normal" />
      <VisualState x:Name="MouseOver" />
      <VisualState x:Name="Disabled">
        <Storyboard>
          <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                        Storyboard.TargetProperty="(Panel.Background).
            (GradientBrush.GradientStops)[1].(GradientStop.Color)">
            <EasingColorKeyFrame KeyTime="0"
                                 Value="{DynamicResource DisabledControlDarkColor}" />
          </ColorAnimationUsingKeyFrames>
          <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                        Storyboard.TargetProperty="(Border.BorderBrush).
            (SolidColorBrush.Color)">
            <EasingColorKeyFrame KeyTime="0"
                                 Value="{DynamicResource DisabledBorderLightColor}"/>
          </ColorAnimationUsingKeyFrames>
        </Storyboard>
      </VisualState>
    </VisualStateGroup>
  </VisualStateManager.VisualStateGroups>
                                <Border x:Name="Border"
                                  Margin="0,0,-4,0"
                                  BorderThickness="1,1,1,1"
                                  CornerRadius="10">
                                    <Border.BorderBrush>
                                        <SolidColorBrush Color="Black" />
                                    </Border.BorderBrush>
                                    <Border.Background>
                                        <LinearGradientBrush StartPoint="0,0"
                                            EndPoint="0,1">
                                            <LinearGradientBrush.GradientStops>
                                                <GradientStopCollection>
                                                    <GradientStop Color="{DynamicResource ControlLightColor}"
                                                    Offset="0.0" />
                                                    <GradientStop Color="{DynamicResource ControlMediumColor}"
                                                     Offset="1.0" />
                                                </GradientStopCollection>
                                            </LinearGradientBrush.GradientStops>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                    <ContentPresenter x:Name="ContentSite"
                                          VerticalAlignment="Center"
                                          HorizontalAlignment="Center"
                                          ContentSource="Header"
                                          Margin="12,2,12,2"
                                          RecognizesAccessKey="True"/>
                                </Border>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected"
                                        Value="True">
                                    <Setter Property="Panel.ZIndex"
                                         Value="100" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <TabControl Name="TabControl1" TabStripPlacement="Left" Margin="-6,46,-14,-453">
            <TabItem Style="{StaticResource CustomTabItem}">
                <TabItem.Header>
                    <TextBlock Text="A"  />
                </TabItem.Header>
                <Canvas>
                </Canvas>
            </TabItem>
            <TabItem Style="{StaticResource CustomTabItem}">
                <TabItem.Header>
                    <TextBlock Text="B" />
                </TabItem.Header>
                <Canvas>
                </Canvas>
            </TabItem>
            <TabItem Style="{StaticResource CustomTabItem}">
                <TabItem.Header>
                    <TextBlock Text="C" />
                </TabItem.Header>
                <Canvas>
                </Canvas>
            </TabItem>
        </TabControl>
    </Grid>
</StackPanel>

WPF：TabItem Header 使用 WPF 和 C# 的 TabControl 样式

WPF: TabItem Header Styling of TabControl usin WPF and C#

wpf

xaml

header

styles

tabcontrol