One of the real strengths of Expression Blend is in its deep understanding of control templates. Visual Studio doesn’t really go near control templates and so you really need Blend unless you’re a pure consumer of someone else’s templated controls.

Control templates are a complex concept in themselves and so editing them can be a bit mind-bending for the first time. If you’ve not encountered the idea of templates then perhaps the simplest thing to do is to wander into Blend and make a new project.

and then drop a simple control onto the artboard. A Checkbox is a prime example and a Button would be another. I’ll go with Checkbox.

and then wander into its control template – i.e. the visuals that represent the control’s look and feel. The ways in which you can edit the template are numerous but I think they all involve the same 2 menus which I’ve almost managed to show on this screenshot below;

"Edit a Copy” or “Create Empty”?

The CheckBox already has a control template and so we have a choice as to whether we want to start from that template or whether we’re brave enough to start from a blank sheet of paper. If you’re in “exploratory” mode then it’s wise to start from the existing template but it’s interesting to note that the 2 options lead you to 2 slightly different dialogs – this is Edit a Copy;

and this is Create Empty…

Now, both of these are going to ultimately create a ControlTemplate that targets a CheckBox.

By the way, if you’re not so familiar with styles or resources in Blend, then these posts might help;

• Resources – one and two
• Styles.

You might expect that the former would create a style that simply sets the Template property but it doesn’t, it creates a copy of the default style for the CheckBox which includes more than just the value of the Template property, it includes a bunch of other properties like Foreground and so on.

Blend then drops you into a place where you are editing the Template property of that Style as the breadcrumb bar indicates here;

The latter “Create Empty…” option creates an empty control template and you would then be editing that template directly as the breadcrumb indicates here;

it’s a subtle difference and not one that’s too important for this particular post.

If you go with the “Edit a Copy” option for the moment and that drops you into “template editing mode” which is a fairly subtle thing to spot inside of Blend but we can spot it from the objects/timeline panel and the breadcrumb control;

the other parts of the environment that come into play are the states and parts panels. I don’t think a Checkbox has any parts defined but on the states panel you can see the various states that a CheckBox defines;

and you can see how that corresponds to changing property values for the various UI elements that are part of the template. Working with these states is pretty much the same experience as I talked about in “States/Groups and Transitions” – you define various property values for the various UI elements in their various states and you also define transitions between them.

Because transitioning to these states involve animations that make changes to properties on UI elements defined in the makeup of the control, if I was to select all the items in the template;

and hit delete then Blend would realise that the animations that were powering those state transitions no longer make sense and would say so;

Hitting CTRL-Z to put those UI elements (and the transitions) back for a moment, it’s “interesting” to look at a couple of elements in the template as it stands.

Template Binding

There’s a Rectangle called “Background” which really defines the border for the control;

and there’s an interesting question about what brushes this border should be using. I don’t (usually) want to build a template which forces all Checkboxes to be red or green or blue. I want the user of the Checkbox to be able to define their border colour when they use the control even if I have changed the control’s template. Consequently, the Rectangle here is careful about how it sets up brushes;

You can see that the Stroke property of the Rectangle is using a brush which makes use of TemplateBinding in order to pick up whatever brush the user specifies as the BorderBrush when they come to define their particular instances of the Checkbox control.

This is really smart as it makes for much more re-usable templated controls – we get to make use of a property that will be specified when the user of our control drops it onto their artboard in their UI.

Content Presenters

The other interesting thing about the CheckBox is that it’s one of Silverlight’s controls that can display arbitrary content. That is, it doesn’t just display Text, it displays anything dropped into its Content property.

How does that work? By making use of a control called a ContentPresenter and you can see that in the standard template;

and if you take a look at its properties, you’ll find that it too has a property called Content and that one is set up to use TemplateBinding in order that it picks up the value of Content from the actual use of the Checkbox control;

So you set the property CheckBox.Content and underneath this is really setting the property ContentPresenter.Content and the “right things happen”.

Why not replace this template for our Checkbox?

Replacing the Template

In order to replace the template, we can just delete most of what’s already there to leave an empty Grid;

and then I could perhaps add controls to make up one of those “slider style” Checkboxes that you see on OS X user interfaces so perhaps something like;

and this is just a Grid that contains a sub-grid and a ContentPresenter that has been set up to;

1. Live in a grid row which is auto-sized to the content.
2. Template Bind its Content property to the Content of the CheckBox.
3. Template Binding its VerticalContentAlignment and HorizontalContentAlignment properties to those of the Checkbox.

The other grid row contains a Grid which has been split into 3 columns and just contains 2 rectangles which draw their colours by template binding to colours on the CheckBox again and then there are state transitions set up to move the “thumb” when the Checkbox is checked;

this is simply changing the Grid.Column property of the rectangle from 0 to 2 and it makes use of the Fluid Layout feature of Blend 4 to make this animate ( see this other post ).

There’s also a focusRectangle in the control which is invisible unless the control has the focus. I should also add UI elements for enabled/disabled and so on.

However, I’ve got a modified control and if I wander out of template editing mode;

then I can make use of it by just changing the brushes used for Foreground/Background and adding some content like this TextBlock below;

and with a bit more work it could become a fairly re-usable template.

But we’ve only encountered one template here so perhaps a “more complex” example would be a ListBox so we’ll see how Blend deals with that and I’ll drop it into a follow on post…