Sometimes you just want stuff to work the way you want it to work. I want a property on the Silverlight ComboBox that says “WrapText”. But alas there is not one, so I have to do it myself.

So your ComboBox looks like this:

and you want it to look like this:

Let’s make that happen.

First, we need to make sure that the DataTemplate is going to act in such a way that it is compatible to having the data inside it wrap.

So… right-click on your ComboBox and go to: “Edit Additional Templates –> Edit Generated Items (Item Template) –> Edit Current”

If that option isn’t available, go to “Create Empty” The DataTemplate in my sample looks like this:

Hopefully, you have the binding information available for your data. If not, check out this post on creating sample data for the purpose of styling things. Make sure all the Widths and Heights (but especially the Widths) are set to “Auto”.

And make sure your TextBox or TextBlock has TextWrapping=”Wrap”

So now your ComboBox wraps in the main section… which is awesome, but you still have this happen when you open up the DropDown (PopUp)

If you want that to wrap as well, the solution isn’t hard so we’ll deal with it here instead of giving it another post.

First,change the HorizontalContentAlignment on the ComboBox to be “Stretch”.

Next, right click on the ComboBox and go to “Edit Additional Templates –> Edit Generated Item Container (ItemContainerStyle) –> Edit a Copy…”

What is happening is that the ItemContainerStyle element is requesting all the space in the world from it’s parent and since the parent with the ultimate authority is a PopUp, it sees no reason to constrict the ItemContainerStyle with irritating constraints, so the text element finds no reason to start wrapping. So, we’re going to tell the ItemContainerStyle that it can only request a certain amount of space. In this particular case, we’re going to set MaxWidth=”200”

And we get this:

And we’re happy.

Or at least I hope we’re happy. If you’re not happy, mention your problem in the comments and I’ll try to get back to you with any tweaks or updates you need.

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 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.

I started with a simple behavior interface:

/// <summary>

/// Represents a contract for encapsulation of logic that can be added

/// to a dependency object through a pattern of attachment.

/// </summary>

/// <typeparam name="T"></typeparam>

public interface IBehavior<T> where T : DependencyObject

{

    /// <summary>

    /// Gets the associated object.

    /// </summary>

    /// <value>The associated object.</value>

    T AssociatedObject { get; }

    /// <summary>

    /// Attaches to the specified associated object.

    /// </summary>

    /// <param name="associatedObject">The associated object.</param>

    void Attach(T associatedObject);

    /// <summary>

    /// Detaches from the associated object.

    /// </summary>

    void Detach();

}

Which I used to implement a ComboBoxBehavior class.  I chose to use FrameworkElement because I wanted to be able to attach this ComboBox to different controls.  Possibly a TextBlock, a TextBox, a Border … any number of controls.  We’ll come back to this later …

public class ComboBoxBehavior : IBehavior<FrameworkElement>

{

    ...

}

After creating the behavior I created a simple static class which had a single attached property of type ComboBoxBehavior.

public static class Behaviors

{

    public static readonly DependencyProperty ComboBoxProperty =

        DependencyProperty.RegisterAttached(

            "ComboBox",

            typeof(ComboBoxBehavior),

            typeof(Behaviors),

            new PropertyMetadata(

                new PropertyChangedCallback(OnComboBoxChanged)

            )

        );

    ...

}

Attach() and Detach() are called in the property changed callback.

private static void OnComboBoxChanged(

    FrameworkElement element,

    ComboBoxBehavior oldValue,

    ComboBoxBehavior newValue)

{

    if (oldValue != null)

    {

        oldValue.Detach();

    }

    if (newValue != null)

    {

        newValue.Attach(element);

    }

}

You can then wire up the behavior in XAML … I’m using a Border control in this example.

<Border

    xmlns:local="clr-namespace:SilverlightComboBox">

    <local:Behaviors.ComboBox>

        <local:ComboBoxBehavior

            Opened="SimpleComboBoxBehavior_Opened"

            ItemSelected="SimpleComboBoxBehavior_ItemSelected"

            ShowComboBoxCommand="{StaticResource ShowComboBoxSimple}">

        </local:ComboBoxBehavior>

    </local:Behaviors.ComboBox>

    <TextBlock

        x:Name="uxSimpleComboBox"

        Margin="4,0,4,0">

    </TextBlock>

</Border>

So onto the workhorse … the behavior itself.  The way I built this behavior to work is it fires an event, Opened,  when the DropDown is opened, in which you can set the ItemsSource and the SelectedIndex of the ItemsSource, as demonstrated in the following code:

private void SimpleComboBoxBehavior_Opened(

    object sender, ComboBoxOpenedEventArgs e)

{

    List<string> strings = new List<string>();

    strings.Add("A");

    strings.Add("B");

    strings.Add("C");

    strings.Add("D");

    e.ItemsSource = strings;

    var index = strings.IndexOf(uxSimpleComboBox.Text);

    e.SelectedIndex = index;

}

Once the user selects a value another event is fired, ItemSelected, which can also be handled:

private void SimpleComboBoxBehavior_ItemSelected(

    object sender, ComboBoxItemSelectedEventArgs e)

{

    if (e.SelectedItem != null)

    {

        uxSimpleComboBox.Text = e.SelectedItem.ToString();

    }

}

You may be wondering why I took this approach.  I decided to go down the eventing route because as I mentioned previously, I wanted to be able to attach this behavior to lots of different controls.  As such I felt that it should be up to the implementer to display the data as needed.

I also decided to use commands to drive the opening and closing of the DropDown.  This allows the user to declaratively specify when the DropDown is opened or closed.  If you look at the XAML for the behavior I’m wiring up a ShowComboBoxSimple command to the ShowComboBoxCommand.

ShowComboBoxCommand="{StaticResource ShowComboBoxSimple}"

This is an ICommand of type MultiDelegateCommand.  MultiDelegateCommand is a command which can register multiple delegates to call when it is executed.

I registered a MultiDelegateCommand instance in the Application Resources to be able to use it in the markup:

public Page()

{

    Application.Current.Resources.Add(

        "ShowComboBoxSimple",

        new MultiDelegateCommand()

    );

    ...

    InitializeComponent();

    ...

}

Lastly, I wanted to show the DropDown anytime any portion of the control I’m attaching to is clicked.  This is accomplished by subscribing to the MouseLeftButtonUp event when the associated object is being attached:

/// <summary>

/// Attaches to the specified associated object.

/// </summary>

/// <param name="associatedObject">The associated object.</param>

public void Attach(FrameworkElement associatedObject)

{

    AssociatedObject = associatedObject;

    AssociatedObject.MouseLeftButtonUp += AssociatedObject_MouseLeftButtonUp;

    AssociatedObject.LostFocus += AssociatedObject_LostFocus;

}

private void AssociatedObject_MouseLeftButtonUp(

    object sender, MouseButtonEventArgs e)

{

    if (ShowComboBoxCommand != null && !IsDropDownOpen)

    {

        ShowComboBoxCommand.Execute();

    }

}

And that’s basically it!  You may be wondering … does this control support complex types?  You betcha! The source show’s a sample of working with complex types.  Here is shown a complex City type with a Name property.

<DataTemplate x:Key="CityTemplate">

    <TextBlock

        Text="{Binding Name}"

        ToolTipService.ToolTip="{Binding Name}"/>

</DataTemplate>

...

<local:Behaviors.ComboBox>

    <local:ComboBoxBehavior

        Opened="ComplexComboBoxBehavior_Opened"

        ItemSelected="ComplexComboBoxBehavior_ItemSelected"

        ShowComboBoxCommand="{StaticResource ShowComboBoxComplex}">

        <local:ComboBoxBehavior.DropDownTemplate>

            <DataTemplate>

                <ListBox ItemTemplate="{StaticResource CityTemplate}" />

            </DataTemplate>

        </local:ComboBoxBehavior.DropDownTemplate>

    </local:ComboBoxBehavior>

</local:Behaviors.ComboBox>

Download: SilverlightComboBox.zip

Hope that helps!

Joe

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”.