Matthias Shapiro

developer/integrator with IdentityMine, infovis enthusiast

How Do I Wrap Text (or Add TextEllipsis) In The ComboBox?

I’ve been spending the past several days fighting with the ComboBox in an attempt to make it so something very simple: Wrap text inside the combo box. I’ve finally figured it out, so I thought I’d share.

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:

ComboBoxDefault

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.

ComboBoxDescriptionBinding

My DataTemplate is shown below for reference.

<DataTemplate x:Key=”WrappingComboTemplate>
<Grid Width=”AutoHeight=”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:

ComboBoxTextWrapHalfDone

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

ComboBoxHalfDoneExpandedAs 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…”

ComboBoxControlTemplateCopy

Go down to the ScrollViewer that holds the ItemsPresenter.

ComboBoxTemplateScrollViewer

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

ScrollViewerVisibility

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.

DataBindingPopupWidth

This will make your comboBox look like this:

ComboBoxWrapAlmostDonw

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

LastMarginTweak

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.

UnfinishedPopupStyle

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

7 Responses to How Do I Wrap Text (or Add TextEllipsis) In The ComboBox?

  1. Pingback: Feb 6th Links: ASP.NET, ASP.NET AJAX, Visual Studio, .NET, WPF - ScottGu's Blog

  2. Pingback: » Daily Bits - February 6, 2008 Alvin Ashcraft’s Daily Geek Bits: Daily links, development, gadgets and raising rugrats.

  3. Pingback: Enlaces 6 de Febrero: ASP.NET, ASP.NET AJAX, Visual Studio, .NET, WPF « Alexander Jiménez

  4. Hi! I “kicked” your post. http://www.dotnetkicks.com/wpf/How_Do_I_Wrap_Text_In_The_ComboBox Thanks for the helpful tip!
    tendrel

  5. Aaron

    I cannot get this to work. Any chance that you could publish some example code to download? I am confused with the DataTemplate. How do you associate the DataTemplate with the combobox?

  6. Matthias Shapiro

    Aaron… I’m completely swamped until this weekend, but check back on Monday and I’ll try my best to get a code sample up.

  7. Manju

    Hello,
    Can you post some working sample please ?
    Thanks a bunch

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>