タブの背景色を設定できるように、WPF TabControlのItemTemplateのスタイルを変更するにはどうすればよいですか？

Question

私はWPF TabControlのItemTemplateプロパティを使用して各TabItemのヘッダーの内容をバインドしています。また、ItemContainerStyleプロパティを使用して、TabItemのコンテンツを動的に選択されたユーザーコントロールに設定しています。このメソッドは期待どおり100％動作していますが、TabControlのヘッダーのスタイリングに問題があります。

私は黒にTabControlののbackgroundプロパティを設定します。

<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.

私はItemTemplateに中のStackPanelの背景色を設定した場合、私はと残されていますthis.

私はTabControlがバインドされているとき、TabItemsのヘッダーの背景色（スタイル）を変更するにはどうすればよいですか？

ありがとうございました！あなたのItemContainerStyleでBackgroundプロパティを設定し

Answer 1

：

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

選択したタブの背景色を変更するには、より多くの努力が必要です。 TabItemのControlTemplateをオーバーライドする必要があります。あなたは、Visual StudioまたはBlendでデザインモードでのTabItemを右クリックして、XAMLマークアップの中に、デフォルトのテンプレートをコピーし、編集鋳型を選択> [コピーを編集して、あなたの要件ごとのように編集することができます

<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>