WPF Tab Control: настройка цвета вкладки?

Question

У меня есть TabControl в моем приложении WPF, которое использует цвета по умолчанию для элемента управления вкладки WPF. Другими словами, активная вкладка белого цвета, а неактивные вкладки серебристого цвета. Я изменил цвет Background всех страниц вкладок на Бежевый, установив свойство Background объекта TabControl, но он не меняет цвет вкладки, только клиентскую область. Итак, я получил активную вкладку с бежевой клиентской областью и белой вкладкой.

Я бы хотел установить вкладку 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 с относительным источником.В этом случае относительный источник - это свойство Background TabControl, в котором находится TabItem.В результате при установке свойства Background для TabControl цвет будет перетекать в область вкладок всех элементов управления 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>