Как изменить стиль ItemTemplate WPC TabControl так, чтобы я мог установить цвет фона вкладки заголовков?

Question

Я использую свойство ItemTemplate WPC TabControl для связывания содержимого каждого заголовка TabItem. Я также использую свойство ItemContainerStyle, чтобы настроить содержимое TabItem на динамически выбранный пользовательский элемент управления. Этот метод работает на 100%, как и ожидалось, но теперь у меня возникают проблемы с стилем заголовка TabControl.

Я поставил фоновое свойство TabControl к черному:

<TabControl 
     ItemsSource="{Binding Tabs.Tabs}" 
     SelectedItem="{Binding Tabs.SelectedTab, Mode=TwoWay}" 
     IsEnabled="{Binding ReadyForInput}" 
     Background="Black" 
     x:Name="MainTab"> 
     <TabControl.ItemTemplate> 
      <DataTemplate> 
       <StackPanel 
        Orientation="Horizontal">      
        <TextBlock 
         Text="{Binding TabHeader}" 
         VerticalAlignment="Center" 
         HorizontalAlignment="Center" /> 
       </StackPanel> 
      </DataTemplate> 
     </TabControl.ItemTemplate> 
     <TabControl.ItemContainerStyle> 
      <Style 
       TargetType="TabItem"> 
       <Setter 
        Property="Content" 
        Value="{Binding TabContentControl}" /> 
      </Style> 
     </TabControl.ItemContainerStyle> 
    </TabControl> 

Это приводит к: The TabItem has a black background, but the header stays the same.

Если я установить цвет фона StackPanel в ItemTemplate, я остался с this.

Как изменить цвет фона (стиль) заголовка TabItems, когда TabControl связан как он есть?

Спасибо!

Answer 1

Установите свойства фона в вашем ItemContainerStyle:

<TabControl.ItemContainerStyle> 
    <Style TargetType="TabItem"> 
     <Setter Property="Background" Value="Black" /> 
     <Setter Property="Content" Value="{Binding TabContentControl}" /> 
    </Style> 
</TabControl.ItemContainerStyle> 

Изменение цвета фона вкладки требует больше усилий. Вам необходимо переопределить контрольную таблицу TabItem. Вы можете скопировать шаблон по умолчанию в вашей XAML разметке, щелкнув правой кнопкой мыши на TabItem в режиме разработки в Visual Studio или Blend, и выберите Редактировать template-> Редактировать Копировать, а затем измените его в соответствии с вашими требованиями:

<TabControl ItemsSource="{Binding Tabs.Tabs}" Background="Black" x:Name="MainTab"> 
    <TabControl.Resources> 
     <Style x:Key="FocusVisual"> 
      <Setter Property="Control.Template"> 
       <Setter.Value> 
        <ControlTemplate> 
         <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <LinearGradientBrush x:Key="TabItem.Static.Background" EndPoint="0,1" StartPoint="0,0"> 
      <GradientStop Color="#F0F0F0" Offset="0.0"/> 
      <GradientStop Color="#E5E5E5" Offset="1.0"/> 
     </LinearGradientBrush> 
     <SolidColorBrush x:Key="TabItem.Static.Border" Color="#ACACAC"/> 
     <LinearGradientBrush x:Key="TabItem.MouseOver.Background" EndPoint="0,1" StartPoint="0,0"> 
      <GradientStop Color="#ECF4FC" Offset="0.0"/> 
      <GradientStop Color="#DCECFC" Offset="1.0"/> 
     </LinearGradientBrush> 
     <SolidColorBrush x:Key="TabItem.MouseOver.Border" Color="#7EB4EA"/> 
     <SolidColorBrush x:Key="TabItem.Disabled.Background" Color="#F0F0F0"/> 
     <SolidColorBrush x:Key="TabItem.Disabled.Border" Color="#D9D9D9"/> 
     <SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/> 
     <SolidColorBrush x:Key="TabItem.Selected.Background" Color="Black"/> 
    </TabControl.Resources> 
    <TabControl.ItemTemplate> 
     <DataTemplate> 
      <StackPanel Orientation="Horizontal"> 
       <TextBlock 
         Text="header..." 
         VerticalAlignment="Center" 
         HorizontalAlignment="Center" /> 
      </StackPanel> 
     </DataTemplate> 
    </TabControl.ItemTemplate> 
    <TabControl.ItemContainerStyle> 
     <Style TargetType="TabItem"> 
      <Setter Property="Background" Value="Black" /> 
      <Setter Property="Content" Value="{Binding TabContentControl}" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type TabItem}"> 
         <Grid x:Name="templateRoot" SnapsToDevicePixels="true"> 
          <Border x:Name="mainBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Background="{TemplateBinding Background}" Margin="0"> 
           <Border x:Name="innerBorder" BorderBrush="{StaticResource TabItem.Selected.Border}" BorderThickness="1,1,1,0" Background="{StaticResource TabItem.Selected.Background}" Margin="-1" Opacity="0"/> 
          </Border> 
          <ContentPresenter x:Name="contentPresenter" ContentSource="Header" Focusable="False" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/> 
         </Grid> 
         <ControlTemplate.Triggers> 
          <MultiDataTrigger> 
           <MultiDataTrigger.Conditions> 
            <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/> 
            <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/> 
           </MultiDataTrigger.Conditions> 
           <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Background}"/> 
           <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Border}"/> 
           <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/> 
           <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/> 
          </MultiDataTrigger> 
          <MultiDataTrigger> 
           <MultiDataTrigger.Conditions> 
            <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/> 
            <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/> 
           </MultiDataTrigger.Conditions> 
           <Setter Property="Opacity" TargetName="contentPresenter" Value="0.56"/> 
           <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Background}"/> 
           <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Border}"/> 
           <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/> 
           <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/> 
          </MultiDataTrigger> 
          <MultiDataTrigger> 
           <MultiDataTrigger.Conditions> 
            <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/> 
            <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/> 
           </MultiDataTrigger.Conditions> 
           <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/> 
           <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/> 
          </MultiDataTrigger> 
          <MultiDataTrigger> 
           <MultiDataTrigger.Conditions> 
            <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/> 
            <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/> 
           </MultiDataTrigger.Conditions> 
           <Setter Property="Panel.ZIndex" Value="1"/> 
           <Setter Property="Margin" Value="-2,-2,-2,0"/> 
           <Setter Property="Opacity" TargetName="innerBorder" Value="1"/> 
           <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/> 
           <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/> 
          </MultiDataTrigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </TabControl.ItemContainerStyle> 
</TabControl>