Styles in XAML

If you are a Microsoft Windows developer, chances are you are using XAML with one of the prominent development technologies (WPF, Windows Phone, SilverLight, WinRT). XAML is a wonderful markup language that provides a whole new look at developing applications for the Microsoft Windows operating system. In this series, I plan to cover the basics of XAML as they apply to these technologies. Microsoft has put a lot behind XAML and I think we know that it has a bright future when it comes to Windows development.

What are XAML styles?

You can think of a style in XAML much as you would CSS styles in HTML. Styles provide a way for you to change the visual properties of a given control or set of controls. Never before has the developer had this much freedom when it comes to changing the appearance of the standard Windows controls. Using Styles you can declare the font size and family of all buttons in an application. You can create style resource files that serve as style libraries that can be shared by applications.

This article will use WPF as the technology when explaining XAML styles, however, most if not all of the principles can be used with the other XAML based technologies.

Defining styles in your application

The way that you define styles is very much the same in WPF, SilverLight, and WinRT applications with subtle differences. You can define styles at the Window, Page, UserControl, Application, and Resource Dictionary levels.

We will start with an example of a WPF window called MainWindow.xaml.

MainWindow.xaml

<Window x:Class="WPF_styles_article_example.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid> <StackPanel Orientation="Vertical" > <Button Margin="20" Name="btnOne" Content="Button One" Width="260" Height="40"> </Button> <Button Margin="20" Name="btnTwo" Content="Button two" Width="260" Height="40"> </Button> </StackPanel> </Grid> </Window>

Here's the output

As you can see, we have two buttons contained inside of a StackPanel. They both share the same height and width.

You typically want a consistent look for all elements of your application. If you were to follow the method used in this example, you would need to find each button in the entire application to make any changes to the properties of your buttons. The more properties that are set on the button, the more potential properties that you would need to change.

The XAML style object

Styles are defined in a Style object. A xaml Style contains a collection of Setter objects. These Setter objects allow you to specify the control type in which the style should be applied, the property of the control to change, and the property value that you wish to set for the specified control type. Styles are defined in Resource Dictionaries. Once you've created your Style and populated the setters to define the properties and property values to be applied, you can then reference this resource in the Style property of the control that you wish style.

Here is an example of changing the style of a control by binding a style resource to the control's Style property.

<Window x:Class="WPF_styles_article_example.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <!-- Here we define our Style object and populate it's setter collection with property names and values. Notice that we specify the TargetType as the type of control that can use the style. --> <Style x:Key="CustomButtonStyle" TargetType="Button"> <Setter Property="FontFamily" Value="Verdana" /> <Setter Property="FontSize" Value="30" /> <Setter Property="Width" Value="260" /> <Setter Property="Height" Value="40" /> </Style> </Window.Resources> <Grid> <StackPanel Orientation="Vertical" > <!-- Notice that we have moved all visual property settings into the style resource. --> <Button Margin="20" x:Name="btnOne" Content="Button One" Style="{StaticResource CustomButtonStyle}" /> <Button Margin="20" Name="btnTwo" Content="Button two" Width="260" Height="40" /> <!-- Notice that setting the properties on the Button will override the properties specified in the style. --> <Button Margin="20" Name="btnThree" Content="Button three" Style="{StaticResource CustomButtonStyle}" FontSize="15" FontFamily="Wide Latin" /> </StackPanel> </Grid> </Window>

Here's the output

As you can see, we've taken the visual properties of btnOne and moved them into a Style resource. We specify the x:Key property so that the style resource can be referenced by other controls. We specify the type of control that can use the style by setting the TargetType property and populate the Style's Setter collection with Setter objects that define property names and values of the style.

You'll also notice that we added a third button and set it's Style property just as we did with btnOne, however, btnThree overrides the properties that we defined in the Style resource. Properties set at the control level take precedence over the properties defined in the Style resource.

Creating a default style for a specified control type.

In the previous example, we defined a Style resource and referenced the resource key in two of the three control's Style properties. Since we didn't specify the Style property of btnTwo, it was not effected by the Style's defined Setter property values.

What happens if we wanted to define a default Style for all of the button's for the current Window? As it turns out, this process is fairly simple. All we have to do is remove the Style's x:Key property. This will cause all of the control's of the specified TargetType to apply the specified style. Here is an example.

<Window x:Class="WPF_styles_article_example.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <!-- I've removed the x:Key attribute to apply the style to all Buttons in the window. --> <Style TargetType="Button"> <Setter Property="FontFamily" Value="Verdana" /> <Setter Property="FontSize" Value="30" /> <Setter Property="Width" Value="260" /> <Setter Property="Height" Value="40" /> </Style> </Window.Resources> <Grid> <StackPanel Orientation="Vertical" > <!-- No styles set --> <Button Margin="20" x:Name="btnOne" Content="Button One" /> <Button Margin="20" Name="btnTwo" Content="Button two" /> <Button Margin="20" Name="btnThree" Content="Button three" /> </StackPanel> </Grid> </Window>

Here's the output

Applying styles across an entire application

The previous examples demonstrate defining the Style resources at the Window level. The same approach applies to Pages and UserControls.

If you want to make styles available to the entire application, simply create an Application level resource.

Here is an example.

<Application x:Class="WPF_styles_article_example.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml"> <Application.Resources> <Style TargetType="Button"> <Setter Property="FontFamily" Value="Verdana" /> <Setter Property="FontSize" Value="30" /> <Setter Property="Width" Value="260" /> <Setter Property="Height" Value="40" /> </Style> </Application.Resources> </Application>

Here's the output

Conclusion

This concludes the first article in the XAML basics series. The next article in the series will build on the concept of XAML styles by introducing Control Templates.

Stay tuned!