Download ComboBox TextWrapping Tutorial Project

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.