The previous post took a simple Checkbox and played with its template a little but we see quite a few more templates if we wander into a control like a ListBox.

Dropping a ListBox onto the artboard and then setting up some data that it can bind to ( using the sample data feature that I talked about here ) takes about a minute or so;

then there’s a bunch of templates to think about here.

Items Panel Template

One of those templates is the one that’s being used for the panel that makes up the ListBox.

Blend makes that easily accessible via the “Additional Templates” menu;

and by default this gives me a StackPanel which is why the ListBox lays out items the way that it does – i.e. stacked up vertically one under the other. Maybe I want a WrapPanel for my ListBox so I change the layout container here;

and then if I come out of editing that template;

then that’s not very nice;

as I’d really not like that ScrollBar to think that it has the responsibility of making my WrapPanel content scroll off to the right of the ListBox so I can fix that with;

and a quick resize makes that a little more attractive;

and that’s the role of the items panel template.

The Item Template

Another template that’s in play is the one that’s displaying the data on a per-item basis and Blend made one of those when I dragged my sample data to the ListBox so it’s given me a little bit of a head-start here.

Getting to the template is pretty easy;

and then Blend lets you edit this kind of template ( a DataTemplate ) in-place in the ListBox rather than re-focusing the environment around the content of the template itself. That is;

and I can edit that to my heart’s content playing with the visuals in anyway that I want setting up a few backgrounds, fonts, effects and so on;

and so that’s the ItemTemplate and the editing experience is pretty rich.

Item Container Style

What the heck is the item container style? If you were to run our UI as it stands and point a tool like Silverlight Spy at it then you’d see something unexpected ( unless you’ve been here before in which case, go read something else );

ListBoxItem eh? Where the heck did that come from? I seem to remember my ItemTemplate containing a Grid but not a ListBoxItem. Also, in using the ListBox I see that I get a funny blue selection rectangle which I don’t remember creating;

who’s responsible for this travesty? It’s the Item Container Style. Here’s how Blend surfaces it;

and if I wander into editing that style then Blend does an interesting thing in that it lets me create a style;

but it drops me into editing a template for a ListBoxItem…

and if I go back “up” the hierarchy to the style;

then I see that I’m actually editing;

an ItemContainerStyle and it’s this style that sets a Template property that Blend (rightly) figured out was what I actually wanted to edit. Heading back into that template;

I can see that the ListBoxItemTemplate wraps a few extra pieces around whatever DataTemplate I choose as my ItemTemplate;

and it does this to provide somewhere to indicate selection, focus etc. and I can see that from the States panel;

so that’s another template that comes into play when working with a ListBox and I’ve mostly ended up editing it when I want to change that blue rectangle.

The ListBox Template Itself

As you’d expect, the ListBox has a template itself. I must admit that I don’t find myself editing it anything like as often as the previous 3 but, for completeness, you can always open it up;

and that gives you;

and then if you really want to start getting funky you can make the leap from editing one template to editing the templates of the controls that live within the template. For example, there’s a ScrollViewer here that we might want to re-template;

which gives us a view;

and that contains 2 ScrollBars which have templates so we might edit one of those which gives us…

and it can all start to get a little “deep”;

but the concept is the same one so long as the tool can deal with the hierarchy

Looking at those ScrollBar templates, there’s a little plus-mark that indicates that a particular element forms a recognised part of the ScrollBar and a feature of Silverlight’s control model is this idea that a templated control may need to know which element in the template is meant to play which role or part.

Blend supports this via the Parts panel which I’ll put into another post…