WPF - 选择 TreeView 内 ZFD249A0C2827225CFZ94D

Question

In a UserControl I have a ComboBox with one hardcoded ComboBoxItem.
The ComboBoxItem contains a TreeView.
The content of the TreeView is set dynamically.
The content of each node in the TreeView are strings.
I would like to display the selected node's string in the header of the ComboBox.

I have tried many things and looked at many examples of TreeViews inside ComboBox, but cannot get this to work.

Here is the source. I have removed all namespaces and other boiler-plate code.

UserControl.xaml

<UserControl x:Class="Some.Namespace.TreeViewPopup"
             xmlns:local="clr-namespace:Some.Namespace">
    <ComboBox Name="cmbPopup" Grid.Column="1"
              IsEditable="False"
              Height="25">
        <ComboBoxItem>
            <TreeView Name="tvNodes"
                      Width="200"
                      Background="Transparent"
                      BorderThickness="0"
                      SelectedItemChanged="tvNodes_SelectedItemChanged">
                <TreeView.ItemTemplate>
                    <HierarchicalDataTemplate DataType="{x:Type local:Node}"
                                              ItemsSource="{Binding Nodes}">
                        <TextBlock Text="{Binding Name}" />
                    </HierarchicalDataTemplate>
                </TreeView.ItemTemplate>
            </TreeView>
        </ComboBoxItem>
    </ComboBox>
</UserControl>

UserControl.xaml.cs

public partial class TreeViewPopup : UserControl
{
    private Node SelectedNode { get; set; }

    public TreeViewPopup()
    {
        InitializeComponent();
    }

    private void tvNodes_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
    {
        SelectedNode = tvNodes.SelectedItem as Node;
        cmbPopup.Text = SelectedNode.Name;
    }

    public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register
    (
        nameof(ItemsSource),
        typeof(IEnumerable),
        typeof(TreeViewPopup),
        new PropertyMetadata(null, ItemsSourceChanged)
    );

    public IEnumerable ItemsSource
    {
        get => GetValue(ItemsSourceProperty) as IEnumerable;
        set => SetValue(ItemsSourceProperty, value);
    }

    static void ItemsSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (e.NewValue != e.OldValue && d is TreeViewPopup)
        {
            var instance = d as TreeViewPopup;
            instance.tvNodes.ItemsSource = e.NewValue as IEnumerable;
        }
    }
}

Notice I have the property ItemsSource as custom DependencyProperty. I'm going to populate the TreeView with this property. for now I just hardcode a list in MainWindow.xaml.cs to this property.

Node.cs

public class Node
{
    public string Name { get; set; }
    public ObservableCollection<Node> Nodes { get; set; } = new ObservableCollection<Node>();

    public override string ToString() => Name;
}

MainWindow.xaml

<Window x:Class="Some.Namespace.MainWindow">    
    <TreeViewPopup x:Name="ptv" Height="25" />
</Window>

MainWindow.xaml.cs

public partial class MainWindow: Window
{
    public PopupTreeView()
    {
        InitializeComponent();
    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        var a = new Node { Name = "A" };
        var aa = new Node { Name = "AA" };
        var ab = new Node { Name = "AB" };

        var aaa = new Node { Name = "AAA" };
        var aab = new Node { Name = "AAB" };
        var aac = new Node { Name = "AAC" };

        aa.Nodes.Add(aaa);
        aa.Nodes.Add(aab);
        aa.Nodes.Add(aac);

        a.Nodes.Add(aa);
        a.Nodes.Add(ab);

        var b = new Node { Name = "B" };

        var root = new Node { Name = "Root" };
        root.Nodes.Add(b);
        root.Nodes.Add(a);

        var nodes = new ObservableCollection<Node>();
        nodes.Add(root);

        ptv.ItemsSource = root.Nodes;
    }
}

This will give me a ComboBox with one ComboBoxItem containg the TreeView with all the nodes.
We I select a node in the TreeView the tvNodes_SelectedItemChanged is called and I can "save" the selected node.
Here I try to set the ComboBox's Text property to display the node's Name property.
But this doesn't work. Instead the ComboBox displays the entire TreeView. I assume it select the entire ComboBoxItem.

Aany suggestions how to solve this?

/Steffe

Answer 1

Remove the ComboBoxItem and define an ItemTemplate :

<ComboBox Name="cmbPopup" Grid.Column="1"
          IsEditable="False"
          Height="25">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <ContentControl Content="{Binding}">
                <ContentControl.Style>
                    <Style TargetType="ContentControl">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ComboBoxItem}}"
                                         Value="{x:Null}">
                                <Setter Property="ContentTemplate">
                                    <Setter.Value>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding SelectedItem.Name}" />
                                        </DataTemplate>
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </ContentControl.Style>
            </ContentControl>
        </DataTemplate>
    </ComboBox.ItemTemplate>
    <TreeView Name="tvNodes"
              Width="200"
              Background="Transparent"
              BorderThickness="0"
              SelectedItemChanged="tvNodes_SelectedItemChanged">
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate DataType="{x:Type local:Node}"
                                      ItemsSource="{Binding Nodes}">
                <TextBlock Text="{Binding Name}" />
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>
</ComboBox>