Matthias Shapiro

I need fewer hobbies

How To Use a ListView or DataGrid In a ComboBox Drop Down (Without A Line Of Code)

Super cool new thing I learned today. In WPF, we can make it so that the drop down (popup) on a ComboBox displays the data in a ListView. Because of the fact that I believe the DataGrid will eventually overtake the ListView as the gold standard for data display in WPF, we’ll do it both ways.

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

clip_image001

Navigate to the location you extracted the WPFToolkit.dll file, select it and hit OK.
clip_image001[6]

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

clip_image001[1]

Step 2) Find the ItemsPresenter. This is what would normally display our ItemsSource.

clip_image001[3]

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.

clip_image001[5]

Now, go the properties of that ListView or DataGrid and click on the box to the right of “ItemsSource”

clip_image001[11]

and, in the resulting menu, select “Template Binding –> ItemsSource”.

clip_image001[7]

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.

clip_image001[13]

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.

This entry was posted in combobox, listview, styles, templates, Tutorial, WPF. Bookmark the permalink.

0 Responses to How To Use a ListView or DataGrid In a ComboBox Drop Down (Without A Line Of Code)

  1. ditto

    can you please elaborate more on the template binding part?
    i’m using datagrid and there isn’t itemssource in the datagrid properties

  2. Rakesh Kumar

    How To Use a ListView or DataGrid In a ComboBox Drop Down (Without A Line Of Code)
    Hi,
    Can you share this project with me..I will thankful for this..
    Thanks
    Rakesh

  3. Pingback: Why we Blend & Custom combo boxes « Richards blog

  4. This is an excellent tutorial that demonstrates how powerful expression blend can be. I must say that I will be using blend alot more now, and its awesome that you can generate templates from existing controls.

  5. Pingback: Silverlight Cream for October 03, 2008 -- #387

  6. Pingback: 2008 October 02 - Links for today « My (almost) Daily Links