Управление вкладкой WPF: настройка вкладки Цвет?

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

Я разработал решение. Я собираюсь оставить ответ levanovd выбранным как правильный, с признательностью за его помощь.

По существу, исправление представляет собой однострочное изменение шаблона управления TabItem. Начните с копии обычного шаблона управления TabItem и установите шаблон управления для всех элементов управления типа TabItem. Найти IsSelected курок, и изменить его к следующему:

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

Bd является Border управления, который устанавливает границы и фона для вкладки площади TabItem. Эта разметка сообщает WPF привязать свойство BdBackground к относительному источнику. В этом случае относительным источником является свойство BackgroundTabControl, на котором размещается TabItem. В результате, когда вы устанавливаете свойство BackgroundTabControl, цвет будет проходить до области вкладок всех элементов управления 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>