When last we left our heroes, we has a couple problems. The first was that our items were either black text on a white background and ran together in a very un-designer-y way.

The second was that the selected item background makes your eyes bleed such a horrid blue color you’ll feel like Paul Atreides staring at a stone burner.

Was that a little too geek? My apologies.

Anyway, let’s do something to make this control a little more usable (as well as easier on our eyes).

Highlight your ComboBox and go up to the toolbar, selecting Object -> Edit Other Styles -> Edit ItemContainerStyle -> Edit a Copy…

We’re now in the ItemContainerStyle editing mode. I really just need some demarcation between the items, so I’m going to give the items a BorderBush with a gradient that has a nice blue at the top and fades down to transparency at the bottom. It looks something like this:

We will, of course, want our users to see this border, so let’s give the style a BorderThickness of 1 all around and a Margin of 4 to offer a little space. Our items now look like this:

Better… but we don’t see the trigger for that hideous shade of blue in the style, so we need to go somewhere else to change it. Right click on the Style and go to Edit ControlParts (Template) -> Edit Template

We can see that the template here is exceedingly dull… just a border surrounding a ContentPresenter. We like dull. Dull means it’s not complex. First, let’s do some polishing up… give that border a CornerRadius of 5. Keep in mind that this is Vista-based development… no sharp corners allowed.

Now, let’s kill that blue. Click on the “IsHighlighted = True” trigger at the top…

..and we can see the highlighted state. I changed the Background to a nice soft blue gradient (you can change it to a deep purple with a green bubble for all I care… it’s WPF, go nuts!) This would be great except that I can’t see the Foreground now, so let’s change that to make the text readable.

 I couldn’t figure out how to do this in the design mode, so find the IsHighlighted Trigger in the XAML and insert the bold text below:

<Trigger Property=”IsHighlighted” Value=”true“>
      <Setter Property=”Foreground” Value=”#FF001720“/>
      <Setter Property=”Background” TargetName=”Bd“>
      …

Now our ComboBox items look like this:

Much better.

First of all, if you’re going to test your comboBox design, you should have it hooked up to an ItemsSource. Don’t have one? I have a tutorial in which I walk through attaching an RSS feed to your control. It was originally written for the ListView, but it will work fine for a ComboBox.

To start out… this is your standard ComboBox:

When working on a comboBox, you have a couple of options for the Items inside the ComboBox. If the options never change and are not data-driven, you can just toss come ComboBoxItems into it. Otherwise, you can connect it to some kind of ItemsSource (see the link above).

All of my examples are done with a data-driven ComboBoxes, but you should get the desired results if you run through the tutorials with ComboBoxItems.

First, a little bit about the structure of the comboBox.

The comboBox consists of a couple basic elements. The main part that you would normally click on is a ToggleButton. The information we can see is a ContentPresenter. When you open the ComboBox, you get a popup that is holding an ItemsPresenter.

The ComboBox is a little different inasmuch as it has both a ContentPresenter and an ItemsPresenter, which means that it can take in two different DataTemplates for these different presenters. (If all this is confusing to you, subscribe to my RSS feed… I’m working on a guide to Styles and Templates which will explain all this in detail.)

Anyway, in the spirit of my guide to the ListView, I’m just going to spend the rest of the time guiding you through the basics of how to style the ComboBox. As I get to it, I’ll write the accompanying articles going into each in detail.

Question 1: “How do I style the items in the dropdown?”

Answer: Use the ItemContainerStyle and the accompanying template to define the look and feel of the items.

How to edit the ComboBox ItemContainerStyle in Blend

In the XAML:

Put this in the resources:
<Style x:Key=”MyComboItemStyle” TargetType=”{x:Type ComboBoxItem}“>
</Style>

Put this in the composition:
<ComboBox ItemContainerStyle=”{DynamicResource MyComboItemStyle}” />

Question 2: “How do I change the look of the main ComboBox button (highlighted below)?”

Answer: Use the standard Style and Template properties.

How to Style the main ComboBox in Blend (coming soon).

In the XAML:

Put this in the resources:
<Style x:Key=”MyComboStyle” TargetType=”{x:Type ComboBox}“>
</Style>

Put this in the composition:
<ComboBox Style=”{DynamicResource MyComboStyle}” />

Question 3: “How do I style the ComboBox dropdown (highlighted below)?”

Answer: Go to the Popup control inside the ComboBox template.

How to style the ComboBox drop down in Blend.

In the XAML:

Put this in the resources:
<Style x:Key=”MyComboStyle” TargetType=”{x:Type ComboBox}“>
      <Setter Property=”Template“>
            <Setter.Value>
            …
                  <Popup x:Name=”PART_Popup” >
                        <!– Edit here –>
                  </Popup>
            …
            </Setter.Value>
      </Setter>
</Style>

Put this in the composition:
<ComboBox Style=”{DynamicResource MyComboStyle}” />

There are, of course, other questions related to the ComboBox, but this is just the basics. I’ll look at some of the more intense ComboBox styling tasks in the near future.

 First things first… getting to the ItemContainerStyle using Blend. With the ListView selected, go to the top menu and click:

 Edit Other Styles -> Edit ItemContainerStyle -> Create Empty…

Name your Style and you get tossed into Style editing. Here, you can do all sorts of great things, like… um… changing the background or something.

 OK, I’ll fess up, I’ve found the ItemContainerStyle to be good for the following things (and not too much else):

• Giving your items a nice border.
• Changing up and down margins (how far apart your  items are from one another)
• Changing the HorizontalContentAlignment (like in this post on centering items in a column)
• Changing the VerticalContentAlignment (if you have a thick item, you can get your data to align to the top or center or whatever)

However, in order to get to the real fun stuff with ListView items, we want to go into the ItemContainerStyle template. So right-click on the “ItemContainerStyle” in your “Objects and Timeline” panel and go to:

Edit Control Parts (Template) -> Edit a Copy…

And now you have a copy of your default ListViewItemTemplate. If you want a good example of how a lookless control is constructed, head here. You’ll see how they use split grids and transparent gradients to get a look that maintains it’s feel even when the base background is changed. I’m working inside Vista, so this is what the visual tree of my ListViewItemTemplate looks like:

But if you’re like me, what is interesting about this particular template is not the visual tree… it is the triggers that the template hands to you. Lets look at these triggers one by one.

(If you don’t know where the triggers are, they’re above the Objects and Timeline pane and they look like this:

Clicking on a trigger will give you a preview of what that trigger looks like and will also allow you to change the properties of anything inside the template that will implement when the trigger is active.

You can put these same triggers into your ItemContainerStyle and, as a general rule, I would recommend it. As a general rule, I would recommend putting as much into the style and staying out of the template for the sake of simplicity. However, the style does have some pretty significant limitations, especially in this case. So, for the meantime, we’re just going to futz with it as it has been given to us.)

IsMouseOver = True

Kind of obvious what this does.

IsSelected = True

Again, kind of self-explanitory. When an item is selected, this is what you get.

IsSelected = True and IsSelectionActive = False

This is the default state of the first item in your listview before you’ve done anything to it. I have to admit, it took me quite some time to figure that out. The designers I was working with thought this style would confuse users and so we got rid of it. If you want to get rid of it, just delete this trigger and you’re golden.

IsSelected = True and IsMouseOver = True

In this example, it is subltly different than the IsMouseOver alone, but you can see the difference.

IsEnabled = False

I vaugely recall working on a project in which I tried to get individual items to unenable and I vaugely recall it not working very well. It could be because I was trying to do it in XAML, but the example you’re seeing here is when the entire ListView has IsEnabled set to “False”

A couple of suggestion for getting a good feel of the ItemContainerStyle triggers:

• change the background when the user selects an item
• change the height when the user selects AND mouses over an item.
• change the visibility to “Collapsed” when the user mouses over an item. (This one is sure to make your users roll on the floor with laughter… shortly before they come after you with torch and pitchfork in hand.)

All of these triggers are property triggers, so they are not (as they stand) suitible for triggering any animations. If you’re interested in seeing animations in your ListView items, check out this post (coming soon).

If you’re more interested in what you can do with triggers, check out this post (coming soon).

If you’d like to have that nifty “every-other-item-is-gray” thing going on, here’s a post for you while I try to whip up something of my own.

Please sound off with any more comments if you have additional questions.

And you want them to look like this:

If you’re trying to center something within a ListView column, it’s actually pretty simple.

First, go to your ListView and, if you haven’t already, create an ItemContainerStyle by going to the Object -> Edit Other Styles… -> Edit ItemContainerStyle -> Create Empty…

Within your ItemContainerStyle, set the HorizontalContentAlignment from “Left” to “Stretch“.

Your ItemContainerStyle XAML should now look like this (important stuff in bold):

<Style x:Key=”MyItemContainerStyle“ TargetType=”{x:Type ListViewItem}“>
      <Setter Property=”HorizontalContentAlignment“ Value=”Stretch“/>
</Style>

A point of note: if you want everything to be centered, you can set it to “Center“. However, if you prefer more control over the layout of your columns (as I do), set it to stretch.

Now, go to the DataTemplate for the column you want to center. (If you don’t know how to get to the DataTemplate or how to create one, you can find that information here. Just look for “DataTemplate”.)

Within the DataTemplate, align your bound item so that the HorizontalAlignment is set to “Center“.

Your DataTemplate should now look something like this (important stuff in bold):

<DataTemplate x:Key=”AuthorTemplate“>
      <TextBlock Text=”{Binding Mode=OneWay, XPath=author}” FontSize=”12”  HorizontalAlignment=”Center“ />
</DataTemplate>

Finally, your ListView should already be set up, but just to double check, make sure that your ListView XAML looks something like this:

<ListView ItemContainerStyle=”{DynamicResource MyItemContainerStyle}“ >
      <ListView.View>
            <GridView>
                  <GridViewColumn CellTemplate=”{DynamicResource AuthorTemplate}“ Header=”Author“/>
            </GridView>
      </ListView.View>
</ListView>