WPF选项卡主题，没有任何鼠标悬停效果

Question

如何以以下方式创建WPF标签布局的主题：标签页眉没有鼠标悬停的效果，我遵循的代码是

 <Border Background="#363636" BorderThickness="10">
    <TabControl>
        <TabItem>
            <TabItem.Header>
                    <TextBlock Text="Blue" Background="White" FontSize="16"  Foreground="Black" />
            </TabItem.Header>
            <Label Content="Content goes here..." />
        </TabItem>
        <TabItem>
            <TabItem.Header>
                <TextBlock Margin="0" Text="Blue" Background="#363636" FontSize="16" Foreground="White" />
            </TabItem.Header>
        </TabItem>
        <TabItem>
            <TabItem.Header>
                <TextBlock Margin="0" Text="Blue" Background="#363636" FontSize="16"  Foreground="White" />
            </TabItem.Header>
        </TabItem>
    </TabControl>

</Border>

这样产生了这样的结果

但是我期待一个像

Answer 1

这很接近你想要的

<Border Background="#363636"
        BorderThickness="10">
    <TabControl>
        <TabControl.Resources>
            <Style TargetType="TabItem">
                <Setter Property="TextElement.Foreground"
                        Value="White" />
                <Setter Property="TextElement.FontSize"
                        Value="16" />
                <Setter Property="Background"
                        Value="#363636" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TabItem">
                            <Border Background="{TemplateBinding Background}">
                                <ContentPresenter ContentSource="Header" Margin="10,5" />
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected"
                                         Value="true">
                                    <Setter Property="TextElement.Foreground"
                                            Value="Black" />
                                    <Setter Property="Background"
                                            Value="White" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.Resources>
        <TabItem Header="red">
            <Label Content="Content goes here..." />
        </TabItem>
        <TabItem Header="green">
            <Label Content="Content goes here..." />
        </TabItem>
        <TabItem Header="blue">
            <Label Content="Content goes here..." />
        </TabItem>
    </TabControl>
</Border>

为了进一步匹配，我们可能还需要覆盖选项卡控件模板

---

更新资料

我试图使其与您的要求紧密匹配

结果

a

<Border Background="#363636"
        Margin="4"
        CornerRadius="4">
    <TabControl>
        <TabControl.Resources>
            <Style TargetType="TabItem">
                <Setter Property="TextElement.Foreground"
                        Value="White" />
                <Setter Property="TextElement.FontSize"
                        Value="16" />
                <Setter Property="TextElement.FontWeight"
                        Value="SemiBold" />
                <Setter Property="Background"
                        Value="#363636" />
                <Setter Property="BorderBrush"
                        Value="{x:Null}" />
                <Setter Property="BorderThickness"
                        Value="0" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TabItem">
                            <Border x:Name="back"
                                    CornerRadius="4,4,0,0"
                                    Background="{TemplateBinding Background}">
                                <ContentPresenter ContentSource="Header"
                                                  Margin="20,10" />
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected"
                                         Value="true">
                                    <Setter Property="TextElement.Foreground"
                                            Value="Black" />
                                    <Setter Property="Background"
                                            Value="White" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.Resources>
        <TabItem Header="red">
            <Label Content="Content goes here..." />
        </TabItem>
        <TabItem Header="green">
            <Label Content="Content goes here..." />
        </TabItem>
        <TabItem Header="blue">
            <Label Content="Content goes here..." />
        </TabItem>
        <TabControl.Template>
            <ControlTemplate TargetType="TabControl">
                <Grid KeyboardNavigation.TabNavigation="Local" Margin="4">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <TabPanel x:Name="HeaderPanel"
                              Grid.Row="0"
                              Panel.ZIndex="1"
                              IsItemsHost="True"
                              KeyboardNavigation.TabIndex="1" />
                    <Border x:Name="Border"
                            RenderOptions.EdgeMode="Aliased"
                            Grid.Row="1"
                            KeyboardNavigation.TabNavigation="Local"
                            KeyboardNavigation.DirectionalNavigation="Contained"
                            KeyboardNavigation.TabIndex="2"
                            Background="White"
                            CornerRadius="0,0,2,2">

                        <ContentPresenter x:Name="PART_SelectedContentHost"
                                          RenderOptions.EdgeMode="Unspecified"
                                          Margin="4"
                                          ContentSource="SelectedContent" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </TabControl.Template>
    </TabControl>
</Border>