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.

comments powered by Disqus

Featured

Subscribe on YouTube