Download ComboBox Styling Project Files

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.