Wpf ListBox 数据绑定以显示 TreeViewItem 详细信息答案

【问题标题】：Wpf ListBox data binding to display TreeViewItem detailsWpf ListBox 数据绑定以显示 TreeViewItem 详细信息
【发布时间】：2015-08-31 07:21:42
【问题描述】：

我正在使用 WPF，并且在我的表单绑定到模型上有一个 TreeView。对象具有属性，我想将选定项目（在树视图中）属性绑定到列表框，但我不知道如何做到这一点。我的代码是：

酒吧类：

public class Bar
{
    string barName;
    List<bar> children;
    List<Foo> attrs;

    public string BarName
    {
        get { return barName; }
        set { barName = value; }
    }

    public List<Folder> Children
    {
        get { return children; }
        set { children = value; }
    }

    public List<Foo> Attributes
    {
        get { return attrs; }
        set { attrs = value; }
    }

    public Bar(string name)
    {
        barName = name;
        children = new List<Bar>();
        attrs = new List<Foo>();

        attrs.Add(new Foo { Name = "Attr1: " + name });
        attrs.Add(new Foo { Name = "Attr2: " + name });
        attrs.Add(new Foo { Name = "Attr3: " + name });
    }
}

Foo 类：

public class Foo
{
    public string Name { get; set; }

}

填充模型：

        Bar bar = new Folder("bar1");
        bar.Children.Add(new Bar("bar1.1"));
        bar.Children[0].Children.Add(new Bar("bar1.1.1"));
        bar.Children.Add(new Bar("bar2"));

        this.DataContext = bar;

还有 XAML：

<Window.Resources>
    <ResourceDictionary>
        <HierarchicalDataTemplate DataType="{x:Type local:Bar}"
                                      ItemsSource="{Binding Children}">
            <Grid Margin="5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="16"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding BarName}"
                               Foreground="Black"
                               TextTrimming="CharacterEllipsis"
                               TextWrapping="Wrap"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Top"
                               Grid.Column="1"/>
            </Grid>
        </HierarchicalDataTemplate>
    </ResourceDictionary>
</Window.Resources>
<Grid>

    <TreeView Height="162" HorizontalAlignment="Left" Margin="203,0,0,0" Name="treeView1" VerticalAlignment="Top" Width="288" ItemsSource="{Binding Children}"/>
    <ListBox Height="100" HorizontalAlignment="Left" Margin="203,168,0,0" Name="listBox2" VerticalAlignment="Top" Width="288" ItemsSource="{Binding Name}"/>

</Grid>

现在 TreeView 绑定工作正常，我显示了一个 Bar.Name，但 ListBox 是空的。请解释一下，我该怎么办？

【问题讨论】：

Folder和Bar类有什么关系？我认为您的示例不是 100% 完成的。

标签： c# wpf xaml data-binding

【解决方案1】：

您将列表框绑定到名称，因此它试图在您的 Bar 类中找到一个名为“名称”的属性。我相信您实际上想要做的是显示当前在 TreeView 中选择的项目的属性。所以绑定到 TreeView 的 SelectedItem 并将 DisplayMemberPath 设置为“Name”：

    <ListBox Height="100" HorizontalAlignment="Left" Margin="203,168,0,0" Name="listBox2" VerticalAlignment="Top" Width="288" ItemsSource="{Binding SelectedItem.Attributes, ElementName=treeView1}" DisplayMemberPath="Name"/>

这会起作用，但更好的办法是在 Bar 类中为当前选定的项目（例如“CurrentTreeItem”）创建一个成员，并将树列表的 SelectedItem 和 ListBox 的源项目绑定到该属性，这样在至少您可以在设置器等中放置断点，并确保您的前端控件正常触发。但是这样做的问题是您似乎不支持 IPropertyChange 通知（如果您不知道那是什么，那么请放弃您正在做的事情并在继续之前点击 Google）。

【讨论】：

另一个问题是 Treeview 的 SelectedItem 属性是只读属性。

【解决方案2】：

您可以通过将 xaml 更改为

将列表框直接绑定到 TreeView 选定项

 <TreeView Height="162" HorizontalAlignment="Left" Margin="203,0,0,0" Name="treeView1" VerticalAlignment="Top" Width="288" ItemsSource="{Binding Source}" />
 <ListBox DisplayMemberPath="Name" Height="100" HorizontalAlignment="Left" Margin="203,168,0,0" Name="listBox2" VerticalAlignment="Top" Width="288" ItemsSource="{Binding  Path=SelectedItem.Attributes, ElementName=treeView1}"/>

遗憾的是，树视图的选定项是只读属性，因此您无法轻松地在视图中创建属性并将列表框和树视图绑定到它。

您还应该将人口更改为

 public ObservableCollection<Bar> Source { get; set; }
    public MainWindow()
    {
        InitializeComponent();
        Bar bar = new Bar("bar1");
        bar.Children.Add(new Bar("bar1.1"));
        bar.Children[0].Children.Add(new Bar("bar1.1.1"));
        bar.Children.Add(new Bar("bar2"));
        Source = new ObservableCollection<Bar>() { bar };
        this.DataContext = this;
    }

请注意，您必须实现 INotifyPropertyChanged 接口以允许绑定自动更新

【讨论】：