Creating a Windows Vista Themed Silverlight Tree
On this page we have customized the default styles of the Liquid TreeView control to give it a Windows Vista look. The example demonstrates customizing the Node and Expand Control, the expand animation is also changed to a more basic fade-in.
You need to login to Download the Vista TreeView example, If you do not have a login you can register for free!
The basic code for node population remains the same, however the XAML is quite different:
<UserControl x:Class="VistaTreeView.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Width="400" Height="400">
<Grid x:Name="LayoutRoot" Background="White" VerticalAlignment="Top" HorizontalAlignment="Left">
<Grid.Resources>
<Style x:Name="VistaLiquidExpand" TargetType="liquid:Expand">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="liquid: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" Visibility="Collapsed" />
<Polygon x:Name="ElementMinus" Points="8,3 8,8 3,8 8,3" Fill="#ff595959" Stroke="#ff262626" StrokeThickness="1" />
<Polygon x:Name="ElementPlus" Points="3,3 7,7 3,11 3,3" Fill="#ffffffff" Stroke="#ffa5a5a5" StrokeThickness="1" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Name="VistaLiquidNode" TargetType="liquid:Node">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="liquid: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.15"/>
</Storyboard>
</Canvas.Resources>
<Rectangle x:Name="ElementBackgroundHover" StrokeThickness="1" Stroke="#d8f0fa" RadiusX="2" RadiusY="2" Cursor="Hand" 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="#FF99DEFD" RadiusX="2" RadiusY="2" Cursor="Hand" Visibility="Collapsed">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#fff6fbfd" Offset="0.0" />
<GradientStop Color="#ffd5effc" Offset="0.9" />
<GradientStop Color="#ffe7f5fd" Offset="0.9" />
<GradientStop Color="#ffe7f5fd" 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" />
<liquid:Expand x:Name="ElementExpand" Cursor="Hand" Style="{StaticResource VistaLiquidExpand}" />
<Image x:Name="ElementIcon" Canvas.Top="0" Cursor="Hand" />
<TextBox x:Name="ElementInput" Padding="2" Visibility="Collapsed" BorderThickness="0.5" />
<TextBlock x:Name="ElementText" Text="" Canvas.Top="2" Cursor="Hand" Foreground="#ff000000" />
<TextBlock x:Name="ElementSelectedText" Text="" Canvas.Top="2" Cursor="Hand" Foreground="#ff000000" Visibility="Collapsed" />
<Canvas x:Name="ElementChildren" Background="#00ffffff" Opacity="0" Visibility="Collapsed" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<liquid:Tree x:Name="testTree" Canvas.Top="295" Canvas.Left="200" Width="300" Height="300" Margin="4" Populate="Tree_Populate" NodeClick="Tree_NodeClick" />
</Grid>
</UserControl>
As you can see from the above XAML we create 2 custom styles (VistaLiquidExpand and VistaLiquidNode) that override the default provided styles. In the Node style we have an instance of the Expand control (liquid:Expand), this contains a style property (Style="{StaticResource VistaLiquidExpand}") that refers to the custom Expand style.