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…”
Navigate to the location you extracted the WPFToolkit.dll file, select it and hit OK.
![clip_image001[6]](http://www.designerwpf.com/wp-content/uploads/2008/10/clip-image0016.png "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]](http://www.designerwpf.com/wp-content/uploads/2008/10/clip-image0011.png "clip_image001[1]")
Step 2) Find the ItemsPresenter. This is what would normally display our ItemsSource.
![clip_image001[3]](http://www.designerwpf.com/wp-content/uploads/2008/10/clip-image0013.png "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]](http://www.designerwpf.com/wp-content/uploads/2008/10/clip-image0015.png "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]](http://www.designerwpf.com/wp-content/uploads/2008/10/clip-image00111.png "clip_image001[11]")
and, in the resulting menu, select “Template Binding –> ItemsSource”.
![clip_image001[7]](http://www.designerwpf.com/wp-content/uploads/2008/10/clip-image0017.png "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]](http://www.designerwpf.com/wp-content/uploads/2008/10/clip-image00113.png "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.
2008 October 02 - Links for today « My (almost) Daily Links:
[...] Denislav Savkov gives us some stats on Silverlight rendering performance in different browsers Patrick Smacchia on Comparing Silverlight and the .NET Framework And take a look at the Page Turner stuff in the WPF and Silverlight BookControls CodePlex project Jeff Wilcox helps us robust up with Silverlight Unit Test Framework: New features & download for RC0 Corrina Barber has started updating her applications; starting with her Red control skin Mike Snow eases up a little today bit still keeps them coming with How to Develop with Silverlight Tools for Free Shawn Wildermuth gives us more data love with Silverlight and ADO.NET Data Service Operations Martin Grayson has updated Blacklight for Silverlight 2 RC0 Texture mapping in Silverlight! Jesse Liberty picks up the multiple post baton today with Dependency Properties, Continued and an Animation Web Cast And I could only go ‘OOOOOOOOOHHHHHH’ when I same this next one from Matthias Shapiro on How To Use a ListView or DataGrid In a ComboBox Drop Down (Without A Line Of Code) [...]
1 October 2008, 11:59 pmSilverlight Cream for October 03, 2008 -- #387:
[...] How To Use a ListView or DataGrid In a ComboBox Drop Down (Without A Line Of Code) [...]
7 October 2008, 1:41 pmRichard Wilburn:
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.
4 February 2009, 2:26 pmWhy we Blend & Custom combo boxes « Richards blog:
[...] controls such as combo-box and change them. This is best demonstrated at the following blog: http://www.designerwpf.com/2008/10/01/how-to-use-a-listview-or-datagrid-in-a-combobox-drop-down-with…. For that blog tutorial you don’t need to add a reference like the tutorial asks if you aren’t [...]
5 February 2009, 12:17 pmRakesh Kumar:
How To Use a ListView or DataGrid In a ComboBox Drop Down (Without A Line Of Code)
24 March 2009, 10:43 pmHi,
Can you share this project with me..I will thankful for this..
Thanks
Rakesh
ditto:
can you please elaborate more on the template binding part?
21 May 2009, 9:51 pmi’m using datagrid and there isn’t itemssource in the datagrid properties