Showing an Ellipsis for Clipped Text in a ComboBox

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.

18 Responses to Showing an Ellipsis for Clipped Text in a ComboBox

  1. Karl Shifflett says:

    Josh, you are the MAN!!

    Thanks for sharing with us Mortals!!

  2. marlongrech says:

    cool stuff Josh… thanks for sharing

  3. TravisPUK says:

    Great tip! I have been trying to get it working for a combobox that is bound in code to a dataset… unsuccessfully. I get an error saying that I cannot have a datatemplate and a displaymemberpath. Any tips?

    Thanks

  4. Josh Smith says:

    @Marlon, Thanks dude!

    @TravisPUK, Are you setting both the ItemTemplate and DisplayMemberPath properties? If so, you can’t do that. Only one or the other.

  5. TravisPUK says:

    Josh,

    If I don’t define the DisplayMemberPath in the codebehind, how to I identify which value of the DataSet to bring through into the combobox display value in the ItemTemplate… call me a noob?

  6. Josh Smith says:

    Noob,
    🙂

    The elements in a DataTemplate use their own bindings to determine what property values to use. DisplayMemberBinding is basically just a convenience API that prevents you from having to create a DataTemplate which uses that binding.

    Josh

  7. TravisPUK says:

    Josh,

    Cool, so essentially instead of using DisplayMemberPath, I could just create the dataTemplate and rather than define the generic ItemsSource=”{Binding}” in my combobox I could put Text=”{Binding columnname}” into the DataTemplate?

    TravisPUK

  8. Josh Smith says:

    You’ll still need to set the ItemsSource.

  9. TravisPUK says:

    Josh,

    Great thanks for the info.

    TravisPUK

  10. Corrado Cavalli says:

    Mr WPF,
    Thanks again for the long list of tips you share (nearly) everyday

  11. […] Josh Smith Showing an Ellipsis for Clipped Text in a ComboBox […]

  12. Rob Burke says:

    I saw the title of this blog post, and guessed at the DataTemplate solution, clicked through to your article, and just wanted to stop for a moment and thank you for posts like this.

    In the scramble to build an app, this is exactly the sort of search-engine-friendly tip that I am grateful for every day I develop with WPF🙂

    Cheers
    Rob

  13. Eric Kaufman says:

    Josh,

    Great idea man. I am using it in one of my applications. However, now the combobox lost the search functionality. (When you it selected the item that starts with those letters). Any suggestions?

    Thanks

  14. Josh Smith says:

    Eric,

    I’m not sure what’s up with that. I’d have to look into it.

    Josh

  15. Very nice (as usual ;)). Any idea how to do something similar with the XamRibbon’s ComboEditorTool? No ContentTemplate in that one. That could come in handy.

  16. Eric Kaufman says:

    Josh,

    Any update on using the keyboard search functionality?

    Thanks!

    Eric

  17. Josh Smith says:

    Eric, no I don’t know what’s up with that.

    Josh

%d bloggers like this: