RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Simplify Your XAML with Resources and Control Templates  : Page 2

Although it's tempting to style your WPF controls directly in their containing XAML files or through code, placing styling in control templates stored in external resource dictionaries offers a robust and reusable alternative.


Creating Resource Dictionary Files

You can create resource dictionaries and add as many control style templates to them as you need. Then you can either cause controls to load their template styles dynamically or define specific styles in the design view itself. The examples below illustrate both cases.

Figure 4. Adding a Resource Dictionary: From the project's context menu, choose Add Resource Dictionary to create a new resource dictionary file.

Right-click on your existing project, and choose Add Resource Dictionary from the context menu (see Figure 4).

Name the new resource dictionary file ButtonStyles.Xaml, and add the control template styles shown in Listing 2. This resource file will contain four control templates, each of which has its TargetType set to Button.

Note that each control template has a unique key (x:Key) named according to the resulting button style. Choosing good names helps with control template reuse.

At their simplest, control templates let you manage the visual display of a control using styles, triggers—and much more. It's also worth noting that every control has a base rendering template built into the system.

With the new control templates safely stored in an external file, to apply them you now need to load them into the Window containing the buttons. Each resource dictionary that you create to hold style templates—in this example—the button content templates, has to be loaded into the parent container's Resources collection.

In this case, you have two options: You can either load the resources into the Grid's (RootGrid) resource dictionary, which will make the styles available only to the controls inside the Grid control, or you can load them into the Window's (Design.Window1) resource dictionary and make them available to all the Window's child objects. As this example requires the styles only for the buttons in the Grid, the first option seems reasonable.

So, create an event handler for the Window's Loaded event, and add the following code to it:

/// <summary>
/// Handles the Loaded event of the Window control.
/// </summary>
/// <param name="sender">The source of the event.</param>
/// <param name="e">The <see cref="System.Windows.RoutedEventArgs"/>   
///    instance containing the event data.</param>
private void Window_Loaded(object sender, RoutedEventArgs e)
   //Button Styles
   ResourceDictionary buttonStyles = new ResourceDictionary();
   buttonStyles.Source = (new Uri(

The preceding code loads the resources into the RootGrid.Resources collection. In the XAML, you can refer to the style as a dynamic resource using the appropriate key:

<Button HorizontalAlignment="Left" Margin="2" 
  Grid.Row="0" Grid.Column="0"
  Width="100" Height="50" 
  Template="{DynamicResource RoundButtonWithThickEdge}"
  x:Name="button1" Content="Button 1" 
  Background="Green" Click="Button_Click">

Running the application now results in the same screen shown earlier in Figure 3, but this time the application is using styles defined in the external resource dictionary.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date