TreeView Styles and Templates

 

This topic describes the styles and templates for the TreeView control. You can modify the default ControlTemplate to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Creating a ControlTemplate.

The TreeView control does not have any named parts.

When you create a ControlTemplate for an TreeView, your template might contain a ItemsPresenter within a ScrollViewer. (The ItemsPresenter displays each item in the TreeView; the ScrollViewer enables scrolling within the control). If the ItemsPresenter is not the direct child of the ScrollViewer, you must give the ItemsPresenter the name, ItemsPresenter.

The following table lists the visual states for the TreeView control.

VisualState NameVisualStateGroup NameDescription
ValidValidationStatesThe control uses the Validation class and the Validation.HasError attached property is false.
InvalidFocusedValidationStatesThe Validation.HasError attached property is true has the control has focus.
InvalidUnfocusedValidationStatesThe Validation.HasError attached property is true has the control does not have focus.

The following table lists the named parts for the TreeViewItem control.

PartTypeDescription
PART_HeaderFrameworkElementA visual element that contains that header content of the TreeView control.

The following table lists the visual states for TreeViewItem control.

VisualState NameVisualStateGroup NameDescription
NormalCommonStatesThe default state.
MouseOverCommonStatesThe mouse pointer is positioned over the TreeViewItem.
DisabledCommonStatesThe TreeViewItem is disabled.
FocusedFocusStatesThe TreeViewItem has focus.
UnfocusedFocusStatesThe TreeViewItem does not have focus.
ExpandedExpansionStatesThe TreeViewItem control is expanded.
CollapsedExpansionStatesThe TreeViewItem control is collapsed.
HasItemsHasItemsStatesThe TreeViewItem has items.
NoItemsHasItemsStatesThe TreeViewItem does not have items.
SelectedSelectionStatesThe TreeViewItem is selected.
SelectedInactiveSelectionStatesThe TreeViewItem is selected but not active.
UnselectedSelectionStatesThe TreeViewItem is not selected.
ValidValidationStatesThe control uses the Validation class and the Validation.HasError attached property is false.
InvalidFocusedValidationStatesThe Validation.HasError attached property is true has the control has focus.
InvalidUnfocusedValidationStatesThe Validation.HasError attached property is true has the control does not have focus.

The following example shows how to define a ControlTemplate for the TreeView control and its associated types.

  <Style x:Key="{x:Type TreeView}"
         TargetType="TreeView">
    <Setter Property="OverridesDefaultStyle"
            Value="True" />
    <Setter Property="SnapsToDevicePixels"
            Value="True" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
            Value="Auto" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility"
            Value="Auto" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="TreeView">
          <Border Name="Border"
                  CornerRadius="1"
                  BorderThickness="1">
            <Border.BorderBrush>
              <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
            </Border.BorderBrush>
            <Border.Background>
              <SolidColorBrush Color="{DynamicResource ControlLightColor}" />
            </Border.Background>
            <ScrollViewer Focusable="False"
                          CanContentScroll="False"
                          Padding="4">
              <ItemsPresenter />
            </ScrollViewer>
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style x:Key="ExpandCollapseToggleStyle"
         TargetType="ToggleButton">
    <Setter Property="Focusable"
            Value="False" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="ToggleButton">
          <Grid Width="15"
                Height="13"
                Background="Transparent">
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CheckStates">
                <VisualState x:Name="Checked">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                   Storyboard.TargetName="Collapsed">
                      <DiscreteObjectKeyFrame KeyTime="0"
                                              Value="{x:Static Visibility.Hidden}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                   Storyboard.TargetName="Expanded">
                      <DiscreteObjectKeyFrame KeyTime="0"
                                              Value="{x:Static Visibility.Visible}" />
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Unchecked" />
                <VisualState x:Name="Indeterminate" />
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Path x:Name="Collapsed"
                  HorizontalAlignment="Left"
                  VerticalAlignment="Center"
                  Margin="1,1,1,1"
                  Data="M 4 0 L 8 4 L 4 8 Z">
              <Path.Fill>
                <SolidColorBrush Color="{DynamicResource GlyphColor}" />
              </Path.Fill>
            </Path>
            <Path x:Name="Expanded"
                  HorizontalAlignment="Left"
                  VerticalAlignment="Center"
                  Margin="1,1,1,1"
                  Data="M 0 4 L 8 4 L 4 8 Z"
                  Visibility="Hidden">
              <Path.Fill>
                <SolidColorBrush Color="{DynamicResource GlyphColor}" />
              </Path.Fill>
            </Path>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
  <Style x:Key="TreeViewItemFocusVisual">
    <Setter Property="Control.Template">
      <Setter.Value>
        <ControlTemplate>
          <Border>
            <Rectangle Margin="0,0,0,0"
                       StrokeThickness="5"
                       Stroke="Black"
                       StrokeDashArray="1 2"
                       Opacity="0" />
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
  <Style x:Key="{x:Type TreeViewItem}"
         TargetType="{x:Type TreeViewItem}">
    <Setter Property="Background"
            Value="Transparent" />
    <Setter Property="HorizontalContentAlignment"
            Value="{Binding Path=HorizontalContentAlignment,
      RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
    <Setter Property="VerticalContentAlignment"
            Value="{Binding Path=VerticalContentAlignment,
      RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
    <Setter Property="Padding"
            Value="1,0,0,0" />
    <Setter Property="Foreground"
            Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
    <Setter Property="FocusVisualStyle"
            Value="{StaticResource TreeViewItemFocusVisual}" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type TreeViewItem}">
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition MinWidth="19"
                                Width="Auto" />
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto" />
              <RowDefinition />
            </Grid.RowDefinitions>
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="SelectionStates">
                <VisualState x:Name="Selected">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Bd"
                                                  Storyboard.TargetProperty="(Panel.Background).
                      (SolidColorBrush.Color)"
                                                  >
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource SelectedBackgroundColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Unselected" />
                <VisualState x:Name="SelectedInactive">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Bd"
                                                  Storyboard.TargetProperty="(Panel.Background).
                      (SolidColorBrush.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource SelectedUnfocusedColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup x:Name="ExpansionStates">
                <VisualState x:Name="Expanded">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                   Storyboard.TargetName="ItemsHost">
                      <DiscreteObjectKeyFrame KeyTime="0"
                                              Value="{x:Static Visibility.Visible}" />
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Collapsed" />
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <ToggleButton x:Name="Expander"
                          Style="{StaticResource ExpandCollapseToggleStyle}"
                          ClickMode="Press"
                          IsChecked="{Binding IsExpanded, 
              RelativeSource={RelativeSource TemplatedParent}}"/>
            <Border x:Name="Bd"
                    Grid.Column="1"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Padding="{TemplateBinding Padding}">
              <ContentPresenter x:Name="PART_Header"
                                ContentSource="Header"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
            </Border>
            <ItemsPresenter x:Name="ItemsHost"
                            Grid.Row="1"
                            Grid.Column="1"
                            Grid.ColumnSpan="2"
                            Visibility="Collapsed" />
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="HasItems"
                     Value="false">
              <Setter TargetName="Expander"
                      Property="Visibility"
                      Value="Hidden" />
            </Trigger>
            <MultiTrigger>
              <MultiTrigger.Conditions>
                <Condition Property="HasHeader"
                           Value="false" />
                <Condition Property="Width"
                           Value="Auto" />
              </MultiTrigger.Conditions>
              <Setter TargetName="PART_Header"
                      Property="MinWidth"
                      Value="75" />
            </MultiTrigger>
            <MultiTrigger>
              <MultiTrigger.Conditions>
                <Condition Property="HasHeader"
                           Value="false" />
                <Condition Property="Height"
                           Value="Auto" />
              </MultiTrigger.Conditions>
              <Setter TargetName="PART_Header"
                      Property="MinHeight"
                      Value="19" />
            </MultiTrigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

The preceding example uses one or more of the following resources.

  <!--Control colors.-->
  <Color x:Key="WindowColor">#FFE8EDF9</Color>
  <Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
  <Color x:Key="ContentAreaColorDark">#FF7381F9</Color>

  <Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
  <Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
  <Color x:Key="DisabledForegroundColor">#FF888888</Color>

  <Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
  <Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>

  <Color x:Key="ControlLightColor">White</Color>
  <Color x:Key="ControlMediumColor">#FF7381F9</Color>
  <Color x:Key="ControlDarkColor">#FF211AA9</Color>

  <Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
  <Color x:Key="ControlPressedColor">#FF211AA9</Color>


  <Color x:Key="GlyphColor">#FF444444</Color>
  <Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>

  <!--Border colors-->
  <Color x:Key="BorderLightColor">#FFCCCCCC</Color>
  <Color x:Key="BorderMediumColor">#FF888888</Color>
  <Color x:Key="BorderDarkColor">#FF444444</Color>

  <Color x:Key="PressedBorderLightColor">#FF888888</Color>
  <Color x:Key="PressedBorderDarkColor">#FF444444</Color>

  <Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
  <Color x:Key="DisabledBorderDarkColor">#FF888888</Color>

  <Color x:Key="DefaultBorderBrushDarkColor">Black</Color>

  <!--Control-specific resources.-->
  <Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
  <Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
  <Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>

  <Color x:Key="NavButtonFrameColor">#FF3843C4</Color>

  <LinearGradientBrush x:Key="MenuPopupBrush"
                       EndPoint="0.5,1"
                       StartPoint="0.5,0">
    <GradientStop Color="{DynamicResource ControlLightColor}"
                  Offset="0" />
    <GradientStop Color="{DynamicResource ControlMediumColor}"
                  Offset="0.5" />
    <GradientStop Color="{DynamicResource ControlLightColor}"
                  Offset="1" />
  </LinearGradientBrush>

  <LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
                       StartPoint="0,0"
                       EndPoint="1,0">
    <LinearGradientBrush.GradientStops>
      <GradientStopCollection>
        <GradientStop Color="#000000FF"
                      Offset="0" />
        <GradientStop Color="#600000FF"
                      Offset="0.4" />
        <GradientStop Color="#600000FF"
                      Offset="0.6" />
        <GradientStop Color="#000000FF"
                      Offset="1" />
      </GradientStopCollection>
    </LinearGradientBrush.GradientStops>
  </LinearGradientBrush>

For the complete sample, see Styling with ControlTemplates Sample.

Style
ControlTemplate
Control Styles and Templates
Control Customization
Styling and Templating
Customizing the Appearance of an Existing Control by Creating a ControlTemplate

Show: