WPF TreeViewItem 模板（图标+文字）

Question

我有这个 TreeView，其中每个项目都包含一个图标 + 一个文本：

    <TreeView x:Name="myTreeView" Height="153" VerticalAlignment="Top" Width="215">
        <TreeView.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding IconSource}"/>
                    <TextBlock Text="{Binding Name}"/>
                </StackPanel>
            </DataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>

如果我使用这个代码隐藏，这是可行的（将每个项目显示为图标+文本）：

ObservableCollection<NameIconPair> pairs = new ObservableCollection<NameIconPair>();
pairs.Add(new NameIconPair() { Name = "item 1", IconSource = src });
pairs.Add(new NameIconPair() { Name = "item 2", IconSource = src });
pairs.Add(new NameIconPair() { Name = "item 3", IconSource = src });
myTreeView.ItemsSource = pairs;

public class NameIconPair {
    public string Name { get; set; }
    public BitmapSource IconSource { get; set; }
}

但如果我不创建 observableCollection 并使用 .ItemsSource，而是创建每个 TreeViewItem 并将其添加到 TreeView，则它不起作用：

   var pair1 = new NameIconPair() { Name = "item 1", IconSource = src };
   var pair2 = new NameIconPair() { Name = "item 2", IconSource = src };
   var pair3 = new NameIconPair() { Name = "item 3", IconSource = src };

   TreeViewItem node1 = new TreeViewItem { Header = pair, IsExpanded = true };
   TreeViewItem node2 = new TreeViewItem { Header = pair, IsExpanded = true };
   TreeViewItem node3 = new TreeViewItem { Header = pair, IsExpanded = true };
   
   node1.Items.Add(node2);
   node1.Items.Add(node3);
   myTreeView.Items.Add(node1);

我怎样才能使这个工作？

Answer 1

将 Children 属性添加到您的 NameIconPair class 以使其分层：

public class NameIconPair
{
    public string Name { get; set; }
    public BitmapSource IconSource { get; set; }
    public List<NameIconPair> Children { get; } = new List<NameIconPair>();
}

...并将 DataTemplate 替换为绑定到 Children 属性:

的 HierarchicalDataTemplate

<TreeView x:Name="myTreeView" Height="153" VerticalAlignment="Top" Width="215">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Children}">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding IconSource}"/>
                <TextBlock Text="{Binding Name}"/>
            </StackPanel>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

您可以在不使用视图模型中的 TreeViewItem 个元素的情况下构建您的树：

var pair1 = new NameIconPair() { Name = "item 1", IconSource = src };
var pair2 = new NameIconPair() { Name = "item 2", IconSource = src };
var pair3 = new NameIconPair() { Name = "item 3", IconSource = src };

var node1 = new NameIconPair { Name = "parent" };
node1.Children.Add(pair1);
node1.Children.Add(pair2);
node1.Children.Add(pair3);

myTreeView.Items.Add(node1); // or add to source collection...

WPF TreeViewItem 模板（图标+文字）

WPF TreeViewItem template (icon+text)

.net

wpf

data-binding