.NET & Funky Fresh

Syndication

News

  • <script type="text/javascript" src="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&amp;MarketPlace=US&amp;ID=V20070822/US/bluspiconinc-20/8001/8b68bf4b-6724-40e7-99a5-a6decf6d8648"> </script>
Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at imagehelp@codebetter.com
.NET 3.0 Crash Course - Part 6: WPF Styles and Control Templates

Frequently, when building a UI, one finds themself setting various appearance related properties over and over again.  For example, you may want all the label text in your app to be a bold Trebuchet 12px font.  This is easy to do with css in a web app, but not as straight forward with WinForms.  WPF recognizes this need and satisfies it with the introduction of the ‘Style’ element.  Let’s see how we would implement the above example in Xaml:

<StackPanel>

   <StackPanel.Resources>

      <Style TargetType="{x:Type Label}">

         <Setter Property="FontFamily" Value="Trebuchet" />

         <Setter Property="FontSize" Value="12" />

         <Setter Property="FontWeight" Value="Bold" />

      </Style>

   </StackPanel.Resources>

 

   <Label>Here is some text.</Label>

   <Label>More text.</Label>

   <Label>The last bit of text.</Label>

</StackPanel> 

The basic and most common part of a style is its Setters.  Simply declare the property name and its value and it will be applied.  Easy, isn’t it?  In my last post on data templates, I discussed how they could be applied by type or by key.  The same applies to styles.  In this case, I have scoped the style to the stackpanel; any label in that panel will pick up the style.  I can, of course, override that style on the individual elements if I need.  You can also inherit styles one from another by setting the BasedOn attribute of the style element:

<StackPanel>

   <StackPanel.Resources>

      <Style x:Key="baseStyle" TargetType="{x:Type Control}">

         <Setter Property="FontFamily" Value="Trebuchet" />

         <Setter Property="FontSize" Value="12" />

         <Setter Property="FontWeight" Value="Bold" />

      </Style>

      <Style BasedOn="{StaticResource baseStyle}" TargetType="{x:Type Label}">

         <Style.Triggers>

            <Trigger Property="IsMouseOver" Value="True">

               <Setter Property="Foreground" Value="Red" />

            </Trigger>

         </Style.Triggers>

      </Style>

   </StackPanel.Resources>

 

   <Label>Here is some text.</Label>

   <Label>More text.</Label>

   <Label>The last bit of text.</Label>

</StackPanel>

Notice that I now have two styles; one that applies to all elements inherited from control, and a second one based on that style that extends it – the second style applies only to Label controls.  I have taken this opportunity to show the second most common element you will find in a style: its Triggers collection.  A trigger is a stateful aspect of the style.  In this case, any of the labels in the stackpanel will appear red only when the mouse is hovering over them.  Dang that’s cool!

By taking advantage of styles, you can create a consistent and easily maintainable appearance for your UI.  There is a lot of power in this concept.  However, sometimes you need to go farther.  Suppose you want all of the buttons in your application to have a gel appearance.  You cannot accomplish this with only basic style setters.  In this case you need to use a control template.  In order to understand what a control template is, you need to think of controls more abstractly.  In WPF, a Button control is something akin to the platonic idea of a button.  In your development experience you have seen many buttons of different shapes and styles, but they were all buttons.  They typically all had some mouse over effect and triggered something when they were clicked.  With WPF, all of the buttons you have seen could be implemented with the same Button control, but with different control templates.  WPF, by way of control templates, allows you to switch out the appearance of any control, without having to write any code related to its functionality.  Some controls have simple templates and some are complex.  Here is a basic gel button template straight out of the SDK:

A templated button.

This control template is embedded within a style, but it does not have to be done this way.  If you examine the ControlTemplate element, you will see where the look of the button is being defined.  In this case it is simply a layering of rectangles with various gradients, but you have access to the full power of WPF in defining these templates (yes that includes 3D and animation if you so desire).  Similar to styles, control templates can be assigned by type or key, but be careful that whatever template you are applying matches the control type you are applying it to.  Every control expects to find certain pieces in its template in order to make the control work right.  You should study a working template of a control before attempting to create your own.  One of the best resources for learning about control templates is “simple styles”.  Here you will find basic control templates for all of the major controls in WPF.  They are accessible through the sidebar in Kaxaml (a tool you should try out anyway).  You can also take advantage of control templating support in your own custom controls.  A discussion of this is beyond the scope of this article.  Watch Christopher Bennage’s blog for a post on this topic soon.

NEXT POST: WPF 3D and Animation


Posted 12-03-2006 5:19 PM by Rob Eisenberg

[Advertisement]

Comments

RaDiy wrote re: .NET 3.0 Crash Course - Part 6: WPF Styles and Control Templates
on 12-08-2006 7:12 AM

Hey!!!

Check markup in example with buttons!!!

#          <Setter Property="Foreground" Value="white">  

#          <Setter Property="Margin" Value="1">

may be like this?

#          <Setter Property="Foreground" Value="white" />  

#          <Setter Property="Margin" Value="1" />

Rob Eisenberg wrote re: .NET 3.0 Crash Course - Part 6: WPF Styles and Control Templates
on 12-08-2006 10:47 AM

You are absolutely right.  Something must have happened when I pasted the code in.  I'll fix it.

Coding4Fun wrote YeahTrivia: Creating a Trivia Server and Client with WPF &amp; WCF
on 10-29-2007 8:01 PM

In this article I'll take you along for the ride as I attack the learning curve required to create a

MSDN Blog Postings » YeahTrivia: Creating a Trivia Server/Client with WPF and WCF wrote MSDN Blog Postings &raquo; YeahTrivia: Creating a Trivia Server/Client with WPF and WCF
on 10-29-2007 9:03 PM

Pingback from  MSDN Blog Postings  &raquo; YeahTrivia: Creating a Trivia Server/Client with WPF and WCF

DotNetKicks.com wrote WPF Control Templates
on 04-16-2008 9:42 AM

You've been kicked (a good thing) - Trackback from DotNetKicks.com

For Me To Blog On » Assigning Styles Based on Triggers wrote For Me To Blog On &raquo; Assigning Styles Based on Triggers
on 06-04-2008 2:34 PM

Pingback from  For Me To Blog On &raquo; Assigning Styles Based on Triggers

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)