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.

 This tutorial derives from the general “How to Style the ComboBox” set of tutorials.

First let’s make sure you’re in the right place. In this tutorial, we’re going to style the comboBox drop down (also known as the ComboBox popup) seen highlighted in red below.

We will not be styling the items inside the dropdown (highlighted in blue). You can learn how to do that here.

So… let’s just go after some of the basics in styling the dropdown. We’ll give it a new background, a new border and we’ll round the edges to make it just a little more bubbly.

To start out, we’ll need to get to our comboBox control template, so right click on the comboBox in the Objects and Timeline window and go to “Edit Control Parts (Template) -> Edit a Copy…”

Name it something you like and we’re on our way. 

We’ll be editing the PART_Popup. Whatever you do, don’t change the name to this sucker. Whenever you see a “PART_Something”, it is a necessary part of that specific control (hence the naming convention).

The ComboBox dropdown (which we’ll be calling a popup for the remainder of this post)  is made up of a low cost drop shadow (see more on that here), a border, a scrollviewer and the itemsPresenter.

Most of the standard styling we might want to do is probably going to happen in the Border titled DropDownBorder. We can alter the background and the border brushes easily enough by just changing them in the Properties window. But you may notice some quirky behavior from our scrollviewer when we change the CornerRadius. Below, I’ve changed the CornerRadius to “0,0,10,10” and we can see that we lose part of the corner under the scrollviewer.

We can solve this easily enough by adding some padding through the Border. Below I’ve added a padding of “0,0,2,6“.

Better, but not really ideal. In a perfect world, we would be able to say that the border us able to cut off its content in that nice pretty rounded manner.  (If anyone knows how to do that… let me know, I haven’t given it hours of thought yet, but I’d love to know). In this case, however, this sub-optimization is the price we’re going to have to pay if we don’t want to have to go in and mess with the scrollbar style and template.

This is actually a continuation of my post on getting the ComboBox items to accept text wrapping, so I’ll be working from that point forward. If you’re coming fresh into this, you won’t be missing anything… but that is my explaination for the pictures containing wrapping text.

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.

Continue reading ‘How Do I Style The ComboBox Items?’ »

 The ComboBox is not the most complex of the WPF applications, but it can be a little tricky, so lets do a general overview post of it before we go into the specifics of how we’re going to make it work.

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.

Continue reading ‘The WPF Designers Guide to Styling The ComboBox’ »