WPF 选项卡控件：设置选项卡颜色？

Question

我的 WPF 应用程序中有一个 TabControl，它使用 WPF 选项卡控件的默认颜色。换句话说，活动选项卡是白色的，非活动选项卡是银色的。我通过设置 TabControl 对象的 Background 属性，将所有选项卡页的 Background 颜色更改为米色，但它没有不更改选项卡颜色，仅更改客户区。因此，我最终得到了一个活动选项卡，其中有一个米色客户区和一个白色选项卡。

我想设置选项卡Color以匹配客户区域，以便整个页面是米色的。我该怎么做呢？谢谢。

Answer 1

这是我的一个项目中的选项卡项样式的示例。抱歉有些不相关的代码，我相信您会从中提取您需要的内容。

<Style x:Uid="Style_21" TargetType="{x:Type TabItem}">
        <Setter x:Uid="Setter_75" Property="Template">
            <Setter.Value>
                <ControlTemplate x:Uid="ControlTemplate_7" TargetType="{x:Type TabItem}">
                    <Grid x:Uid="Grid_13">
                        <Border 
                             x:Uid="Border" Name="Border"
                             Background="#F0F0F0"
                             BorderBrush="LightGray" 
                             BorderThickness="1,1,1,0" 
                             CornerRadius="4,4,0,0" 
                             Margin="0,0,2,0" SnapsToDevicePixels="True" >
                            <TextBlock x:Uid="TextBlock" FontSize="15" 
                                       HorizontalAlignment="Center" 
                                       Name="TextBlock" 
                                       Foreground="DarkGray">
                            <ContentPresenter x:Uid="ContentSite" x:Name="ContentSite"
                                               VerticalAlignment="Center"
                                               HorizontalAlignment="Center"
                                               ContentSource="Header"
                                               Margin="12,2,12,2"/>
                            </TextBlock>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger x:Uid="Trigger_14" Property="IsSelected" Value="True">
                            <Setter x:Uid="Setter_76" TargetName="Border" Property="Background" Value="White" />
                            <Setter x:Uid="Setter_77" TargetName="Border" Property="BorderBrush" Value="Gray" />
                            <Setter x:Uid="Setter_78" TargetName="TextBlock" Property="Foreground" Value="Black" />
                            <Setter x:Uid="Setter_79" TargetName="Border" Property="Margin" Value="0,0,2,-1" />
                        </Trigger>
                        <Trigger x:Uid="Trigger_15" Property="IsMouseOver" Value="True" SourceName="Border" >
                            <Setter x:Uid="Setter_80" TargetName="Border" Property="Background" Value="White" />
                            <Setter x:Uid="Setter_81" TargetName="Border" Property="BorderBrush" Value="DarkGray" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

希望有帮助。

Answer 2

我想出了解决办法。我将把莱万诺夫的答案选为正确的答案，以感谢他的帮助。

本质上，该修复是对 TabItem 控件模板的一行更改。从普通 TabItem 控件模板的副本开始，并将控件模板设置为针对 TabItem 类型的所有控件。找到 IsSelected 触发器，并将其更改为以下内容：

<Setter Property="Background" TargetName="Bd" Value="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}"/>

Bd 是 Border 控件，用于设置选项卡区域的边框和背景。 TabItem。此标记告诉 WPF 将 Bd Background 属性绑定到相对源。在本例中，相对源是托管 TabItem 的 TabControl 的 Background 属性。因此，当您设置 TabControl 的 Background 属性时，颜色将流到所有 TabItem 控件的选项卡区域托管在 TabControl 中。

以下是我在 Blend 3 中创建的演示的完整标记：

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="WpfApplication1.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">
    <Window.Resources>

        <Style x:Key="TabItemFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="3,3,3,1" SnapsToDevicePixels="true"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>
        <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#F3F3F3" Offset="0"/>
            <GradientStop Color="#EBEBEB" Offset="0.5"/>
            <GradientStop Color="#DDDDDD" Offset="0.5"/>
            <GradientStop Color="#CDCDCD" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="TabItemHotBackground" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#EAF6FD" Offset="0.15"/>
            <GradientStop Color="#D9F0FC" Offset=".5"/>
            <GradientStop Color="#BEE6FD" Offset=".5"/>
            <GradientStop Color="#A7D9F5" Offset="1"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="TabItemSelectedBackground" Color="#F9F9F9"/>
        <SolidColorBrush x:Key="TabItemHotBorderBrush" Color="#3C7FB1"/>
        <SolidColorBrush x:Key="TabItemDisabledBackground" Color="#F4F4F4"/>
        <SolidColorBrush x:Key="TabItemDisabledBorderBrush" Color="#FFC9C7BA"/>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="Padding" Value="6,1,6,1"/>
            <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
            <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid SnapsToDevicePixels="true">
                            <Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Padding="{TemplateBinding Padding}">
                                <ContentPresenter x:Name="Content" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemHotBackground}"/>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Panel.ZIndex" Value="1"/>
                                <Setter Property="Background" TargetName="Bd" Value="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="false"/>
                                    <Condition Property="IsMouseOver" Value="true"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemHotBorderBrush}"/>
                            </MultiTrigger>
                            <Trigger Property="TabStripPlacement" Value="Bottom">
                                <Setter Property="BorderThickness" TargetName="Bd" Value="1,0,1,1"/>
                            </Trigger>
                            <Trigger Property="TabStripPlacement" Value="Left">
                                <Setter Property="BorderThickness" TargetName="Bd" Value="1,1,0,1"/>
                            </Trigger>
                            <Trigger Property="TabStripPlacement" Value="Right">
                                <Setter Property="BorderThickness" TargetName="Bd" Value="0,1,1,1"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="TabStripPlacement" Value="Top"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Margin" Value="-2,-2,-2,-1"/>
                                <Setter Property="Margin" TargetName="Content" Value="0,0,0,1"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="TabStripPlacement" Value="Bottom"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Margin" Value="-2,-1,-2,-2"/>
                                <Setter Property="Margin" TargetName="Content" Value="0,1,0,0"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="TabStripPlacement" Value="Left"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Margin" Value="-2,-2,-1,-2"/>
                                <Setter Property="Margin" TargetName="Content" Value="0,0,1,0"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="TabStripPlacement" Value="Right"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Margin" Value="-1,-2,-2,-2"/>
                                <Setter Property="Margin" TargetName="Content" Value="1,0,0,0"/>
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemDisabledBackground}"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemDisabledBorderBrush}"/>
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>

    <Grid x:Name="LayoutRoot">
        <TabControl Background="Beige" HorizontalAlignment="Left" VerticalAlignment="Top" Width="500" Height="300">
            <TabItem Header="TabItem">
                <Grid/>
            </TabItem>
            <TabItem Header="TabItem">
                <Grid/>
            </TabItem>
        </TabControl>
    </Grid>
</Window>