This post is meant to be a center point for topics related to styling the Silverlight 3 ComboBox. It will go over the basic about ComboBox styling and will also get updated with links to tutorials about common design problems with the ComboBox.

So, let’s get started…

If you want to change the look of the main ComboBox or the ComboBox drop down (popup),

you’re going to want to change the main template of the ComboBox.

As an aside, in order to make this as simple as possible, we’re not going to connect out ComboBox to any data… we’re just going to add a bunch of ComboBoxItems to it. To do this, click on the double-arrow at the bottom of the toolbar and type “combo” into the search field.

Click on the ComboBoxItem and draw it into the ComboBox a couple times. This will give your items some weird heights and widths, so change those if that bothers you. We now have enough items to be able to see the drop down for the purposes of styling it.

OK… let’s get started with actually working on the ComboBox template. Right click on the ComboBox and going to “Edit Template –> Edit a Copy…”

This will dump a copy of the default ComboBox style and template into your resources that you can play around with.

Let’s say we want to do something as simple as changing the corners in the main comboBox and the drop down to make them a little more rounded.

When we look at the template, we should see something that looks like this:

Let’s start with rounding the corners of the pop-up, since we can do that from right here. On the PopupBorder element, let’s change the CornerRadius to “0,0,16,16”. And let’s change the border color and thickness just cause we wanna. We end up with something like this:

Now, lets work on changing the corners on the rest of the ComboBox. As it turns out, most of the visual elements in the ComboBox are in the DropDownToggle ToggleButton and go to ControlTemplate by right clicking on it and going to “Edit Template –> Edit Current”

Now, we can see 8 rectangles that make up the design of the ComboBox. If you wanted to simplify the design, you could get rid of them and put something else in, but we’re going to assume for the moment that you just want to change the corners. Go through the rectangles and if RadiusX and RadiusY are 3, change them to 16 an if they are 2, change them to 15.

  becomes

And you have something that is… not that attractive, but it is definitely different.

In this post, we’re going to build a template for a column and style that template so the data in that column is all styled the same way, but different from the data in the rest of the list view. Kind of like this:

If you’re following from the RSS Feed post: go to the listview in the main composition and right click on your listivew and go to “Edit Other Templates -> Edit Generated Item (ItemTemplate) -> Edit a Copy…”

Not following from the RSS Feed post: go to the listview in your composition, right click on your listview and co to “Edit Other Templates -> Edit Generated Item (ItemTempalte) -> Create Empty…”

 Name it whatever you like (I named mine “TitleTemplate”) and hit OK.

RSS: If you had a template Blend will create a copy of your original source template with all the bindings in place. Get rid of all the bindings you don’t want. I think the easiest way is to simply go into the XAML and do this. Right click on any item and click the “View XAML” and delete any binding that doesn’t have “title” in it. When we’re done, your XAML should look like this:

<DataTemplate x:Key=”TitleTemplate“>
      <StackPanel>
            <TextBlock Text=”{Binding Mode=OneWay, XPath=title}“ />
      </StackPanel>
</DataTemplate>

Not RSS: Blend will create the basic DataTemplate markup for you and toss you into a DataTemplate editing mode.

From here, you can draw a Grid directly into the composition and a TextBlock directly into the Grid. Reset the Width and Height of the Grid and TextBlock to Auto and reset the Margins to “0,0,0,0″. Assign the TextBlock the proper Bindings in order to get it to show the proper data. Your XAML should look something like this.

<DataTemplate x:Key=”TitleTemplate“>
      <Grid>
            <TextBlock Text=”{Binding MySpecialBindings}“ />
      </Grid>
</DataTemplate>

Note: If you need to get back to a design view of your DataTemplate, just go the resources tab on the right, expand wherever you saved your template and click on the right hand icon of template you want to edit. For DataTemplates, this icon is unhelpfully blank.

From here we can style the TextBlock directly in the DataTemplate using the Properties panel. Bold it, color it, skew it, turn it upsidedown, give it TextTrimming or TextWrapping or whatever we want. When finished, head back to the main composition view.

Click on the listview and, in the Properties section, expand “Miscellaneous” and then expand “View (GridView)” and click on the “Columns (Collection)” button.

Up pops the “GridViewColumn Collection Editor: Columns” window (which should be labeled something less obfuscating like “ListView Column Editor”).

Here we can create columns to aptly aid our evil schemes. If you’re following along from my RSS tutorial, we can create three new columns using the “Add Another Item” button (which should be labeled “Add Another Column”) and give them the following headers using the Header input in the Properties section:

“Title”
“Author”
“Description”
“Publication Date”

If we want all our data to look the same with basic text elements and no fancy stuff, we can use DisplayMemberBinding and check out my post on that (coming soon).

However, if we want the special styling applied, we can choose the particular GridViewColumn to be specially styled and apply the template we’ve created.

(I feel like I’m writing a choose-your-own-adventure here. “If you want Johnny to answer the doorbell, turn to page 57. If you want Johnny to escape out the window, turn to page 23.”)

Anyway.

Click on the GridViewColumn with the “Title” header and click the little box to the right of “CellTemplate” In the resulting menu click on “Local Resource” and select the DataTemplate that we’ve just created. Click “OK”.

And viola! Our listview shows up all sorts of custom designed happiness.

ListView Frequently Asked Questions pertaining to ColumnHeader issues:

How do I make it so that, instead of cutting off the text in my column when I shorten it, my text displays ellipsis? (Example: “blahblahb…”)

which is closely related to:

How do I make it so that my text wraps when I shorten my columns?

So I deal with them in the same post here.

My binding points to an image source. How do I make it so that the image it points to shows up in the column instead of the stupid image source? (coming soon)
How do I center something in my ListView column?