Out of curiosity, the other night I tried to put a TreeView in the dropdown of a ComboBox. I wanted to have the item selection mechanism be hierarchical, and whatever node in the tree you select would become the ComboBox's SelectedValue.
I couldn't do it in the span of 2 hours. :( I would have thought that such a thing would be simple in WPF since its composite-based approach to UI construction.
Here's what I tried:
1) Replace the Combo's ItemsPanel with a custom panel. The custom panel would create a TreeView and display the Combo's Items in the tree. I figured out that you have to set the panel's IsItemsHost to false otherwise an exception is thrown saying that you can't add items to a panel that is an items host. But, then I got a NullReferenceException from deep within the framework when I added items to the tree. Dead end.
2) Create a class which exposes a collection of a DataNode class (where each DataNode has a property called ChildNodes to support a hierarchy). Make an instance of that class the sole item in the ComboBox's Items collection. Create a DataTemplate which creates a TreeView to display the DataNodes in that object. This sort of works, but (a) the TreeView appears in the selection box area of the ComboBox, and (b) the TreeView's size in the dropdown does not match the available size to fill (even though the ItemsPanel was set to a DockPanel).
So, how can I put a TreeView in a ComboBox Is there a way to do it with a custom ControlTemplate
How to put a TreeView in a ComboBox?
thisishaydes
lee,
I'm not working with any particular data. I was just trying to put a TreeView in a ComboBox for the fun of it. You could just use some dummy XML data if you want to keep it quick and simple.
vitich
Dinesh Jayadevan
I tried the following
<ComboBox Name="cb1">
<TreeView SelectedValuePath="Header" Width="280" Name="tv1">
<TreeViewItem Header="Employee1">
<TreeViewItem Header="Jesper"/>
<TreeViewItem Header="Aaberg"/>
<TreeViewItem Header="12345"/>
</TreeViewItem>
<TreeViewItem Header="Employee2">
<TreeViewItem Header="Dominik"/>
<TreeViewItem Header="Paiha"/>
<TreeViewItem Header="98765"/>
</TreeViewItem>
<TreeView.Triggers>
<EventTrigger RoutedEvent="TreeView.SelectedItemChanged">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard Duration="0:0:0" Storyboard.TargetName="cb1" Storyboard.TargetProperty="Tag" >
<ObjectAnimationUsingKeyFrames>
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding ElementName=tv1, Path=SelectedValue}">
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</TreeView.Triggers>
</TreeView>
</ComboBox>
changed the Template of combobox(used the one in the sdk) and replaced the ContentPresenter section(Name='ContentSite') with the one below
<ContentPresenter
Name="ContentSite"
IsHitTestVisible="False"
Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Tag}"
Margin="3,3,23,3"
VerticalAlignment="Center"
HorizontalAlignment="Left" />