Comment : appliquer un style à un TabControl

Mise à jour : novembre 2007

Cette rubrique indique comment donner un style à un TabControl et aux contrôles d'élément qu'il contient.

Exemple

L'exemple suivant montre des modifications effectuées sur les éléments qui composent le modèle de contrôle du TabControl.

<Style x:Key="{x:Type TabControl}" TargetType="{x:Type TabControl}">
  <Setter Property="BorderThickness" Value="3"/>
  <Setter Property="BorderBrush" Value="Red"/>
  <Setter Property="Background" Value="LightBlue"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="TabControl">
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
          </Grid.RowDefinitions>
          <Border BorderThickness="0,0,1,1" BorderBrush="#D0CEBF" Grid.Row="1">
            <Border BorderThickness="{TemplateBinding BorderThickness}" 
                BorderBrush="{TemplateBinding BorderBrush}">
              <Border Background="{TemplateBinding Background}">
                <ContentPresenter ContentSource="SelectedContent"/>
              </Border>
            </Border>
          </Border>
          <TabPanel Grid.Row="0" IsItemsHost="true"/>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

L'exemple suivant indique comment donner un style à un TabItem utilisé dans le TabControl.

<Style TargetType="TabItem">
  <Setter Property="BorderThickness" Value="3"/>
  <Setter Property="BorderBrush" Value="Red"/>
  <Setter Property="Background" Value="LightBlue"/>
  <Setter Property="VerticalContentAlignment" Value="Center"/>
  <Setter Property="HorizontalContentAlignment" Value="Center"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TabItem}">
        <Border>
          <Grid>
            <Grid>
              <Border CornerRadius="3,3,0,0" Background="{TemplateBinding Background}" 
                   BorderBrush="{TemplateBinding BorderBrush}" 
                   BorderThickness="{TemplateBinding BorderThickness}"/>
            </Grid>
            <Border BorderThickness="{TemplateBinding BorderThickness}" 
                 Padding="{TemplateBinding Padding}">
              <ContentPresenter ContentSource="Header" 
                 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Border>
          </Grid>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Remarque :
Ne liez pas la propriété Content d'un TabItem au ContentPresenter dans un modèle TabItem. Utilisez à la place la propriété ContentTemplate d'un TabControl pour lier le contenu des éléments d'onglet dans le TabControl.

Pour l'exemple complet, consultez TabControl utilisant des modèles de contrôle, exemple.