WPF TabControl样式定制咨询：移除TabItem周围边框并实现TabItem填充标签区域

嘿，我仔细看了你的代码，那个TabItem周围的红色空隙其实是TabPanel默认的2px Padding导致的——你给全局Grid设的红色背景刚好把这个空隙暴露出来了！下面是具体的修复方案：

核心修改点 #

• 给TabPanel的样式加上Padding="0"（你之前只设了Margin，没管Padding，这才是空隙的核心来源）
• 移除全局的Grid样式（或者给它加x:Key限定范围，不然会污染所有Grid的背景，容易引发其他布局问题）

修改后的完整代码 #

<TabControl TabStripPlacement="Left" SelectedIndex="1"> 
    <TabControl.Resources> 
        <!-- 移除全局Grid样式，避免影响TabControl内部布局容器 -->
        <Style TargetType="{x:Type TabPanel}"> 
            <Setter Property="Margin" Value="0" /> 
            <!-- 关键：消除TabPanel默认的2px内边距 -->
            <Setter Property="Padding" Value="0" /> 
        </Style> 
        <Style TargetType="{x:Type TabControl}"> 
            <Setter Property="Background" Value="Black"/> 
            <Setter Property="BorderThickness" Value="0" /> 
            <Setter Property="Margin" Value="0" /> 
            <Setter Property="Padding" Value="0" /> 
        </Style> 
        <Style TargetType="{x:Type TabItem}"> 
            <Setter Property="Background" Value="Pink"/> 
            <Setter Property="BorderBrush" Value="White"/> 
            <Setter Property="BorderThickness" Value="5"/> 
            <Setter Property="Margin" Value="0"/> 
            <Setter Property="Padding" Value="0"/> 
            <Setter Property="VerticalAlignment" Value="Stretch"/> 
            <Setter Property="HorizontalAlignment" Value="Stretch"/> 
            <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
            <Setter Property="Template"> 
                <Setter.Value> 
                    <ControlTemplate TargetType="{x:Type TabItem}"> 
                        <Border x:Name="OuterBorder" 
                                BorderThickness="{TemplateBinding BorderThickness}" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                Background="{TemplateBinding Background}"> 
                            <ContentPresenter ContentSource="Header" 
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
                        </Border> 
                    </ControlTemplate> 
                </Setter.Value> 
            </Setter> 
        </Style> 
    </TabControl.Resources> 
    <TabItem Width="80" Height="40" Header="Text" > 
        <TextBlock Text="1 Future Content..." VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Pink" Foreground="Black" /> 
    </TabItem> 
    <TabItem Width="80" Height="40" Header="Text" > 
        <TextBlock Text="2 Future Content..." VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Pink" Foreground="Black" /> 
    </TabItem> 
    <TabItem Width="80" Height="40" Header="Text" > 
        <TextBlock Text="3 Future Content..." VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Pink" Foreground="Black" /> 
    </TabItem> 
</TabControl>

额外说明 #

如果你确实需要给某个特定Grid设置红色背景，不要用全局的TargetType="{x:Type Grid}"，而是给它加一个x:Key限定范围，比如：

<Style x:Key="RedBackgroundGrid" TargetType="{x:Type Grid}">
    <Setter Property="Background" Value="Red" />
    <Setter Property="Margin" Value="0" />
</Style>

然后在需要的Grid上用Style="{StaticResource RedBackgroundGrid}"引用，这样就不会干扰TabControl内部的布局了。

另外，你已经给TabItem设置了HorizontalAlignment="Stretch"和VerticalAlignment="Stretch"，配合TabPanel的Padding=0，就能让TabItem完全填满标签区域，彻底消除那个2像素的红色空隙啦！

内容的提问来源于stack exchange，提问作者Micconos