Customizing the Tree View Control With Skinning
The Tree View can be skinned using the standard Silverlight 2 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="Template">
<Setter.Value>
<ControlTemplate TargetType="local:Tree">
<Canvas x:Name="RootElement" Background="#00ffffff">
<ContentControl x:Name="ElementWrapper">
<ScrollViewer x:Name="ElementContainer" Background="#ffffff">
<Canvas x:Name="ElementChildren" VerticalAlignment="Top" HorizontalAlignment="Left" />
</ScrollViewer>
</ContentControl>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="local:Node">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:Node">
<Canvas x:Name="RootElement" Background="#00ffffff">
<Canvas.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>
</Canvas.Resources>
<Rectangle x:Name="ElementBackgroundHover" 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" 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>
<Line x:Name="ElementVerticalLine" Stroke="Black" StrokeThickness="0.5" StrokeDashArray="0,1,2,3" StrokeDashOffset="5" StrokeDashCap="Square" />
<Line x:Name="ElementHorizontalLine" Stroke="Black" StrokeThickness="0.5" StrokeDashArray="0,1,2,3" StrokeDashOffset="5" StrokeDashCap="Square" />
<local:Expand x:Name="ElementExpand" />
<Image x:Name="ElementIcon" />
<TextBox x:Name="ElementInput" Padding="1" Visibility="Collapsed" BorderThickness="0.5" />
<TextBlock x:Name="ElementText" Canvas.Top="2" Text="" FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}" FontWeight="{TemplateBinding FontWeight}"
FontStyle="{TemplateBinding FontStyle}" Foreground="{TemplateBinding Foreground}"/>
<TextBlock x:Name="ElementSelectedText" Text="" Canvas.Top="2" Foreground="#000000" Visibility="Collapsed" />
<Canvas x:Name="ElementChildren" Background="#00ffffff" Opacity="0" Visibility="Collapsed">
<Canvas.RenderTransform>
<ScaleTransform x:Name="ElementChildrenScale" ScaleX="1.0" ScaleY="1.0" />
</Canvas.RenderTransform>
</Canvas>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="local:Expand">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:Expand">
<Canvas x:Name="RootElement" Background="#00ffffff" RenderTransformOrigin="0.5,0.5">
<Canvas.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>
</Canvas.Resources>
<Canvas.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="ElementChildrenRotate" Angle="0" />
<ScaleTransform x:Name="ElementChildrenScale" ScaleX="1" ScaleY="1" />
</TransformGroup>
</Canvas.RenderTransform>
<Rectangle x:Name="ElementBackground" StrokeThickness="1" Stroke="#444444" RadiusX="5" RadiusY="5" Width="11" Height="11">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#ffffff" Offset="0.0" />
<GradientStop Color="#eeeeee" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Polygon x:Name="ElementMinus" Points="3,5 8,5 8,6 3,6 3,5" Fill="#000000" Opacity="0.8" />
<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="#000000" Opacity="0.8" />
</Canvas>
</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.
