Saturday, 14 February 2009

Styling controls for Silverlight or WPF

In Silverlight and WPF, all standard controls have a default look and feel (or style). In the case of these three buttons, they are the typical grey rounded rectangles that most people are familiar with.

As you can see from the XAML below, the only formatting provided relates to height, width and content. Everything else is built in.

Like cascading style sheets (CSS) for HTML, styles can be defined in XAML that can be applied to controls such as buttons.

As you can see from the style element below, styles are essentially a property bag. In other words a list of properties and corresponding values.

Here I have defined a style with it's Key set to RedButtonStyle that is meant to be applied to controls of type Button.

Properties such as Background and Foreground colours are set, so too are FontFamily and FontSize.
The style is defined in the Resources section of a Silverlight UserControl. However, it could just as easily have been defined in app.xaml and therefore be available to the entire application.

Once defined, a style can be applied to multiple controls of the appropriate type.

Here we have the same three buttons that have had their Style property set to the static resource called RedButtonStyle.

As you can see, they all have their Background, Foreground, BorderBrush, FontFamily and so on set to the same values.

They have been 'styled'.
You can of course define styles by typing the XAML directly but there are tools that will do much of the work for you.

For example, styles can be defined and applied very easily with Microsoft Expression Blend. A future tutorial will show you how.

I have recorded this tutorial as a video. You can watch it here.


Should you require any training in Silverlight, QA offer the following courses:

Developing Rich Internet Applications Using Microsoft Silverlight 4

Developing Silverlight Applications with Visual Studio 2010 and Expression Blend 4

See you soon

Phil Stirpé
"I don't do average!"

No comments:

Post a Comment