Définition de la couleur d'arrière-plan des onglets inactif de WPF TabControl

Question

Existe-t-il un moyen simple de définir le style de fond de tous les onglets inactifs d'un onglet WPF TabControl? Je veux émuler l'apparence de VS 2010 sur un TabControl - la couleur d'arrière-plan des onglets inactifs du contrôle doit correspondre à la couleur d'arrière-plan de la fenêtre dans laquelle TabControl est situé, de sorte que vous voyez seulement le texte de l'onglet, et non l'onglet lui-même.

Je sais qu'il faudra un ControlTemplate pour le faire; J'essaie de comprendre ce qu'il faut mettre dans le modèle de contrôle. En d'autres termes, comment spécifier qu'un pinceau particulier doit être appliqué à tous les onglets inactifs? Merci de votre aide.

Answer 1

Oui. Définissez les pinceaux, puis dans votre style pour l'onglet, ayez un déclencheur pour son état actif, et quand il est ACTIF, réglez-le sur un pinceau, et lorsque le déclencheur se déclenche parce qu'il est inactif, réglez-le sur l'autre.

Ceci peut être fait entièrement dans le XAML.

Answer 2

Voici la solution: Comme l'a dit Stephen, ajoutez un déclencheur au modèle de contrôle. C'est en fait un déclencheur de propriété, et il n'a besoin que d'être défini pour l'état inactif. Nous avons donc défini le déclencheur pour IsSelected = false. Nous ciblons la bordure (Bd dans le modèle de contrôle par défaut pour un TabItem) du TabItem et définissons son Background à la couleur souhaitée (j'utilise RelativeSource FindAncestor pour correspondre à la grille sur laquelle l'onglet est placé). Ensuite, nous avons mis Bd « s BorderThickness-0, et nous avons terminé:

<Trigger Property="IsSelected" Value="false"> 
    <Setter Property="Background" TargetName="Bd" Value="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}}"/> 
    <Setter Property="BorderThickness" TargetName="Bd" Value="0" /> 
</Trigger> 

je mets le déclencheur dans le modèle par défaut, juste en dessous du IsSelected = true déclencheur.

Notez que le déclencheur est codé en dur pour rechercher un ancêtre Grid comme source de la couleur d'arrière-plan de l'onglet inactif (AncestorType={x:Type Grid}). C'est parce que je définis mon arrière-plan de vue dans le Grid que j'utilise comme ma racine de mise en page. Vous devrez modifier le AncestorType si vous utilisez un autre contrôle racine de mise en page ou si vous définissez la couleur d'arrière-plan de votre vue ailleurs (par exemple, dans la balise <Window>).

BTW, vous pouvez également utiliser le IsSelected = true déclencheur pour changer le Background de l'en-tête de l'onglet actif du blanc, pour correspondre à la couleur de fond TabControl:

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

Pour ceux qui aiment cette représentation visuelle , voici le modèle de contrôle complet. Il sera appliqué automatiquement à tout TabControl dans son champ d'application. Ajoutez simplement ce balisage à la section de votre fenêtre XAML (ou importez-la à partir d'un ResourceDictionary), et votre TabControl obtiendra le look VS 2010. N'oubliez pas de modifier la propriété FindAncestor afin que le modèle trouve la couleur d'arrière-plan correcte.

<!-- Styles for FS TabItem Control Template--> 
<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"/> 

<!-- FS TabItem Control Template--> 
<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> 
        <Trigger Property="IsSelected" Value="false"> 
         <Setter Property="Background" TargetName="Bd" Value="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}}"/> 
         <Setter Property="BorderThickness" TargetName="Bd" Value="0" /> 
        </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>