What are Styles?

A style in WPF or Silverlight applications is a means to easily apply a set of one or more properties and/or resources to one or more elements. Using styles, you can create a consistent look and behavior for the element in your user interfaces.

Consider the application shown in Figure 1. It has a rich look and feel.

Figure 1: Rich User Interface

Now you may ask, why should I use styles? I can just as well implement this UI by setting appropriate values to properties such as background and font. What difference is that going to make?

The answer to these questions is given through two words- reuse and consistency. Instead of setting properties say for example 100 times for 100 buttons, you just set them in one place and apply them to 100 buttons. This not only improves productivity and reduces chances of errors but also promotes consistency because all the buttons now look identical. And if you want a few buttons among them to look different, you can do that easily too. You just "opt" them out of the style. Thus, using styles makes sense in several ways.

Elements deriving from FrameworkElement can have a style defined.

Creating Styles

The Style element enables you to create styles. This element has a TargetType attribute that identifies the object to which you will apply the style and a Key attribute to uniquely identify the style. This Key value will be used later with the StaticResource markup extension to apply the style. A Style element contains one or more Setter elements. A Setter element has a Property attribute that specifies the property that the Style is changing and a Value attribute specifying the value for the property.

The following XAML snippet shows a simple example of defining a style:

Here, a style resource named txtStyle is defined which creates a background style that you will apply to objects of type TextBox. The Style contains only one Setter element that sets the Background property. The name of the property is specified through the Property attribute and its value is set through the Value attribute.

To use this style, you will write markup similar to the following:

The outcome of this is that the style named txtStyle is applied to the TextBox. The same style can now be applied to several TextBox objects in your application.

Though the earlier example demonstrated declaring the style within <Grid.Resources></Grid.Resources> tags, you can declare the style within the Resources of any container, as long as it is the parent of the element for which you want to apply the style. Thus, the following markup will not work and will be considered invalid because the style is defined in one container and applied in another container.

This markup will work if the Style is defined within the Grid or the TextBox is defined in the Canvas.

You can define multiple Setter objects within the same style.

The following XAML markup demonstrates an example of this:

When you set a TargetType in a style, the style will be applied only to elements of that type.Thus, even if you apply txtStyle to a RadioButton control, it will not succeed and will result in an exception because the TargetType of the style is TextBox.

You must set the TargetType property when you create a Style. If you do not wish to do this, you can specify the target type by using the ClassName.Property syntax as shown in the below XAML fragment:

If you do not do either of these, the processor throws an exception.

Instead of using attribute syntax, you can also use property element syntax to define styles. The following XAML snippet shows an example of this.

This is a more elaborate approach of defining styles and is not commonly used.

You can set styles implicitly by omitting the x:Key attribute in the Style definition. When you leave out x:Key attribute, the TargetType is used as the x:Key, thus making the style implicit for all the objects of that type.

The following XAML snippet illustrates this:

Here, there has been no x:Key specified for the style, hence it will be applied to all elements of type Button even if they have omitted the StaticResource markup extension. This is because of the implicit style feature.

In the following XAML snippet, an explicit style overrides the implicit style:

The outcome of the above markup will show the button Submit with font size 16, the button OK with size 24, and the ToggleButton with default size.

If you have more than one setter in the setter collection having the same Property value, the setter that is declared last is used. Similarly, if you set a value for the same property in a style and on an element directly, the value set on the element directly takes precedence.

You can reuse an existing style to create a new style and add additional Setter elements if required. The BasedOn attribute of a Style element enables you to implement this functionality.

For example, you could reuse a style named ButtonStyle which sets font size to 24 and add a new Setter element to set the background to Lavender as follows:

Here, InheritedButtonStyle is a style that inherits or is based on an earlier style, ButtonStyle.

So far, you have seen only the styles that are scoped to a particular XAML file. You can reuse the same style across all the XAML files in your application if you define the style in App.xaml. By defining the style in App.xaml, you are making it global. Thus if you have another XAML file named NewPage.xaml containing markup as follows, then without any extra effort the same style will be applied to the button.

Summary

This article described styles in WPF, how to create and use them and various aspects of working with styles.

About Medusa M

Medusa loves experimenting with technology trends, especially that of Microsoft. This author has published 14 articles on DotNetSlackers. View other articles or the complete profile here.