Showing an Ellipsis for Clipped Text in a ComboBox

October 11, 2008

If you have a ComboBox with a fixed width, and the selected item is wider than that width, it will be clipped.   That is OK, but it’s nice to let the user know that there is more text than what can be seen.  A common way to do that is by having the text show an ellipsis (…) at the end.  If you do not show the ellipsis, the ComboBox looks something like this:

With the ellipsis, it looks like this:

There are two ways to do this, both of them involve a DataTemplate that contains a TextBlock whose TextTrimming property is set to ‘CharacterEllipsis’.  If you populate the ComboBox by setting its ItemsSource property, you must apply the ellipsis via the ItemTemplate property.  On the other hand, if you populate by adding ComboBoxItems to the Items collection directly, you should create a Style for ComboBoxItem that sets the ContentTemplate to the same DataTemplate you’d use in the other situation.

Here’s an example for setting ItemsSource:

Here’s an example when adding the items directly inline:

Download the demo project here.  Be sure to change the file extension from .DOC to .ZIP and then decompress it.