Monday, January 17, 2011

Theming a Silverlight Application using Existing Themes

There are two ways to apply styles in a Silverlight application: explicit styles and implicit styles. The primary difference between them is that explicit styles have names (x:Key) and are applied to controls by their name. Implicit styles are not named and are applied to controls that don't have an explicit style.
A theme is basically a set of implicit styles that are used to apply a consistent look and interactivity across controls.
NOTE: This post is part of a series that starts with this prior post.
An example of explicit styles is shown below:

<!-- Page ScrollViewer Style -->
<Style x:Key="PageScrollViewerStyle" TargetType="ScrollViewer">
 <Setter Property="BorderBrush" Value="Transparent"/>
 <Setter Property="BorderThickness" Value="0,1,0,1"/>
 <Setter Property="Margin" Value="-58,-15,-58,-15"/>
 <Setter Property="Padding" Value="58,0,58,0"/>
 <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
 <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
</Style>
<!-- Content Panel Style -->
<Style x:Key="ContentPanelStyle" TargetType="StackPanel"/>
<!-- Header Text Style -->
<Style x:Key="HeaderTextStyle" TargetType="TextBlock">
 <Setter Property="Foreground"
          Value="{StaticResource BodyTextColorBrush}"/>
 <Setter Property="FontSize" Value="15"/>
 <Setter Property="FontWeight" Value="Bold"/>
 <Setter Property="TextWrapping" Value="Wrap"/>
 <Setter Property="Margin" Value="0,15,0,4"/>
 <Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
The above code defines three explicit styles named PageScrollViewerStyle (for a ScrollViewer), ContentPanelStyle (for a StackPanel), and HeaderTextSTyle (for a TextBlock).

Read more: Deborah's Developer MindScape