Customizing the Roller Blind With Styles
The Roller Blind control can be skinned using the standard Silverlight 2 method of setting Styles in the App.xaml file of your Silverlight project.
You need to login to Download the default Roller Blind styles, If you do not have a login you can register for free!
Example of how to Apply a Skin to the Roller Blind
These styles are placed in your XAML and referred to using the Style property:
<Style TargetType="local:RollerBlind">
<Setter Property="Background" Value="#ffffff" />
<Setter Property="BorderBrush" Value="#a4a4a4" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:RollerBlind">
<Canvas x:Name="RootElement" Background="{TemplateBinding Background}">
<Canvas.Resources>
<Storyboard x:Name="ElementOpen" BeginTime="0">
<DoubleAnimation Storyboard.TargetName="ElementTop" Storyboard.TargetProperty="(Canvas.Top)" />
<DoubleAnimation Storyboard.TargetName="ElementBottom" Storyboard.TargetProperty="(Canvas.Top)" />
</Storyboard>
<Storyboard x:Name="ElementClose" BeginTime="0">
<DoubleAnimation Storyboard.TargetName="ElementTop" Storyboard.TargetProperty="(Canvas.Top)" />
<DoubleAnimation Storyboard.TargetName="ElementBottom" Storyboard.TargetProperty="(Canvas.Top)" />
</Storyboard>
</Canvas.Resources>
<Canvas.Clip>
<RectangleGeometry x:Name="ElementClipping" />
</Canvas.Clip>
<ContentPresenter x:Name="ElementContent" />
<ContentPresenter x:Name="ElementTop" Content="{TemplateBinding CoverTop}" />
<ContentPresenter x:Name="ElementBottom" Content="{TemplateBinding CoverBottom}" />
<Border x:Name="ElementBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" />
</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.
