Share via


TreeView Styles and Templates

Microsoft Silverlight will reach end of support after October 2021. Learn more.

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 Using a ControlTemplate.

TreeViewParts

The TreeView control does not have any named parts.

TreeView States

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

VisualState Name

VisualStateGroup Name

Description

Normal

CommonStates

The default state.

MouseOver

CommonStates

The mouse pointer is positioned over the TreeView.

Pressed

CommonStates

The TreeView is pressed.

Disabled

CommonStates

The TreeView is disabled.

Focused

FocusStates

The TreeView has focus.

Unfocused

FocusStates

The TreeView does not have focus.

Valid

ValidationStates

The control is valid.

InvalidFocused

ValidationStates

The control is not valid and has focus.

InvalidUnfocused

ValidationStates

The control is not valid and does not have focus.

TreeViewItem Parts

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

Part

Type

Description

Header

FrameworkElement

A visual element that contains that header text of the TreeView control.

ExpanderButton

ToggleButton

A ToggleButton that is used to expand the TreeView control.

TreeViewItem States

The following table lists the visual states for TreeViewItem control.

VisualState Name

VisualStateGroup Name

Description

Normal

CommonStates

The default state.

MouseOver

CommonStates

The mouse pointer is positioned over the TreeViewItem.

Pressed

CommonStates

The TreeViewItem is pressed.

Disabled

CommonStates

The TreeViewItem is disabled.

Focused

FocusStates

The TreeViewItem has focus.

Unfocused

FocusStates

The TreeViewItem does not have focus.

Expanded

ExpansionStates

The TreeViewItem control is expanded.

Collapsed

ExpansionStates

The TreeViewItem control is collapsed.

HasItems

HasItemsStates

The TreeViewItem has items.

NoItems

HasItemsStates

The TreeViewItem does not have items.

Selected

SelectionStates

The TreeViewItem is selected.

SelectedInactive

SelectionStates

The TreeViewItem is selected but not active.

Unselected

SelectionStates

The TreeViewItem is not selected.

TreeView Style Properties

The following table lists the Style properties of the TreeView control. You must set the TargetType property when you create a Style.

Property Name

Target Type

Description

ItemContainerStyle

TreeViewItem

The style applied to the TreeViewItem that contains the items.

Default Style and Template

The following shows the XML namespace mappings that you have to specify when you work with styles and templates.

<!-- XML Name Space mappings. -->
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
Important noteImportant Note:

The default templates for controls in Silverlight 4 still use the Silverlight 3-style prefixes, such as controls: and data: instead of sdk:. This is because the default control templates support Silverlight 3 and Silverlight 4 simultaneously. For more information, see Prefixes and Mappings for Silverlight Libraries.

NoteNote:

The default templates still specify the vsm: XML namespace mapping for the VisualStateManager element for legacy reasons. You can however, use the VisualStateManager element without specifying the vsm: mapping.

The following XAML shows the default style and template for TreeView and TreeViewItem controls.

<Style TargetType="controls:TreeView">
    <Setter Property="Background" Value="#FFFFFFFF" />
    <Setter Property="Foreground" Value="#FF000000" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Top" />
    <Setter Property="Cursor" Value="Arrow" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Padding" Value="1" />
    <Setter Property="BorderBrush" Value="#FF000000" />
    <Setter Property="IsTabStop" Value="True" />
    <Setter Property="TabNavigation" Value="Once" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controls:TreeView">
                <Grid>
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Normal" />
                            <vsm:VisualState x:Name="MouseOver" />
                            <vsm:VisualState x:Name="Pressed" />
                            <vsm:VisualState x:Name="Disabled" />
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="FocusStates">
                            <vsm:VisualState x:Name="Unfocused" />
                            <vsm:VisualState x:Name="Focused" />
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="ValidationStates">
                            <vsm:VisualState x:Name="Valid" />
                            <vsm:VisualState x:Name="InvalidUnfocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Validation" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="InvalidFocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Validation" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationToolTip" Storyboard.TargetProperty="IsOpen">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <system:Boolean>True</system:Boolean>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>

                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
                        <Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" Margin="1">
                            <ScrollViewer x:Name="ScrollViewer" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Background="{x:Null}" BorderBrush="Transparent" BorderThickness="0" IsTabStop="False" TabNavigation="Once">
                                <ItemsPresenter Margin="5" />
                            </ScrollViewer>
                        </Border>
                    </Border>

                    <Border x:Name="Validation" Grid.Column="1" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="#FFDB000C" CornerRadius="2" Visibility="Collapsed">
                        <ToolTipService.ToolTip>
                            <ToolTip x:Name="ValidationToolTip" Template="{StaticResource CommonValidationToolTipTemplate}" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" IsHitTestVisible="True" />
                        </ToolTipService.ToolTip>
                        <Grid Width="10" Height="10" HorizontalAlignment="Right" Margin="0,-4,-4,0" VerticalAlignment="Top" Background="Transparent">
                            <Path Margin="-1,3,0,0" Fill="#FFDC000C" Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 Z" />
                            <Path Margin="-1,3,0,0" Fill="#FFFFFFFF" Data="M 0,0 L2,0 L 8,6 L8,8" />
                        </Grid>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style TargetType="controls:TreeViewItem">
    <Setter Property="Padding" Value="3" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Top" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Cursor" Value="Arrow" />
    <Setter Property="IsTabStop" Value="True" />
    <Setter Property="TabNavigation" Value="Once" />
    <Setter Property="Margin" Value="0 1 0 0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controls:TreeViewItem">
                <Grid Background="{x:Null}">
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Normal" />
                            <vsm:VisualState x:Name="MouseOver" />
                            <vsm:VisualState x:Name="Pressed" />
                            <vsm:VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="Foreground" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <SolidColorBrush Color="#FF999999" />
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="SelectionStates">
                            <vsm:VisualState x:Name="Unselected" />
                            <vsm:VisualState x:Name="Selected">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="Selection" Storyboard.TargetProperty="Opacity" Duration="0" To=".75" />
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="SelectedInactive">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="Selection" Storyboard.TargetProperty="Opacity" Duration="0" To=".2" />
                                    <ColorAnimation Storyboard.TargetName="SelectionFill" Storyboard.TargetProperty="Color" Duration="0" To="#FF999999" />
                                    <ColorAnimation Storyboard.TargetName="SelectionStroke" Storyboard.TargetProperty="Color" Duration="0" To="#FF333333" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="HasItemsStates">
                            <vsm:VisualState x:Name="HasItems" />
                            <vsm:VisualState x:Name="NoItems">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="Visibility" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="ExpansionStates">
                            <vsm:VisualState x:Name="Collapsed" />
                            <vsm:VisualState x:Name="Expanded">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsHost" Storyboard.TargetProperty="Visibility" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="ValidationStates">
                            <vsm:VisualState x:Name="Valid" />
                            <vsm:VisualState x:Name="InvalidUnfocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Validation" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="InvalidFocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Validation" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationToolTip" Storyboard.TargetProperty="IsOpen">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <system:Boolean>True</system:Boolean>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="15" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <ToggleButton x:Name="ExpanderButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsTabStop="False" TabNavigation="Once">
                        <ToggleButton.Template>
                            <ControlTemplate TargetType="ToggleButton">
                                <Grid x:Name="Root" Background="Transparent">
                                    <vsm:VisualStateManager.VisualStateGroups>
                                        <vsm:VisualStateGroup x:Name="CommonStates">
                                            <vsm:VisualState x:Name="Normal" />
                                            <vsm:VisualState x:Name="MouseOver">
                                                <Storyboard>
                                                    <ColorAnimation Storyboard.TargetName="UncheckedVisual" Storyboard.TargetProperty="(Path.Stroke).Color" To="#FF1BBBFA" Duration="0" />
                                                </Storyboard>
                                            </vsm:VisualState>
                                            <vsm:VisualState x:Name="Disabled">
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To=".7" Duration="0" />
                                                </Storyboard>
                                            </vsm:VisualState>
                                        </vsm:VisualStateGroup>
                                        <vsm:VisualStateGroup x:Name="CheckStates">
                                            <vsm:VisualState x:Name="Unchecked" />
                                            <vsm:VisualState x:Name="Checked">
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetName="UncheckedVisual" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
                                                    <DoubleAnimation Storyboard.TargetName="CheckedVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                                </Storyboard>
                                            </vsm:VisualState>
                                        </vsm:VisualStateGroup>
                                    </vsm:VisualStateManager.VisualStateGroups>
                                    <Grid HorizontalAlignment="Right" Margin="2 2 5 2">
                                        <Path x:Name="UncheckedVisual" Width="6" Height="9" Fill="#FFFFFFFF" VerticalAlignment="Center" HorizontalAlignment="Right" Data="M 0,0 L 0,9 L 5,4.5 Z" StrokeThickness="1" StrokeLineJoin="Miter">
                                            <Path.Stroke>
                                                <SolidColorBrush Color="#FF989898" />
                                            </Path.Stroke>
                                        </Path>
                                        <Path x:Name="CheckedVisual" Opacity="0" Width="6" Height="6" Fill="#FF262626" VerticalAlignment="Center" HorizontalAlignment="Center" Data="M 6,0 L 6,6 L 0,6 Z" StrokeLineJoin="Miter" />
                                    </Grid>
                                </Grid>
                            </ControlTemplate>
                        </ToggleButton.Template>
                    </ToggleButton>
                    <Rectangle x:Name="Selection" Grid.Column="1" Opacity="0" StrokeThickness="1" IsHitTestVisible="False" RadiusX="2" RadiusY="2">
                        <Rectangle.Fill>
                            <SolidColorBrush x:Name="SelectionFill" Color="#FFBADDE9" />
                        </Rectangle.Fill>
                        <Rectangle.Stroke>
                            <SolidColorBrush x:Name="SelectionStroke" Color="#FF6DBDD1" />
                        </Rectangle.Stroke>
                    </Rectangle>
                    <Button x:Name="Header" Grid.Column="1" ClickMode="Hover" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" IsTabStop="False" TabNavigation="Once">
                        <Button.Template>
                            <ControlTemplate TargetType="Button">
                                <Grid Background="{TemplateBinding Background}">
                                    <vsm:VisualStateManager.VisualStateGroups>
                                        <vsm:VisualStateGroup x:Name="CommonStates">
                                            <vsm:VisualState x:Name="Normal" />
                                            <vsm:VisualState x:Name="Pressed">
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetName="Hover" Storyboard.TargetProperty="Opacity" Duration="0" To=".5" />
                                                </Storyboard>
                                            </vsm:VisualState>
                                            <vsm:VisualState x:Name="Disabled">
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity" Duration="0" To=".55" />
                                                </Storyboard>
                                            </vsm:VisualState>
                                        </vsm:VisualStateGroup>
                                    </vsm:VisualStateManager.VisualStateGroups>
                                    <Rectangle x:Name="Hover" Opacity="0" Fill="#FFBADDE9" Stroke="#FF6DBDD1" StrokeThickness="1" IsHitTestVisible="False" RadiusX="2" RadiusY="2" />
                                    <ContentPresenter x:Name="Content" Cursor="{TemplateBinding Cursor}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" />
                                </Grid>
                            </ControlTemplate>
                        </Button.Template>
                        <Button.Content>
                            <ContentPresenter Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" />
                        </Button.Content>
                    </Button>

                    <Border x:Name="Validation" Grid.Column="1" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="#FFDB000C" CornerRadius="2" Visibility="Collapsed">
                        <ToolTipService.ToolTip>
                            <ToolTip x:Name="ValidationToolTip" Template="{StaticResource CommonValidationToolTipTemplate}" Placement="Right" PlacementTarget="{Binding ElementName=Header}" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" IsHitTestVisible="True" />
                        </ToolTipService.ToolTip>
                        <Grid Width="10" Height="10" HorizontalAlignment="Right" Margin="0,-4,-4,0" VerticalAlignment="Top" Background="Transparent">
                            <Path Margin="-1,3,0,0" Fill="#FFDC000C" Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 Z" />
                            <Path Margin="-1,3,0,0" Fill="#FFFFFFFF" Data="M 0,0 L2,0 L 8,6 L8,8" />
                        </Grid>
                    </Border>

                    <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Visibility="Collapsed" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The default ControlTemplate for TreeView and TreeViewItem references the ControlTemplate for CommonValidationTooltip. The following XAML shows the ControlTemplate for CommonValidationTooltip that you must specify when you work with the TreeView and TreeViewItem control templates:

<ControlTemplate x:Key="CommonValidationToolTipTemplate" TargetType="ToolTip">
    <Grid x:Name="Root" Margin="5,0" RenderTransformOrigin="0,0" Opacity="0">
        <Grid.RenderTransform>
            <TranslateTransform x:Name="Translation" X="-25" />
        </Grid.RenderTransform>
        <vsm:VisualStateManager.VisualStateGroups>
            <vsm:VisualStateGroup Name="OpenStates">
                <vsm:VisualStateGroup.Transitions>
                    <vsm:VisualTransition GeneratedDuration="0" />
                    <vsm:VisualTransition To="Open" GeneratedDuration="0:0:0.2">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="Translation" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.2">
                                <DoubleAnimation.EasingFunction>
                                    <BackEase Amplitude=".3" EasingMode="EaseOut" />
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                            <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2" />
                        </Storyboard>
                    </vsm:VisualTransition>
                </vsm:VisualStateGroup.Transitions>
                <vsm:VisualState x:Name="Closed">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
                    </Storyboard>
                </vsm:VisualState>
                <vsm:VisualState x:Name="Open">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="Translation" Storyboard.TargetProperty="X" To="0" Duration="0" />
                        <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                    </Storyboard>
                </vsm:VisualState>
            </vsm:VisualStateGroup>
        </vsm:VisualStateManager.VisualStateGroups>

        <Border Margin="4,4,-4,-4" Background="#052A2E31" CornerRadius="5" />
        <Border Margin="3,3,-3,-3" Background="#152A2E31" CornerRadius="4" />
        <Border Margin="2,2,-2,-2" Background="#252A2E31" CornerRadius="3" />
        <Border Margin="1,1,-1,-1" Background="#352A2E31" CornerRadius="2" />

        <Border Background="#FFDC000C" CornerRadius="2">
            <TextBlock UseLayoutRounding="false" Foreground="White" Margin="8,4,8,4" MaxWidth="250" TextWrapping="Wrap" Text="{Binding (Validation.Errors)[0].ErrorContent}" />
        </Border>
    </Grid>
</ControlTemplate>