Resources in XAML
page 5 of 7
by Keyvan Nayyeri
Feedback
Average Rating: 
Views (Total / Last 10 Days): 49218/ 76

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


View Entire Article

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:03:37 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search