Wahlin on .NET
Adding Style to Silverlight 2 Controls
Just make sure to avoid duplicating properties between controls, and everyone will be happy.
Silverlight 2 provides a nice set of controls that can be used to capture and
display data. While control properties can be set directly on the control in
a XAML file using attributes, some properties will be duplicated between controls,
causing maintenance headaches. Here's one example of this problem:
<Button x:Name="btnSubmit" FontFamily="Arial"
FontWeight="Bold" Width="100" Height="25" Margin="10" />
<Button x:Name="btnCancel" FontFamily="Arial"
FontWeight="Bold" Width="100" Height="25"
Margin="10" />
Notice that both Button controls define the same values for FontFamily, FontWeight,
Width, Height and Margin properties. Although this XAML works fine, you'll want
to encapsulate repeated properties into re-useable styles so that you can apply
them to any Button quickly and easily.
It's really the same concept used in Web pages; developers create CSS stylesheets
to encapsulate styles into re-useable classes that can be applied to various
elements. The same overall process can be used in Silverlight 2 applications.
Silverlight 2 allows styles to be defined in several resource sections, including
within a control, within a UserControl or within App.xaml's application resources
section. While styles can be defined in the UserControl.Resources section of
a Page.xaml file, re-useable styles that may be used across multiple XAML files
should be placed in the App.xaml file within the Application.Resources section.
Silverlight 2 projects add an App.xaml file that contains this
default XAML code.
Control styles can be placed in the Application.Resources element. Styles are
defined using the Style element as shown next. Style defines the style's key
as well as the type of control that it targets:
<Style x:Key="ButtonStyle" TargetType="Button">
</Style>
This example defines a style that has a key of ButtonStyle. The style can only
be applied to Button controls. Styles are defined by using a Setter element
which contains Property and Value attributes. An example of converting all of
the repeated attributes shown earlier on the Button controls into a re-useable
style is shown here:
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="FontFamily" Value="Arial" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="25" />
<Setter Property="Margin" Value="5,10,0,10" />
</Style>
In addition to defining styles within App.xaml, you can also define them within
a UserControl.Resources section in cases where the style is only used within
the scope of the UserControl:
<UserControl.Resources>
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="FontFamily" Value="Arial" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="25" />
<Setter Property="Margin" Value="5,10,0,10" />
</Style>
</UserControl.Resources>
Once a style has been defined, it can be applied to a control by using the
Style attribute. Because styles are statically defined within a resources section,
they can be referenced using the StaticResource keyword. Here's
an example of applying the ButtonStyle shown earlier to two buttons.
This is equivalent to assigning a CSS class to an HTML element's style attribute,
and allows the two buttons to pick up the ButtonStyle style without having to
define the same properties over and over.
In the next article, I'll show another interesting aspect of Silverlight 2
styles related to custom templates and show how they can be used to completely
customize the look and feel of a control.
About the Author
Dan Wahlin (Microsoft MVP for ASP.NET and XML Web Services) is the founder of The Wahlin Group which specializes in .NET and SharePoint onsite, online and video training and consulting solutions. Dan also founded the XML for ASP.NET Developers Web site, which focuses on using ASP.NET, XML, AJAX, Silverlight and Web Services in Microsoft's .NET platform. He's also on the INETA Speaker's Bureau and speaks at conferences and user groups around the world. Dan has written several books on .NET including "Professional Silverlight 2 for ASP.NET Developers," "Professional ASP.NET 3.5 AJAX, ASP.NET 2.0 MVP Hacks and Tips," and "XML for ASP.NET Developers." Read Dan's blog here.