WPF: Stylesheets in XAML

Posted on 2/13/2007 @ 6:16 PM in #Silverlight and WPF by | Feedback | 8329 views

I just got done talking about "Resources in WPF" (read that first before reading this). What I was trying to do over there in that post was, take some simple content like this:

.. and render it in such a manner that the heading sticks out. We got this far -

.. and how we did this was to declare two resources to hold the colors the heading and content would get.

Now, I'm getting greedy. Color alone isn't enough. In addition to Color, I also need other things to dilineate the title from the body content. Say, another thing I needed was a gradient background. I could acheive this by creating yet another resource as below :

<LinearGradientBrush x:Key="HeadingBackground" StartPoint="0,0" EndPoint="1,1">
  <GradientStop Offset="0" Color="LightGray"/>
  <GradientStop Offset="1" Color="White"/>
</LinearGradientBrush>

and sticking this yet another resource as the background for my title, like this:

<TextBlock 
  Foreground="{StaticResource HeadingForeground}" 
  Background="{StaticResource HeadingBackground}">
  All about Resources in WPF
</TextBlock>

and, then if I wanted to set yet another property, I could add a third resource, and a third property, and a fourth, and a fifth. Hmm .. somethin' ain't right here.

See, HTML, we have stylesheets. They can define a style, and abstract a number of such values into one convenient way of attaching such behavior to a specific tag. So it is reasonable to assume that such "Styles" would exist in XAML as well. Lucky for us, they do. Here is how you can make use of Styles.

First, define a style under resources:

<Style TargetType="TextBlock" x:Key="HeaderStyle">
  <Setter Property="Foreground" Value="{StaticResource HeadingForeground}"/>
  <Setter Property="Background" Value="{StaticResource HeadingBackground}"/>
</Style>

Note that my style is making use of other resources that are defined above the current style, and the style itself is - just yet another resource (how twisted is that?).

So basically a style is like a dog, it can give itself a licking. In other words, a style can use other styles - I leave that to you to explore further.

Next, make use of that style - that's it. Here's how -

<TextBlock Style="{StaticResource HeaderStyle}">
  All about Resources in WPF
</TextBlock>

And now, your window looks like this -

Great, now go ahead and modify the style a tad bit more -

<Style TargetType="TextBlock" x:Key="HeaderStyle">
  <Setter Property="Foreground" Value="{StaticResource HeadingForeground}"/>
  <Setter Property="Background" Value="{StaticResource HeadingBackground}"/>
  <Setter Property="Padding" Value="2"/>
  <Setter Property="Width" Value="400"/>
  <Setter Property="FontFamily" Value="Verdana"/>
  <Setter Property="FontSize" Value="20"/>
</Style>

And your window now looks like this -

(PS: I also changed the HeaderForeGround to white).

Neat eh? Stylesheets in XAML.

Suggested further reading -  WPF Styles: EventSetters & WPF Styles: Triggers

Sound off but keep it civil:

Older comments..


On 2/26/2008 12:59:47 PM Xaml Templates said ..
At http://www.xamltemplates.net you can download a complete theme made in xaml for all the controls in WPF and also there are a lot of themes to buy.


On 6/20/2008 3:00:46 PM Fredzor said ..
Great article!


On 2/20/2012 7:48:37 AM nemico said ..
Thank you very much!


Just the explanations I was looking for!