Customizing the Viewer With Styles
The Viewer 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 Viewer styles, If you do not have a login you can register for free!
Example of how to Apply a Skin to the Viewer
These styles are placed in your XAML and referred to using the Style property:
<Style TargetType="local:Viewer">
<Setter Property="Background" Value="#ffffff" />
<Setter Property="BorderBrush" Value="#a4a4a4" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="SliderBackground">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#cc888888" Offset="0.0" />
<GradientStop Color="#ccaaaaaa" Offset="1.0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="SliderBorderBrush" Value="#cc888888" />
<Setter Property="SliderBorderThickness" Value="1" />
<Setter Property="SliderCornerRadius" Value="10" />
<Setter Property="Minimum" Value="0.05" />
<Setter Property="Maximum" Value="5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:Viewer">
<Canvas x:Name="RootElement">
<Canvas.Resources>
<Storyboard x:Name="ElementFadeOut" BeginTime="0">
<DoubleAnimation Storyboard.TargetName="ElementSliderGrid" Storyboard.TargetProperty="Opacity" From="1.0" To="0.3" Duration="0:0:0.3"/>
</Storyboard>
<Storyboard x:Name="ElementFadeIn" BeginTime="0">
<DoubleAnimation Storyboard.TargetName="ElementSliderGrid" Storyboard.TargetProperty="Opacity" From="0.3" To="1.0" Duration="0:0:0.3"/>
</Storyboard>
</Canvas.Resources>
<ScrollViewer x:Name="ElementContainer" Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Canvas x:Name="ElementChildren">
<Canvas.RenderTransform>
<ScaleTransform x:Name="ElementScale" />
</Canvas.RenderTransform>
<ContentPresenter x:Name="ElementContent" />
</Canvas>
</ScrollViewer>
<Grid x:Name="ElementSliderGrid" Opacity="0.3">
<Rectangle Width="Auto" Height="Auto" RadiusX="{TemplateBinding SliderCornerRadius}" RadiusY="{TemplateBinding SliderCornerRadius}" Fill="{TemplateBinding SliderBackground}" Stroke="{TemplateBinding SliderBorderBrush}" StrokeThickness="{TemplateBinding SliderBorderThickness}" />
<Slider x:Name="ElementSliderX" Width="Auto" Height="Auto" SmallChange="10" Margin="2" Maximum="{TemplateBinding Maximum}" Minimum="{TemplateBinding Minimum}" Orientation="Horizontal" />
</Grid>
</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.
