Export (0) Print
Expand All
0 out of 3 rated this helpful - Rate this topic

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

This topic contains the following sections.

Prerequisites

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

TabItem ControlTemplate Example

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

<Style TargetType="{x:Type TabItem}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TabItem}">
        <Grid>
          <Border 
            Name="Border"
            Margin="0,0,-4,0" 
            Background="{StaticResource LightBrush}"
            BorderBrush="{StaticResource SolidBorderBrush}" 
            BorderThickness="1,1,1,1" 
            CornerRadius="2,12,0,0" >
            <ContentPresenter x:Name="ContentSite"
              VerticalAlignment="Center"
              HorizontalAlignment="Center"
              ContentSource="Header"
              Margin="12,2,12,2"
              RecognizesAccessKey="True"/>
          </Border>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="IsSelected" Value="True">
            <Setter Property="Panel.ZIndex" Value="100" />
            <Setter TargetName="Border" Property="Background" Value="{StaticResource WindowBackgroundBrush}" />
            <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
          </Trigger>
          <Trigger Property="IsEnabled" Value="False">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

The above example uses the following resources:

<LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#EEE" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

  ...

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

  ...

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

  ...

<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />

  ...

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

  ...

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

For the complete sample, see Styling with ControlTemplates Sample.

See Also

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.