Silverlight (and WPF) provides very powerful mechanisms to change the look and feel of standard controls. However, as I’ve discovered, it’s not always obvious how to let Blend help you affect the changes.

Blend – friend and (innocent) foe

Recently I wanted to both edit the style (change the basic properties such as colour and font) and template (change the layout and structure of a control) of a Listbox. The main change I was after was to make the list horizontal rather than vertical whilst retaining all the other Listbox features.

Creating sample data

So before we discover where to go to make the changes I want to see some example data in Blend rather than running the application. One method is to; in Visual Studio create the basic class that you’ll bind the Listbox to. Return to Blend and select the Listbox->Properties->Items (Collection)->Add Another Item. Select the class you created and enter in your example data. You then go into the Xaml view and copy and paste the sample data as you wish. So we have data but how to style it? Once you have your Listbox selected Blend has many options; Edit Style, Edit Other Styles, Edit Control Parts (Template), Edit Other Templates. So there you have it, not a confusing array of choices at all! So what do these options do for you?

<ListBox Margin="0,0,17,0" VerticalAlignment="Top" Height="100">

            <ListBoxItem Content="There was a monster from Leeds"/>

            <ListBoxItem Content="who ate a packet of seeds"/>

            <ListBoxItem Content="in less than hour, his nose was a flower"/>

            <ListBoxItem Content="and head was a garden of weeds"/>

        </ListBox>

        <ListBox Margin="0,115,17,85">

            <SLLB3:Lymeric Verse="There was a monster from Leeds"/>

            <SLLB3:Lymeric Verse="who ate a packet of seeds"/>

            <SLLB3:Lymeric Verse="in less than hour, his nose was a flower"/>

            <SLLB3:Lymeric Verse="and head was a garden of weeds"/>

        </ListBox>

Figure 1 Standard and Sample data Listboxes – Xaml

Figure 2 Standard and Sample data Listboxes

Edit Style

The main sub-menu here is Edit Copy. Essentially I want to steal the current style of the Listbox and make a few adjustments, so Edit Copy inserts the current template for you, good news. So we’re at the style level, lots of colours, fonts, etc. Inside the style is the setter for the template. So with Blend looking at the style you can then select Edit Control Parts (Template) and you’re ready to change the layout…well not quite. What I’d expected to see was a large chunk of Xaml describing the state changes for events such as mouse over, leave, etc. What I get was a very dry few lines showing a content presenter…hmm not much use.

Figure 3 Changing a copy of the default style

Edit Other Styles

The sub menu here ItemContainerStyle is the one I’m after. Translating Blend speak, this creates the Listbox Item Style (and template). Once you have a style for a Listbox item you’re free to edit its Control Parts (Template)…

Figure 4 Changing the Listbox Item style

Edit Control Parts (Template)

If you attempt this with the List Box selected you end up with the dry container style you get from Edit Style. However, you should select this after you’ve gone via Edit Other Styles->ItemContainerStyle, i.e. with the style selected. This will take you to the template of the Listbox item (or Control Part Template in Blendease). Finally we’re at the good stuff, Visual State Manager Xaml everywhere.

Figure 5 Changing the MouseOver state to a "nice" pink

Edit Other Templates

Other Templates has two menus; Edit Generated Items (ItemTemplate), Edit Layout of Items (ItemPanel).

Edit Generated Items (ItemTemplate)

Translating Blend this creates the Data Template, i.e. the controls to render the items of data you’re going to bind to. So for a standard Listbox this would be a TextBlock bound to toString. This is an important template if you want to display other data types, e.g. bound images and captions.

Figure 6 Data Template, at last the data

Edit Layout of Items (ItemPanel)

Item Panel means the control (or controls) that contain the items in the data template, i.e. think of it as the data repeater. In my case this is the template I needed to change in order to get the Listbox to display horizontally rather than vertically.

Figure 7 Changing the layout to a Horizontal StackPanel

 

So there you have it, the first steps in styling & templating a listbox. What I’m looking at doing next is to rearrange the scroll bar…