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且其子级是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

Answer 2

另一种方法是将Padding设置为较小的值并为TextBlock添加边距：

<Style TargetType="{x:Type TabItem}">
        <Setter Property="Padding" Value="1" />
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Border Background="Orange">
                        <ContentPresenter>
                            <ContentPresenter.Content>
                                <TextBlock Margin="4" Text="{Binding Header}"/>
                            </ContentPresenter.Content>
                        </ContentPresenter>
                    </Border>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

TabControl.ItemTemplate未完全填充选项卡标题背景

2 个答案: