WPF – ComboView – ComboBox with a TreeView

October 10, 2010

tags: ,
19 comments

Update 26/09/2011 – There is an issue with the control where the entire tree is loaded, which may affect performance and memory allocation when working with many items. Unfortunately, I don’t think I would be able to fix that any time soon.

A few years back, I built a WPF control that I decided to share here now.
The control is called ComboView – A ComboBox showing a TreeView inside to display hierarchical data (you can use it for flat data if you need its features though).

The control provides some really nice built-in features that you can use.
The control uses another control that I had to write, called ‘ExtendedTreeView’. This control inherits from TreeView and adds some features on top of that.
Another thing, I used the ‘Reveal’ control provided by Bag’o’Tricks, it has some very cool stuff, worth a look.

Following is a common mode that you can use it for –

image

In order to see all the options and features, feel free to download the code with the showcases here – Zuker.WpfSamples.zip

Known Limitations:

  1. If you wish to bind to the SelectedViewItems or SelectedViewValues (Supports Two-Way), the source property must be of type ‘ObservableCollection<object>’
    1. If you wish to use SelectedViewValue / SelectedViewValues, you should set SyncSelectedViewValues to true.
  2. If you set selection in code – items or values, the SelectedViewItems property of the ComboView will not necessarily include these items right away.
    1. This is because of the true nature of WPF’s TreeView, I may have to expand the items internally
    2. If you’re dependent on that in the next line, put this logic in Dispatcher.BeginInvoke, it should be ready there.
  3. Since there were some patches along the way, and features that were added at a later stage, the code can be organized better
Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

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=""> <s> <strike> <strong>

*

19 comments

  1. Tal Goro.October 10, 2010 ב 17:33

    Oh exactly on time 🙂 . A very much needed control. Thanks man.

    Reply
  2. Alex GoleshOctober 11, 2010 ב 6:24

    Nice control but wired UI/UX especially when sub-tree (multiple values) could be selected.

    Reply
  3. ThomasDecember 22, 2011 ב 19:37

    Hi,

    Is it possible to select a parent node if only one child node is selected?

    Thanks,

    Reply
  4. Amir ZukerDecember 23, 2011 ב 0:30

    Hi Thomas,

    I’m not sure what you mean exactly, but the container item for the tree view used within the combo view, ExtendedTreeViewItem, has an ‘AllowSelection’ dependency property which you can control to define any logic that you may want.

    There’s an example of setting this property in the showcases, you can check it out.

    I hope that helps

    Reply
  5. ThomasMarch 13, 2012 ב 17:31

    Hi Amir,

    Sorry for the delay. You can see a screenshot of what I need in the following url:

    http://www.dropmocks.com/mBhLGb

    Scenario 1: if I checked only one item (COTONOU), its parent (BENIN) should be half checked.
    Scenario 2: if I checked all the items, BENIN should be full checked.

    I hope you can help me with this.

    Thanks in advance,
    Thomas.

    Reply
  6. JorMarch 13, 2012 ב 20:19

    Hi Amir, is it possible to have some items with checkbox and some items without checkbox on the same combo?

    Thanks!

    Reply
  7. Amir ZukerMarch 14, 2012 ב 10:34

    Thomas,

    You can check the sample of ‘CheckBox Mode – Parent and Childresn Check State Correlation’.

    It shows the built-in mode that provides you with the synchronization between check states of a parent and its children.

    As far as I remember, it doesn’t partially check the parent if only one child is selected (scenario 1).
    If you need it, or need to alter it altogether, you need to implement it as it isn’t provided with the control. (change the code, derived class, attached property, or whatnot)

    Amir

    Reply
  8. Amir ZukerMarch 14, 2012 ב 10:52

    Hi Jor,

    You can check the bottom sample (Customize Selectable and Initial Expanded Items).

    You can do something similar using the ItemContainerStyle for the ExtendedTreeViewItem.

    ExtendedTreeViewItem has a dependency property called ‘ShowCheckBox’.
    You can bind it to whatever you like and control which items would have a checkbox.

    Hope that helps,
    Amir

    Reply
  9. JorMarch 14, 2012 ב 16:29

    Thanks Amir it works perfect. Amazing control! thank you for sharing it 🙂

    Reply
  10. GeorgMarch 19, 2012 ב 11:47

    Please some one can share this control, now i cant able to access that above url.

    Reply
  11. AndreaMarch 27, 2012 ב 6:33

    And how does that mean? I do not understand anything.

    Reply
  12. IgnacioApril 17, 2012 ב 14:51

    Hi Amir, nice control! I am wondering if theres a way to set the parents items of the combobox in a state “half checked” when some of its children are selected, but not all of them.

    Thanks a lot!

    Reply
  13. Amir ZukerApril 18, 2012 ב 13:17

    Hi Ignacio,

    Thomas already asked this question, as far as I remember, it doesn’t partially check the parent if only one child is selected (setting IsChecked to null).

    Unfortunately, if you need it you would have to implement it. (change the code, derived class, attached property, or whatnot)

    Reply
  14. wentaoOctober 28, 2012 ב 3:16

    how can the control set the IsChecked property when first loaded

    Reply
  15. Amir ZukerNovember 5, 2012 ב 9:13

    Wentao,

    I’m not aware of what you’re trying to do, but the ExtendedTreeViewItem has a dependency property ‘IsChecked’ that you can control in any way you like.

    You could do that in code, whenever it is loaded, or use a style if you like. (you can place the style as the ItemContainerStyle)

    Reply
  16. ThomasNovember 23, 2012 ב 13:23

    Hi amir, I´m having this issue when i´m using the combobox:
    I´ve binded the SelectedViewItems property with an ObservableCollection, and the thing is that when I made some changes in this collection(by the viewmodel) the combo is not updating correctly. For example, the header of the combo is not showing the SelectedItems collection.

    This I´m using the control:

    Thanks for your time!

    Reply
  17. Amir ZukerDecember 30, 2012 ב 7:33

    Hi Thomas,

    I’m not sure what the problem is, please contact me through the contact form in this blog site, and I’ll reply to you so you can send me a sample project and I’ll take a look at it.

    Amir Zuker

    Reply
  18. ThomasJanuary 3, 2013 ב 9:28

    hi Amir, is it posible to bind the IsChecked property from the ExtendedTreeViewItem with a
    HierarchicalDataTemplate ?

    I need this, because I have to check some “child nodes” from code behind.

    Thanks,

    Thomas

    Reply
  19. haochengyangApril 18, 2013 ב 9:30

    Thank you for your demo I work requirements, this development…

    Reply