Customizing the Tree View Control With Styles
The Tree View can be skinned using the standard Silverlight method of using Styles, the default styles can easily be modified to suite the style of your site.
You need to login to Download the default Tree View styles, If you do not have a login you can register for free!
Example of how to Apply Styles to the Tree View
These styles are placed in your XAML and referred to using the Style property:
<Style TargetType="local:Tree">
<Setter Property="Background" Value="#ffffff" />
<Setter Property="BorderBrush" Value="#a4a4a4" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:Tree">
<Grid x:Name="RootElement" Background="#00ffffff">
<ContentControl x:Name="ElementWrapper">
<ScrollViewer x:Name="ElementContainer" HorizontalAlignment="Stretch" Background="{TemplateBinding Background}" VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}" HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<StackPanel x:Name="ElementChildren" Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="4 0 0 0" />
<Canvas x:Name="ElementDraggingCanvas" VerticalAlignment="Top" HorizontalAlignment="Left">
<Border x:Name="ElementPlaceHolder" Margin="16 0 0 0" BorderBrush="#e8e8e8" BorderThickness="1" CornerRadius="4">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="#f0f0f0" Offset="0.0" />
<GradientStop Color="#f8f8ff" Offset="1.0" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Rectangle x:Name="ElementDropLine" Height="2" Visibility="Collapsed">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#888888" Offset="0.0" />
<GradientStop Color="#eeeeee" Offset="0.5" />
<GradientStop Color="#888888" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
</Grid>
</ScrollViewer>
</ContentControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="local:Node">
<Setter Property="FontFamily" Value="Arial" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Background" Value="#00ffffff" />
<Setter Property="Foreground" Value="#000000" />
<Setter Property="SelectedForeground" Value="#000000" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:Node">
<StackPanel x:Name="RootElement" Orientation="Vertical">
<StackPanel.Resources>
<Storyboard x:Name="ElementFadeIn" BeginTime="0">
<DoubleAnimation Storyboard.TargetName="ElementChildren" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:0:0.2"/>
<DoubleAnimation Storyboard.TargetName="ElementChildrenScale" Storyboard.TargetProperty="ScaleX" From="0.0" To="1.0" Duration="0:0:0.2"/>
<DoubleAnimation Storyboard.TargetName="ElementChildrenScale" Storyboard.TargetProperty="ScaleY" From="0.0" To="1.0" Duration="0:0:0.2"/>
</Storyboard>
</StackPanel.Resources>
<Grid x:Name="ElementGrid" Background="{TemplateBinding Background}" Width="Auto" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16" MaxWidth="16" />
<ColumnDefinition Width="0" />
<ColumnDefinition Width="18" MaxWidth="18" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle x:Name="ElementBackgroundHover" Grid.Row="0" Grid.Column="3" Margin="0 0 0 1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="1" Stroke="#d8f0fa" RadiusX="2" RadiusY="2" Visibility="Collapsed">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#f8fcfe" Offset="0.0" />
<GradientStop Color="#e8f5fd" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="ElementBackground" Grid.Row="0" Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0 0 0 1" StrokeThickness="1" Stroke="#99defd" RadiusX="2" RadiusY="2" Visibility="Collapsed">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#f6fbfd" Offset="0.0" />
<GradientStop Color="#d5effc" Offset="0.9" />
<GradientStop Color="#e7f5fd" Offset="0.9" />
<GradientStop Color="#e7f5fd" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Canvas Grid.Column="0" Grid.RowSpan="2" HorizontalAlignment="Left" VerticalAlignment="Top">
<Line x:Name="ElementVerticalLine" Stroke="Black" StrokeThickness="0.5" StrokeDashArray="0,1,2,3" StrokeDashOffset="5" StrokeDashCap="Square" />
</Canvas>
<Line x:Name="ElementHorizontalLine" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top" Stroke="Black" StrokeThickness="0.5" StrokeDashArray="0,1,2,3" StrokeDashOffset="5" StrokeDashCap="Square" />
<local:Expand x:Name="ElementExpand" Grid.Column="0" HorizontalAlignment="Left" />
<CheckBox x:Name="ElementCheckbox" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" />
<ContentControl x:Name="ElementIcon" Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Center" />
<TextBox x:Name="ElementInput" Grid.Column="3" HorizontalAlignment="Left" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" Padding="1" Visibility="Collapsed" BorderThickness="0.5" />
<TextBlock x:Name="ElementText" Grid.Column="3" Margin="3 1 4 2" HorizontalAlignment="Left" VerticalAlignment="Center" Text="" FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}" FontWeight="{TemplateBinding FontWeight}"
FontStyle="{TemplateBinding FontStyle}" Foreground="{TemplateBinding Foreground}"/>
<TextBlock x:Name="ElementSelectedText" Grid.Column="3" Margin="3 1 4 2" HorizontalAlignment="Left" VerticalAlignment="Center" Text="" FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}" FontWeight="{TemplateBinding FontWeight}"
FontStyle="{TemplateBinding FontStyle}" Foreground="{TemplateBinding SelectedForeground}" Visibility="Collapsed" />
</Grid>
<StackPanel x:Name="ElementChildren" Orientation="Vertical" HorizontalAlignment="Left" Margin="16 0 0 0" Background="#00ffffff" Opacity="0" Visibility="Collapsed">
<StackPanel.RenderTransform>
<ScaleTransform x:Name="ElementChildrenScale" />
</StackPanel.RenderTransform>
</StackPanel>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="local:Expand">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#ffffff" Offset="0.0" />
<GradientStop Color="#eeeeee" Offset="1.0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="#555555" />
<Setter Property="BorderThickness" Value="0.5" />
<Setter Property="Foreground" Value="#555555" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:Expand">
<Grid x:Name="RootElement" Background="#00ffffff" RenderTransformOrigin="0.5,0.5">
<Grid.Resources>
<Storyboard x:Name="ElementRotate" BeginTime="0">
<DoubleAnimation Storyboard.TargetName="ElementChildrenRotate" Storyboard.TargetProperty="Angle" From="0.0" To="359.0" Duration="0:0:0.5" RepeatBehavior="Forever"/>
<DoubleAnimation Storyboard.TargetName="ElementBackground" Storyboard.TargetProperty="StrokeThickness" From="1.0" To="2.5" Duration="0:0:0.4" RepeatBehavior="Forever" AutoReverse="True"/>
</Storyboard>
<Storyboard x:Name="ElementMouseHover" BeginTime="0">
<DoubleAnimation Storyboard.TargetName="ElementChildrenScale" Storyboard.TargetProperty="ScaleX" From="1.0" To="1.2" Duration="0:0:0.1" />
<DoubleAnimation Storyboard.TargetName="ElementChildrenScale" Storyboard.TargetProperty="ScaleY" From="1.0" To="1.2" Duration="0:0:0.1" />
</Storyboard>
<Storyboard x:Name="ElementMouseLeave" BeginTime="0">
<DoubleAnimation Storyboard.TargetName="ElementChildrenScale" Storyboard.TargetProperty="ScaleX" From="1.2" To="1.0" Duration="0:0:0.1" />
<DoubleAnimation Storyboard.TargetName="ElementChildrenScale" Storyboard.TargetProperty="ScaleY" From="1.2" To="1.0" Duration="0:0:0.1" />
</Storyboard>
</Grid.Resources>
<Grid.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="ElementChildrenRotate" Angle="0" />
<ScaleTransform x:Name="ElementChildrenScale" ScaleX="1" ScaleY="1" />
</TransformGroup>
</Grid.RenderTransform>
<Rectangle x:Name="ElementBackground" StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" RadiusX="{TemplateBinding CornerRadius}" RadiusY="{TemplateBinding CornerRadius}" Width="11" Height="11" />
<Polygon x:Name="ElementMinus" Points="3,5 8,5 8,6 3,6 3,5" Fill="{TemplateBinding Foreground}" />
<Polygon x:Name="ElementPlus" Points="5,3 6,3 6,5 8,5 8,6 6,6 6,8 5,8 5,6 3,6 3,5 5,5 5,3" Fill="{TemplateBinding Foreground}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As you can see, styling is a powerful method of customizing the controls to suite the look and feel of your Silverlight application.