树视图的对象绑定到另一个视图

Question

我有一个需求要在下面列出的一个应用程序中实现。我想知道如何在WPF中实现这一点。

1. 我有一个主WPF窗口，它分为左侧的树状视图和右侧的带有一些文本框和组合框、复选框的窗体。

2. 我想用存储在树节点的标记值中的对象的相应值填充右侧窗体。

3. 每当我单击树状图上的特定节点时，右侧的表单字段将在其标记值中显示对象存储的内容，如果我在右侧表单字段中进行一些修改，该标记值最终将更新。

有人能提供一个链接到示例应用程序吗？

Answer 1

您的问题涉及WPF中的一个非常基本的概念，即（数据）绑定。请从这篇文章开始。

请注意，将有趣/可编辑的对象放在TreeViewItem的Tag属性中对于UI设计来说是一个非常糟糕的主意。Tag属性很容易从代码中访问，但从UI中绑定它将非常困难/复杂，这一切都是因为TreeView本身只公开了一个SelectedItem/SelectedIndex属性，该属性通常返回数据项，而不是TreeViewItems。

请玩这个例子：

<StackPanel Orientation="Horizontal">
    <TreeView x:Name="twi">
        <TreeViewItem Tag="one" Header="111">
            <TextBlock Text="First" />
        </TreeViewItem>
        <TreeViewItem Tag="two" Header="222">
            <TextBlock Text="Second" />
        </TreeViewItem>
        <TreeViewItem Tag="three" Header="333">
            <TextBlock Text="Third" />
        </TreeViewItem>
    </TreeView>
    <StackPanel Orientation="Vertical">
        <TextBlock Text="The text:" />
        <TextBlock Text="{Binding ElementName=twi, Path=SelectedItem}" />
        <TextBlock Text="{Binding ElementName=twi, Path=SelectedItem.Tag}" />
        <TextBlock Text="{Binding ElementName=twi, Path=SelectedItem.Tag.Name}" />
        <TextBlock Text="{Binding ElementName=twi, Path=SelectedItem.Tag.Surname}" />
    </StackPanel>
</StackPanel>

这是整个样品，放在任何地方都可以。左边是物品，右边是一些标签。单击TreeView时，标签将更新并显示所选内容及其Tag属性。当然，TAG设置为简单字符串，因此.Name和.Surname将不显示任何内容。但是，如果将TAG设置为某些数据对象，它将正确显示。请注意，如果你点击TWI，它会按照你的预期进行，但如果你点击了TWI的子，它不会-总而言之，它是选择了子文本！

你需要非常小心你在树视图中放了什么，并且非常小心你把标签的值放在什么/哪里。这不是一个好办法。更典型的是，你会：

public class Person
{
    // properties
    public string Name { .... }
    public string Surname { ... }
    public List<Person> Subordinates { .... }
}
<StackPanel Orientation="Horizontal">
    <TreeView x:Name="twi">
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding Subordinates}">
                <TextBlock>
                    <Run Text="{Binding Name}" />
                    <Run Text=" " />
                    <Run Text="{Binding Surname}" />
                </TextBlock>
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>
    <StackPanel Orientation="Vertical">
        <TextBlock Text="The selected person:" />
        <TextBox Text="{Binding ElementName=twi, Path=SelectedItem.Name, Mode=TwoWay}" />
        <TextBox Text="{Binding ElementName=twi, Path=SelectedItem.Surname, Mode=TwoWay}" />
    </StackPanel>
</StackPanel>

当然，创建一些示例数据，并将其作为ItemsSource提供给treeView。通过这种方式，TreeView将自动创建项目，应用模板，每次单击时，SelectedItem都不会为您提供TreeViewItem s，而是提供可直接编辑的Person。因此，在窗口的右侧，到SelectedItem.Name的简单绑定将"正常工作"，如果您将其设置为双向，它将直接更新Person。

免责声明：我没有运行代码。可能存在错误和拼写错误。代码只是为了显示总体思想。