WPF: Combobox in TreeviewItem

Question

Hi all!

I'm newbie in WPF, so sorry about stupid question.

It is possible to show combobox side by side with selected TreeViewItem?

I need something like shown in the left picture at the following link: http://www.mypicx.com/03242009/Combobox_in_TreeviewItem/

I tried to do thus:

<TreeView Name="treeView1">
<TreeViewItem Header="aaa">
<ComboBox Height="19">
<ComboBoxItem Content="111" IsSelected="True"></ComboBoxItem>
<ComboBoxItem>222</ComboBoxItem>
<ComboBoxItem Content="333"></ComboBoxItem>
</ComboBox>
<TreeViewItem Header="aaa1">
</TreeViewItem>
<TreeViewItem Header="aaa2">
</TreeViewItem>
</TreeViewItem>
<TreeViewItem Header="bbb">
<TreeViewItem Header="bbb1" />
<TreeViewItem Header="bbb2" />
</TreeViewItem>
<TreeViewItem Header="ccc" />
</TreeView>

and the result you can see in the right picture.

Meantime I need to know, how to do this visually. Later I need to do something with SelectedItemChanged event.

Thanks in advance!

P.S. sorry about my english

Answer 1

What you need to do is put your combo box inside your Header like such

<TreeView Name="treeView1">
    <TreeViewItem>
        <TreViewItem.Header>
            <StackPanel Orientation="Horizontal">
                <ComboBox Height="19">
                    <ComboBoxItem Content="111" IsSelected="True"></ComboBoxItem>
                    <ComboBoxItem>222</ComboBoxItem>
                    <ComboBoxItem Content="333"></ComboBoxItem>
                </ComboBox>
            </StackPanel>
        </TreViewItem.Header>
        <TreeViewItem Header="aaa1">
        </TreeViewItem>
        <TreeViewItem Header="aaa2">
        </TreeViewItem>
    </TreeViewItem>
    <TreeViewItem Header="bbb">
        <TreeViewItem Header="bbb1" />
        <TreeViewItem Header="bbb2" />
    </TreeViewItem>
    <TreeViewItem Header="ccc" />
</TreeView>

Answer 2

Use an ItemTemplate. http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/ec6781bb-a81d-4204-bc13-937683110b0d/

Answer 3

Hi guys,

Thank you very much about the answers. Already a few days so I'm trying to do that the combobox will appear only next to selected node. I binded the treeview to the simple XML data file and tried to show the combobox through styles. Here is my XML data:

<?xml version="1.0" encoding="utf-8" ?>
<Root Name="Root">
<Node Name="AAA">
<ChildNode Name="aaa 1"/>
<ChildNode Name="aaa 2"/>
<ChildNode Name="aaa 3"/>
</Node>
<Node Name="BBB">
<ChildNode Name="bbb 1"/>
<ChildNode Name="bbb 2"/>
</Node>
</Root>


And here is my weak attempt:

    <HierarchicalDataTemplate DataType="Node" ItemsSource="{Binding XPath=*}" x:Key="normal">
        <TextBlock Text="{Binding XPath=@Name}"/>
    </HierarchicalDataTemplate>
    <HierarchicalDataTemplate DataType="Node" ItemsSource="{Binding XPath=*}" x:Key="selected">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding XPath=@Name}"/>
            <ComboBox>
                <ComboBoxItem IsSelected="True">111</ComboBoxItem>
                <ComboBoxItem>222</ComboBoxItem>
                <ComboBoxItem>333</ComboBoxItem>
            </ComboBox>
        </StackPanel>
    </HierarchicalDataTemplate>

    <DataTemplate x:Key="normal1" DataType="ChildNode">
        <TextBlock Text="{Binding XPath=@Name}"/>
    </DataTemplate>
    <DataTemplate x:Key="selected1" DataType="ChildNode">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding XPath=@Name}"/>
            <ComboBox>
                <ComboBoxItem IsSelected="True">111</ComboBoxItem>
                <ComboBoxItem>222</ComboBoxItem>
                <ComboBoxItem>333</ComboBoxItem>
            </ComboBox>
        </StackPanel>
    </DataTemplate>

    <Style TargetType="{x:Type TreeViewItem}" x:Key="ContainerStyle">
        <Setter Property="HeaderTemplate" Value="{StaticResource normal}" />
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="HeaderTemplate" Value="{StaticResource selected}" />
            </Trigger>
        </Style.Triggers>
    </Style>

    <XmlDataProvider x:Key="XmlNodeList" Source="XMLFile1.xml"/>

</Window.Resources>

<Grid>
    <TreeView ItemContainerStyle="{StaticResource ContainerStyle}">
        <TreeViewItem Header="{Binding Source={StaticResource XmlNodeList}, XPath=/Root/@Name}" 
                      ItemsSource="{Binding Source={StaticResource XmlNodeList}, XPath=/Root/Node}" />
    </TreeView>
</Grid>

This code pass compilation, but throw exception at run time: Item has already been added. Key in dictionary: 'DataTemplateKey(Node)' Key being added: 'DataTemplateKey(Node)'

I'm understund, that my way is wrong, but what is the solution?