如何更改 WPF 中单个选项卡项标题的背景？答案

【问题标题】：How to change a background of a single tab item header in WPF?如何更改 WPF 中单个选项卡项标题的背景？
【发布时间】：2012-04-23 15:22:53
【问题描述】：

我一直在 WPF XAML (.NET 4) 中对 TabControl 进行样式化，我所能做的就是根据触发器设置选项卡的样式或将它们全部设置为相同的样式。有什么方法可以使只有第一个选项卡的样式不同，而其他选项卡的样式与第一个选项卡不同但彼此相同（也就是使用选项卡索引来样式化 TabItem）。

谢谢。

【问题讨论】：

使用数据触发器有什么问题？
它可能会被使用，但有什么方法可以让我只将样式应用到一个标签项中？
您很可能需要一个自定义转换器来返回其父 Items 集合中每个 TabItem 的索引；其余的与触发器无关。

标签： c# .net wpf tabcontrol tabitem

【解决方案1】：

您可以使用 AlternationCount 和 AlternationIndex：

<TabControl AlternationCount="{Binding Path=Items.Count,RelativeSource={RelativeSource Self}}">
    <TabControl.ItemContainerStyle>
        <Style TargetType="TabItem">
            <Style.Triggers>
                <Trigger Property="ItemsControl.AlternationIndex"
                            Value="0"> <!-- First item -->
                    <Setter Property="FontWeight"
                            Value="Bold"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </TabControl.ItemContainerStyle>
    <TabItem Header="First"/>
    <TabItem Header="Second"/>
    <TabItem Header="Third"/>
    <TabItem Header="Fourth"/>
</TabControl>

【讨论】：

【解决方案2】：

如果您想更改刚刚选择的选项卡项的背景颜色，请使用该样式并将该样式应用于选项卡项。

<Style TargetType="{x:Type TabItem}" x:Key="TabItemStyle">
    <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Border Name="Border" Background="Red" BorderBrush="#FF1467AF"
                                    BorderThickness="1" 
                                    Margin="0,0,5,0" CornerRadius="8,8,0,0" SnapsToDevicePixels="True">
                            <TextBlock FontFamily="Arial" FontWeight="Bold" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Name="TextBlock" Foreground="White">
                      <ContentPresenter VerticalAlignment="Center"  HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2"/>
                            </TextBlock>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="Yellow"/>

                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
 </Style>

但是，如果您只想更改第一个选项卡项的背景颜色，请定义两种样式并将一个应用于第一个选项卡项，将第二个应用于其他选项卡

标签项 1 的样式：

<Style TargetType="{x:Type TabItem}" x:Key="TabItemStyleForFirst">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Border Name="Border" Background="Red" BorderBrush="#FF1467AF"
                                    BorderThickness="1" 
                                    Margin="0,0,5,0" CornerRadius="8,8,0,0" SnapsToDevicePixels="True">
                            <TextBlock FontFamily="Arial" FontWeight="Bold" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Name="TextBlock" Foreground="White">
                      <ContentPresenter VerticalAlignment="Center"  HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2"/>
                            </TextBlock>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
 </Style>

其他标签项的样式：

<Style TargetType="{x:Type TabItem}" x:Key="TabItemStyleForOther">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Border Name="Border" Background="Yellow" BorderBrush="#FF1467AF"
                                    BorderThickness="1" 
                                    Margin="0,0,5,0" CornerRadius="8,8,0,0" SnapsToDevicePixels="True">
                            <TextBlock FontFamily="Arial" FontWeight="Bold" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Name="TextBlock" Foreground="White">
                      <ContentPresenter VerticalAlignment="Center"  HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2"/>
                            </TextBlock>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
 </Style>

【讨论】：