While I was developing the Solar Shooter game, I wanted to add "control template and skinning support." What is that? Silverlight uses the "WPF-based" UI framework, which means that the appearance is separate from the behavior. This is implemented through Styles and Control Templates. They both provide a central place where you can define the appearance of a control. Basically, Styles change one property of the existing appearance of the control, while ControlTemplates replace the entire appearance.
Styles are very similar to CSS. Styles can be used to customize the default appearance of a control. The Silverlight SDK provides a very clear explanation of styles and is available online. If you are completely new to Styles, read Jesse Liberty's Styles and Templates Tutorial. For example, you can use a Style to make a group of TextBoxes have a yellow background. Styles can be defined wherever you have <Resources> (i.e., control resources, grid resources, UserControl resources, App resources, etc.). Basically, a Style is used to set a collection of properties for a specified type of control.
As a simple example, let's use Styles to apply a green theme to a standard login form. Though this example is very simple, it demonstrates using Styles to change the appearance of multiple controls from one place. If we wanted to reduce the size of the labels to 13 points, we would only have to make that change in one place. We can also feel confident that all of our labels have a similar appearance because they all use the same Style resource.
Here is a screenshot of the form before applying Styles:
Here's the code I used to apply a green theme to change the appearance of controls on this login form. This example uses both named colors and RGB-defined colors to achieve a consistent visual design.
<Grid x:Name="LayoutRoot" Background="White">
<Grid.Resources>
<Style TargetType="TextBlock" x:Key="ColoredTextBlock">
<Setter Property="Foreground" Value="SeaGreen" />
<Setter Property="FontFamily" Value="Verdana" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontStyle" Value="Italic" />
<Setter Property="FontSize" Value="14" />
</Style>
<Style TargetType="TextBox" x:Key="HighlightedTextBox">
<Setter Property="Background" Value="MintCream" />
<Setter Property="Foreground" Value="#164A2D" />
<Setter Property="BorderBrush" Value="#164A2D" />
<Setter Property="FontFamily" Value="Verdana" />
<Setter Property="FontSize" Value="12" />
</Style>
<Style TargetType="Button" x:Key="HighlightedButton">
<Setter Property="Background" Value="SeaGreen" />
<Setter Property="Foreground" Value="#164A2D" />
<Setter Property="FontSize" Value="14" />
</Style>
</Grid.Resources>
<TextBlock Style="{StaticResource ColoredTextBlock}" Margin="10,30,0,0">Username:</TextBlock>
<TextBlock Style="{StaticResource ColoredTextBlock}" Margin="10,65,0,0">Password:</TextBlock>
<TextBox x:Name="UserName" Style="{StaticResource HighlightedTextBox}" Width="100" Height="25" Margin="10,0,0,20" Text="Demo" />
<TextBox x:Name="Password" Style="{StaticResource HighlightedTextBox}" Width="100" Height="25" Margin="10,50,0,0" Text="****" />
<Button x:Name="SubmitButton" Style="{StaticResource HighlightedButton}" Width="60" Height="30" Margin="210,50,0,0" Content="Submit" />
</Grid>
Here's the result of using Styles:
As you can see, Styles are an important Silverlight / WPF concept to know. It might seem confusing if you haven't used them before, but they are really simple once you understand them. Styles are a powerful way of organizing your code, making it easier to maintain, and also help to enforce a consistent appearance across your application(s). Have fun coding with Style!