TabControl ControlTemplate Example

TabControl ControlTemplate Example

Collapse All

Language Filter

This page is specific to

Microsoft Visual Studio 2008/.NET Framework 3.5

Other versions are also available for the following:

Windows Presentation Foundation

TabControl ControlTemplate Example

Controls in Windows Presentation Foundation (WPF) have a ControlTemplate that contains the visual tree of that control. You can change the structure and appearance of a control by modifying the ControlTemplate of that control. There is no way to replace only part of the visual tree of a control; to change the visual tree of a control you must set the Template property of the control to its new and complete ControlTemplate.

This topic shows the ControlTemplate of the WPF TabControl control.

This topic contains the following sections.

Prerequisites
TabControl ControlTemplate Example
Related Topics

Prerequisites

To run the examples in this topic, you should understand how to write WPF applications. For more information, see Getting Started with Windows Presentation Foundation. You should also understand how styles are used in WPF. For more information, see Styling and Templating.

TabControl ControlTemplate Example

Although this example contains all of the elements that are defined in the ControlTemplate of a TabControl by default, the specific values should be thought of as examples.

XAML

<Style  TargetType="{x:Type TabControl}">
  <Setter Property="OverridesDefaultStyle" Value="True" />
  <Setter Property="SnapsToDevicePixels" Value="True" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TabControl}">
        <Grid KeyboardNavigation.TabNavigation="Local">
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
          </Grid.RowDefinitions>
          <TabPanel 
            Name="HeaderPanel"
            Grid.Row="0"
            Panel.ZIndex="1" 
            Margin="0,0,4,-1" 
            IsItemsHost="True"
            KeyboardNavigation.TabIndex="1"
            Background="Transparent" />
          <Border 
            Name="Border" 
            Grid.Row="1" 
            Background="{StaticResource WindowBackgroundBrush}" 
            BorderBrush="{StaticResource SolidBorderBrush}" 
            BorderThickness="1" 
            CornerRadius="2" 
            KeyboardNavigation.TabNavigation="Local"
            KeyboardNavigation.DirectionalNavigation="Contained"
            KeyboardNavigation.TabIndex="2" >
            <ContentPresenter 
              Name="PART_SelectedContentHost"
              Margin="4"
              ContentSource="SelectedContent" />
          </Border>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

The preceding example uses the following resources.

XAML

<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />


...


<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />


...


<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />


...


<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />

For the complete sample, see Styling with ControlTemplates Sample.

Concepts

Guidelines for Designing Stylable Controls

TabItem ControlTemplate Example

Other Resources

ControlTemplate Examples