Практическое руководство. Применение стиля к элементу TabControl

Обновлен: Ноябрь 2007

В этом разделе показано, как применить стиль к элементу TabControl и к элементам управления, которые он содержит.

Пример

В следующем примере показаны изменения элементов, составляющих шаблон элемента управления 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>

В примере показывается, как применить стиль к элементу TabItem, который используется в элементе 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>

Примечание.
Не следует привязывать свойство Content элемента TabItem к свойству ContentPresenter в шаблоне TabItem. Вместо этого следует использовать свойство ContentTemplate элемента TabControl для привязки содержимого элементов вкладки в элементе TabControl.

Полный пример см. в разделе Пример стилизации TabControl с помощью шаблонов элементов управления.