Resources in XAML
 
Published: 12 Oct 2006
Abstract
XAML, in conjunction with Windows Presentation Foundation, comes with resources as a helpful concept for designers to have a constant look and feel for their elements, windows, pages or applications and spread this look across their user interfaces. This helps to keep consistency in UI. In this article Keyvan introduces the concept of resources in XAML.
by Keyvan Nayyeri
Feedback
Average Rating: 
Views (Total / Last 10 Days): 49218/ 78

Introduction

One of the main reasons to introduce CSS in conjunction with XHTML is the ability to reduce the size of the user interface code and share the same layout across several pages and elements.  This could allow for consistency between pages.  XAML, which is a markup language to declare user interfaces in .NET 3.0 and Windows Vista, comes with the concept of resources to produce the same functionality.

By having resources in hand, we can declare a look and use it several times across a page or application.

Resource management is actually a part of the Windows Presentation Foundation, but I will discuss it as a part of my XAML tutorials because they are correlated together.

In this article I introduce resources in XAML and how to use them to declare a constant look across controls, windows, pages or whole application.

Static Resource

This kind of resource gives back a value of a resource.  Listing 1 shows a simple example of static resource.

Listing 1

<Window x:Class="ResourcesInXAML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Resources In XAML" Height="200" Width="300"
    >
  <Window.Resources>
    <SolidColorBrush x:Key="myBrush" Color="GreenYellow" />
  </Window.Resources>
  <Button Background="{StaticResource myBrush}"
          Width="200" Height="40" Name="myButton">
    ASP Alliance
  </Button>
</Window>

As I stated in the introduction, resource management is a part of the Windows Presentation Foundation so you do not need to use the "x:" prefix to refer to it.

If you want to implement static resources in code, their code equivalent is FindResource method for elements.  Listing 2 shows this in action.

Listing 2

myButton.Background = 
    (Brush)myButton.FindResource("myBrush");

Note that, as the name suggests, a static resource is useful for scenarios in which you want to get the value for a static value.  If you want to retrieve the value for a dynamic value (a value that changes on runtime), dynamic resource is your choice because static resource will not be updated on runtime to specify any change.

Dynamic Resource

You saw that static resource is not appropriate for some scenarios when you want to have a result that can be updated for changes in other elements.  In order to solve this you can use dynamic resources.

Listing 3, Listing 4 and Figure 1 use dynamic resources to show how they work.  I used a dynamic resource to track all changes for the background color of my Window and set myButton background to it.  Once this value changes, myButton must get the same background.  Listing 5 shows the simple code I used to change the background of the Window when the user clicks on a button.

Listing 3

<Window x:Class="ResourcesInXAML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Resources In XAML" Height="200" Width="300"
    >
  <Window.Resources>
    <SolidColorBrush x:Key="myBrush" Color="GreenYellow" />
  </Window.Resources>
  <StackPanel Margin="30">
    <Button Background="{DynamicResource Window1.Background}" 
            Width="200" Height="40" Name="myButton">
      ASP Alliance
    </Button>
    <Button Click="OnClick" Width="200" Height="40">
      Change Background
    </Button>
  </StackPanel>
</Window>

Listing 4

public void OnClick(object sender, RoutedEventArgs args)
{            
    this.Background = Brushes.GreenYellow;
}

Figure 1

Resources in Action

As I stated earlier, the concept of resources is very similar to the concept of CSS.  The benefits are same.  This means you can easily spread a look across controls, pages or your application.  Also by using resources you can have smaller codes and easily change or modify your look without changing each and every element many times.

There are two kinds of resources in Windows Presentation Foundation: Global and Local.  Syntax is the same for both kinds, but Global resources can be declared for whole page and all its controls.  However, Local resources can be declared for a special element.

Another thing that is worth mentioning is that every XAML element has a set of resources.  You must declare a resource before using it, otherwise compiler cannot understand it.  So you must put control resources before setting the attribute that will use them.

You need to have a reference to the XAML namespace since some tags to declare resources are in the XAML namespace.  So in addition to default Windows Presentation Foundation, you must have a reference to XAML namespace (I suppose it is "x:" in my samples).  In order to declare a resource, you must use a key attribute for each resource that is an identifier that helps you to refer to the resource via other elements.  This key attribute is in XAML namespace.  Other attributes are the attributes you use for your elements to declare your desired look for them.

Listing 5 and its output, Figure 2, show a Global resource.

Listing 5

<Window x:Class="ResourcesInXAML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Resources In XAML" Height="150" Width="300"
    >
  <Window.Resources>
    <SolidColorBrush x:Key="myBrush" Color="Coral" />
  </Window.Resources>
  <StackPanel Margin="30">
    <Button Background="{StaticResource myBrush}" 
            Width="200" Height="40">
      ASP Alliance
    </Button>   
  </StackPanel>
</Window>

Figure 2

Styles

The concept of style should not be unfamiliar for you since you have already seen it in HTML, XHTML and CSS.  Styles help you to declare an appearance for a special element or declare a style for a specific type of elements.

Each style consists of a key as its identifier to let you refer to it via other elements (if you are declaring a style locally for an element, you can ignore the key attribute) and a collection of Setter elements that you declare your appearance via them.  Key is a part of XAML namespace so you should use XAML prefix to refer to it ("x:" in my samples).  You can also use a TargetType attribute for your style to specify the type of element that your style will be applied to.

Listing 6 represents the simplest way to declare a style for a Window then use it for your elements.  Figure 3 shows the output.

Listing 6

<Window x:Class="ResourcesInXAML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Resources In XAML" Height="150" Width="300"
    >
  <Window.Resources>
    <Style x:Key="myStyle">
      <Setter Property="Control.Background" Value="MediumSlateBlue" />
    </Style>
  </Window.Resources>
  <StackPanel Margin="30">
    <Button Style="{StaticResource myStyle}" 
            Width="200" Height="40">
      ASP Alliance
    </Button>
  </StackPanel>
</Window>

Figure 3

Listing 7 and Figure 4 are good examples to show that if you use TargetType attribute for your style and do not refer to it in your elements, this style will be applied to all elements of that type.

Listing 7

<Window x:Class="ResourcesInXAML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Resources In XAML" Height="150" Width="300"
    >
  <Window.Resources>
    <Style TargetType="{x:Type Button}">
      <Setter Property="Control.Background" Value="GreenYellow" />
    </Style>
  </Window.Resources>
  <StackPanel Margin="30">
    <Button Width="200" Height="40">
      ASP Alliance
    </Button>
  </StackPanel>
</Window>

Figure 4

The last point about styles is they have an object oriented manner (you can remember that XAML elements represent CLR classes).  Therefore, you can inherit your styles from another style and extend it.  All you need to do to inherit a style from another style is to declare BasedOn attribute for that style and set it to another resource that you want to inherit from.

Listing 8 and Figure 5 show an example of inheritance for styles.

Listing 8

<Window x:Class="ResourcesInXAML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Resources In XAML" Height="150" Width="300"
    >
  <Window.Resources>
    <Style x:Key="ParentStyle">
      <Setter Property="Control.Background" Value="Red" />
    </Style>
    <Style x:Key="Child" BasedOn="{StaticResource ParentStyle}">
      <Setter Property="Control.Foreground" Value="Black" />
    </Style>
  </Window.Resources>
  <StackPanel Margin="30">
    <Button Width="200" Height="40" Style="{StaticResource Child}">
      ASP Alliance
    </Button>
  </StackPanel>
</Window>

Figure 5

Triggers

Triggers are one of the sweet parts of XAML and Windows Presentation Foundation.  They save you from coding many user interface level events.  Actually, triggers help in changing an attribute of an element when a condition is true.

For example, when the mouse is over a Button, by using triggers you can change its background dynamically on runtime to your desire color.

Each style can have a collection of triggers for different attributes of an element.  As triggers will be declared inside styles, all of what I said about styles can be applied to triggers as well.  So you can declare a trigger for a specific element locally, all elements on a page or a special kind of element.

Listing 9, Figure 6 and Figure 7 represent the use of triggers for a page to change the background of a Button once the mouse is over it.

Listing 9

<Window x:Class="ResourcesInXAML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Resources In XAML" Height="150" Width="300"
    >
  <Window.Resources>
    <Style x:Key="myStyle">
      <Style.Triggers>
        <Trigger Property="Control.IsMouseOver" Value="True">
          <Setter Property="Control.Background" Value="Red" />
        </Trigger>
      </Style.Triggers>
    </Style>
  </Window.Resources>
  <StackPanel Margin="30">
    <Button Style="{StaticResource myStyle}"
            Width="200" Height="40">
      ASP Alliance
    </Button>
  </StackPanel>
</Window>

Figure 6

Figure 7

Summary

In this article I introduced you to resources in XAML by talking about Static and Dynamic resources and their differences.  I gave some details about using Resources, Styles and Triggers to spread the look across your controls, windows, pages or applications.



User Comments

Title: FeedBack   
Name: HariPrasad
Date: 2010-09-27 5:47:49 AM
Comment:
Thank u a lot Keyvan,ur artical is really pretty much easy to understand what r resourses ,styles and triggers.once again thank u vary much for giving guidence.
Title: Really Nice   
Name: Vinay KUmar
Date: 2008-08-07 12:48:50 AM
Comment:
Iam new to XAml...and this article has given a complete overview . I really thank u for this article...

I hope u will come with more examples.............
Title: Explanation   
Name: Siva
Date: 2007-02-15 5:01:05 AM
Comment:
Hi Keyvan
Sorry if I was not clear. First I would like to thank you for devoting few moments answering my queries.

I think it will be better if I could mail you my project which is a Visual Studio 2005 Project. Can you please send a test mail to sivasenthil@xerago.com
Title: Explanation   
Name: Keyvan Nayyeri
Date: 2007-02-14 9:35:28 AM
Comment:
I couldn't understand what you mean. Would you please explain things more?

Why you don't try RTM version?
Title: Code doesnt works   
Name: Siva
Date: 2007-02-14 4:05:15 AM
Comment:
Hi Keyvan Nayyeri
I noticed that in Visual Studio 2005 add-in (oen of CTPs) and .NET 3.0 RC, I am having the "IsMouseOver" Property of the Button control disabled and set to false. Is that the cause of problem?
Can you help me enable that and set it to true and then test your code?
Title: I haven't tested that ...   
Name: Keyvan Nayyeri
Date: 2007-02-14 3:28:08 AM
Comment:
Siva,

I haven't tested with Blend. I just tested this code with Visual Studio 2005 add-in (oen of CTPs) and .NET 3.0 RC (if I can remember correctly).

There may be some changes from RC and CTP to new versions and also there may be something different in Blend.
Title: Code doesnt works   
Name: Siva
Date: 2007-02-14 2:40:22 AM
Comment:
Hi Keyvan Nayyeri
Your listig 9 doesnt work when executed from Microsoft Blend Beta. However, I noticed that when I replace the Setter property from Control.Background to Control.Foreground it works.
I am new to XAML, can you please help me on this.
Title: about this article   
Name: valay kothari
Date: 2007-01-31 7:17:11 AM
Comment:
this is very superb
Title: I didn't see any blue color   
Name: Keyvan Nayyeri
Date: 2006-12-19 1:37:07 PM
Comment:
But I didn't get any blue color at the time of writing. When you get it and what's your Windows version and style?

It shouldn't change from red to any other color unless you move mouse out of button area. Then it will get the default background color.
Title: Trouble with changing background on mouse over   
Name: Rod Stephens
Date: 2006-12-19 1:24:39 PM
Comment:
Great material! However the button seems to have its own ideas about how to make the button fade from its background color to a light blue when I hover the mouse over it. So in the last example, it flashes red and then quickly fades to blue.

Is there a way to make the button not fade to blue so I can see the red background?
Title: These are tutorial   
Name: Keyvan Nayyeri
Date: 2006-10-23 11:38:04 PM
Comment:
My articles about XAML are tutorials. I said this many times. If you want more information, should spend more time and also read a book. I just want to give a background for beginners.
Title: yar   
Name: ashish
Date: 2006-10-23 11:32:42 PM
Comment:
good work u did but u hav given basic knowledge
Title: Layout in XAML   
Name: Keyvan Nayyeri
Date: 2006-10-12 12:57:17 AM
Comment:
Second part of these tutorials about Layout in XAML:
http://aspalliance.com/1023_Layout_in_XAML
Title: Introduction to XAML   
Name: Keyvan Nayyeri
Date: 2006-10-12 12:56:33 AM
Comment:
First part of these tutorials about Introduction to XAML:
http://aspalliance.com/1019_Introduction_to_XAML

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2021 ASPAlliance.com  |  Page Processed at 2021-01-24 11:11:48 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search