Why are XAML resources unlike CSS styles?

Question

In Expression Blend you can create a font-size of say 18 and then create a "font-size resource".

Coming at this from HTML/CSS, I cannot think of when I would want to make a style for a "font-size" and one for a "font-style" and one for a "font-weight". Instead I want to make a font called "CompanyHeader" and have 10 different attributes set in it, e.g. font-weight, font-style, font-size, color,etc.

Why is this different in Expression Blend, XAML, what is the sense of making a style/resource for each attribute?

this graphic shows how you can click on a little button on each attribute to change it into a resource: alt text http://tanguay.info/web/external/blendStyles.png

score 10 · Accepted Answer · answered Feb 08 '09 at 11:58

I have no experience with Blend, but styles in XAML can include more than one attribute, more then that, since unlike css you can only apply one style to an element you can't combine multiple one-attribute styles.

Here is an example for a style that set multiple properties:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Page.Resources>
      <Style x:Key="MyStyle" TargetType="{x:Type Label}">
         <Setter Property="Width" Value="125"/>
         <Setter Property="Height" Value="25"/>
         <Setter Property="Background" Value="Red"/>
      </Style>
   </Page.Resources>
   <Label Style="{StaticResource MyStyle}"/>
</Page>

Note that if I wanted to break the style into 3 smaller styles each setting one property I couldn't use them because the Label's Style property can only accept one style.

But you could split the style into 3 StaticResources and reference them in MyStyle and reuse them elsewhere... — Gordon Mackie JoanMiro, Mar 25 '09 at 17:25

score 4 · Answer 2 · answered Feb 07 '09 at 14:04

I think they likely allow for the creation of single resources for FontFamily, FontWeight, etc. to allow them to be used across many styles in the application. By placing a single property in a resource you can effect all styles using that resource at once. If you weren't using a resource but were attempting to use a consistent FontFamily across your whole application (or a portion of it) then you had to go through each style one at a time in order to update it.

In order to make a style with multiple properties in blend you can do the following:

Select the control you wish to style (the control's type will be used as the TargetType for the style)
From the menu select Object->Edit Style->Create Empty
Enter the Key you would like to assign to the style (this is the name that you will use to reference the style)
Go to the properties tab and begin to apply the look/feel that you want for that style

score 3 · Answer 3 · answered Feb 07 '09 at 13:58

It allows you to reuse the font details at am more granular level than having to define all elements of the font definition. You might have several styles that all inherit from the same font-size definition. Your designer can then change the font-size and all the styles that use it then automatically have an updated appearance.

score 1 · Answer 4 · answered Jun 03 '10 at 02:44

Each instance of a font will use its own resources, doesn't matter if multiple such defenitions refer to same font.

Using same font in two different styles will end-up with two instances of the font (when the styles are applied). Instade, you can defined the font as a style of its own and use the style with-in other styles. In this case, once runtime instance of the font resource is used by both styles.

If you have very complex resource dictionaries (say for example you are creating a theme), it is a good idea to define geanular assets (like a specific color brush or font) as independent resource (or named style) and use them in other complex styles to conserve system resources.

On your question on Blend, it simpley enforces this best practice.

score 0 · Answer 5 · answered Oct 04 '12 at 15:27

This is possible by creating a helper class to use and wrap your styles. CompoundStyle mentioned here shows how to do it. There are multiple ways, but the easiest is to do the following:

<TextBlock Text="Test"
    local:CompoundStyle.StyleKeys="headerStyle,textForMessageStyle,centeredStyle"/>

The blog post talks about Win8 and Windows Phone, but the same code works for WPF as well (minus the Utilies class which is not needed)

Hope that helps.

Why are XAML resources unlike CSS styles?

5 Answers5