TabControl.ItemTemplate不能完全填充标签页眉背景

Question

我正在尝试设置选项卡标题的背景颜色，但它没有填充整个标题，而是在模板周围留有空白。我需要用背景色完全填充选项卡的标题。

以下是一些简单的代码来演示此行为：

<Window x:Class="WpfApplication7.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TabControl Name="TabControl">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <Grid Background="BlueViolet">
                        <TextBlock Height="20" Width="60" Text="TEST"/>
                    </Grid>
                </DataTemplate>
            </TabControl.ItemTemplate>
        </TabControl>
    </Grid>
</Window>

后面的代码：

using System.Windows;
using System.Windows.Controls;

namespace WpfApplication7
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            TabControl.Items.Add(new Grid());
        }
    }
}

Answer 1

TabItem如果要Background填充控件模板，则必须删除该控件模板。

a的原始控件模板TabItem如下所示，

<ControlTemplate TargetType="{x:Type TabItem}">
    <Grid>
      <Border 
        Name="Border"
        Margin="0,0,-4,0" 
        Background="{StaticResource LightBrush}"
        BorderBrush="{StaticResource SolidBorderBrush}" 
        BorderThickness="1,1,1,1" 
        CornerRadius="2,12,0,0" >
        <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" />
        <Setter TargetName="Border" Property="Background" Value="{StaticResource WindowBackgroundBrush}" />
        <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
      </Trigger>
      <Trigger Property="IsEnabled" Value="False">
        <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
        <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
        <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
      </Trigger>
    </ControlTemplate.Triggers>
  </ControlTemplate>

如您所见，Template它的内部有一个Border，其子级是一个ContentPresenter，这基本上是您在其中ItemTemplate进行的修改，因为TabControl它没有填写，因为Border拥有自己的背景色，您可以将其定义为LightBrush。为了更改此行为，您必须自定义TabItem模板，如下所示。

<TabControl Name="TabControl">
        <TabControl.Resources>
            <Style TargetType="{x:Type TabItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabItem}">
                            <Grid>
                                <Border 
                                    Name="Border"
                                    Margin="0,0,-4,0" 
                                    Background="BlueViolet"
                                    BorderBrush="{StaticResource SolidBorderBrush}" 
                                    BorderThickness="1,1,1,1" 
                                    CornerRadius="2,12,0,0" >
                                    <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" />
                                    <Setter TargetName="Border" Property="Background" Value="BlueViolet" />
                                    <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
                                    <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                                    <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.Resources>
        <TabControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock Height="20" Width="60" Text="TEST"/>
                </Grid>
            </DataTemplate>
        </TabControl.ItemTemplate>
</TabControl>

通知我明确改Background到BlueViolet