Understanding Templates in WPF

If you are versed in the ways of Windows Forms and plan on using WPF, brace yourself. The platform might seem somewhat similar at first glance. After that brief initial survey, the landscape changes dramatically. In my opinion, the primary differentiator is the fact that WPF makes heavy of use of something that does not even enter the mental landscape of WinForms. I am talking about templates.

As I explained in the fourth entry of my guided tour of WPF, templates are like a cookie-cutter. Instead of resulting in delicious baked goods, these cookie-cutters produce a tree of visual elements that can render something. What can they render? Anything.

Coming from a background in ASP.NET this concept might seem entirely natural, since the ASP.NET platform has used templates for years. The Repeater control, for example, makes heavy use of templates. The WPF ItemsControl is the moral equivalent of Repeater, in that it produces a static list of items based on a description of visual elements declared in markup.

In WPF there are several types of templates that you use often. They all derive from the abstract FrameworkTemplate class. DataTemplate is used to create a visualization of a non-visual object, such as a business object. ControlTemplate supplies a visual representation of a UI control, such as a Button or ListView. ItemsControl, and all of its subclasses (such as ListBox), create the layout panel that hosts their child elements via an ItemsPanelTemplate. Another commonly used template in WPF is the HierarchicalDataTemplate, which is a data template that has knowledge of how to display a data object’s child objects, such as in a master-detail situation.

The mental shift that I had to make, when leaving WinForms and entering WPF, is that a UI is made of templates. Forget about building a UI and then shoving data into it. That’s not the WPF way. In WPF we show data in a user interface, instead of showing a user interface that contains data. It is a subtle, yet crucial, distinction. If you find yourself creating a UI in WPF and then filling it with data, you are not doing things the WPF way. If you find yourself seeing the UI as a mere “outfit” that data “wears” then you are on the right track. At least, that’s my opinion.

4 Responses to Understanding Templates in WPF

  1. skc says:

    Hi Josh,

    One area of WPF that’s confusing and that hasn’t been served well in tutorials or documentation is the coordinate system that layout imposes. TranslatePoint and it’s cohorts are always tripping me out.

    Do you think it would be worth it for you to touch on that in a blog post some day?

  2. Vlad says:

    Actually I like you sentence, UI showing data, not shoving data in UI.

  3. Aarti says:

    Hi Josh,

    I have been a regular reader of your blog and I love it for its such useful content.

    I have implemented an ItemsControl {which is bound to a datatable} and have defined DataTemplate for it {which just has 5 checkboxes for each of the column in datatable} to mimic repeater control. This works great.

    But now the requirement has been enhanced a bit, which says first item would have 5 checkboxes which would be just readonly and all other items would have 4 out 5 checkboxes and would be editable. Is there a way to achieve this.

    Thanks in advance for your comments/suggestions…

  4. Josh Smith says:

    Aarti,

    That would be easy if you were binding to custom ViewModel objects, because each object (corresponding to a DataRow in your DataTable) could have a Boolean property that indicates if it is the “first” row. If you do not go that route, there might be some way to have a valueconverter figure out which DataRow is the first one and base your triggers off of that. I’d suggest the ViewModel route.

    Josh

%d bloggers like this: