c# - 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有待填补。

一个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它的 child 是 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