This tutorial is done entirely in Blend and without a line of code.

Step 0) (for the DataGrid only)

Go to Code Plex and download the WPF Toolkit. Extract to a convenient location.

Right-Click on the References folder in your project tab and click “Add Reference…”

Navigate to the location you extracted the WPFToolkit.dll file, select it and hit OK.

Step 1) Select the ComboBox you wish to change and edit the ControlTemplate by right-clicking and selecting “Edit Control Parts (Template) –> Edit a Copy…”

Step 2) Find the ItemsPresenter. This is what would normally display our ItemsSource.

We’re going to get rid of it. And the ScrollViewer for good measure.

Step 3) Where the ScrollViewer is, put in a ListView or a DataGrid, whichever one you’re using.

Now, go the properties of that ListView or DataGrid and click on the box to the right of “ItemsSource”

and, in the resulting menu, select “Template Binding –> ItemsSource”.

Set the DataContext of the ListView or DataGrid to the DataContext of the parent ComboBox using the same process.

And… you’re done! Open the ComboBox and you will see that you can select items in the ListView or DataGrid in the ComboBox dropdown and see those items change the selection of the ComboBox.

You’ll notice that this is probably not yet an ideal solution. For example, when we select an item, the dropdown doesn’t automatically close. Your best bet is to use the SelectionChanged event to trigger some logic to close the ComboBox dropdown.

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.

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.

OK, first of all, make sure that your ComboBox is hooked up to something, even if that something is some random RSS feed. I have a post that can help you with that over here. Bind your comboBox to the “Items” part of the New York Times RSS feed.

You need to do this because, if you do not, you will have to set the same data template to every single ComboBoxItem that you add to the ComboBox. And that’s just no fun.

Starting out, your ComboBox should look something like this:

Right click on your ComboBox and select “Edit Other Templates -> Edit Generated Items (ItemTemplate)-> Create Empty…” Give your new data template a name and Blend will take you into the Data Template design.

Put a Grid in your data template and a TextBlock inside that. Set the TextWrapping in your TextBlock to “Wrap” and set your binding. You can set the binding visually by clicking on the little box to the right of the “Text” property in the TextBlock and going to the “DataBinding” option.

In the resulting binding screen, go to the Explicit Data Context tab and click on whatever you want. I chose “description” because it is generally long enough to wrap in almost all cases.

My DataTemplate is shown below for reference.

<DataTemplate x:Key=”WrappingComboTemplate“>
<Grid Width=”Auto” Height=”Auto“>
<TextBlock Text=”{Binding Mode=OneWay, XPath=description}” TextWrapping=”Wrap“/>
      </Grid>
</DataTemplate>

If you’re trying to give your text ellipses, ignore the TextWrapping property and make your TextBlock property to one of the following:

TextTrimming=”WordEllipsis”

TextTrimming=”CharacterEllipsis”

Your combo box should now look something like this:

This is good. This is progress. But when you open it, it looks like this:

As you can see, it just keeps going and going. Let’s fix that.

Right click on your comboBox and go to “Edit Control Parts (Template) -> Edit a Copy…”

Go down to the ScrollViewer that holds the ItemsPresenter.

Take note… this is an important WPF lesson. Some layouts stretch to contain the items inside them. Unless you put limits on the stretching, they’ll just go on and on forever. This is really, really bad if you’re trying to make your text wrap or give your text ellipses because the text element is looking for something that will give it a hard border and an expansive layout won’t.

This is what has happened here. Because the ScrollViewer HorizontalScrollBarVisibility default is “Auto”, the ScrollViewer thinks it has all the space in the world and decides to take advantage of your real-estate generosity.  Lay the smack-down on that insolent ScrollViewer: set the “HorizontalScrollBarVisibility” to “Disabled”.

Now, that alone has done exactly nothing. Why? Because the popup that it is placed in still thinks it has all the space in the world. So go to the popup (named PART_Popup) and click on the box next to the “Width” property and go to “DataBinding”. When the data binding window opens, select the “Element Property” tab, then select the fourth item down in the left hand pane and “ActualWidth” in the right hand pane.

This will make your comboBox look like this:

You can see that the ScrollViewer is slightly cut off… which is irksome. We’ll solve this by giving our ScrollViewer a “Margin” of  “0,0,4,0″.

If this is all you want to do… you’re done. Me? I can’t stand the fact that all this text runs together so much.

The easiest way to deal with is to do some styling back in the DataTemplate we created. The best way to deal with this is to go into the ItemContainerStyle for the ComboBox, which I deal with in my post, “Styling ComboBox Items”.