在WPF中使用TreeView进行数据绑定

Question

我正在使用数据绑定和树视图，但无法在WPF中填充TreeView。 我认为我相对较近，只是在某个地方做了些微调整，但我似乎找不到它。

这是我的Project类：

public class Project
{
    public Project(string Name, bool isFolder, Project ParentFolder)
    {
        this.Name = Name;
        this.isFolder = isFolder;
        Children = new List<Project>();

        if (ParentFolder == null)
        {
            Path = Name;
        }
        else
        {
            Path = ParentFolder.Path + " > " + Name;
        }
    }
    public string Path { get; private set; }
    public string Name { get; set; }
    public bool isFolder { get; set; }
    public List<Project> Children { get; set; }

    public IEnumerable<Project> ChildFolders
    {
        get
        {
            return Children.Where(p => p.isFolder);
        }
    }

    public object Icon
    {
        get
        {
            if (isFolder)
            {
                return 0; // return folder icon
            }
            else
            {
                return 1; // return project icon
            }
        }
    }

    public IEnumerable<Project> SearchRecursively(string SearchString)
    {
        return GetAllChildren.Where(p => p.Name.Contains(SearchString));
    }

    private List<Project> GetAllChildren
    {
        get
        {
            List<Project> allChildren = new List<Project>();
            foreach(Project child in Children)
            {
                allChildren.AddRange(child.GetAllChildren);
            }
            return allChildren;
        }
    }
}

}

这是我的MaiWindow.xaml.cs类，将用于制作测试数据：

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.BuildData();
        }

        private void BuildData()
        {
           List<Project> parents = new List<Project>();
            Project parentOne = new Project("Apple", true, null);
            Project parentTwo = new Project("Samsung", true, null);
            Project parentThree = new Project("Google", true, null);
            parents.Add(parentOne); parents.Add(parentTwo); parents.Add(parentThree);

            Project appleMacBook = new Project("Mac", false, parentOne);
            Project appleIpad = new Project("iPad", false, parentOne);
            Project appleiPhone = new Project("iPhone", false, parentOne);

            Project samsungGalaxy = new Project("Galaxy", false, parentTwo);
            Project samsungNote = new Project("Note", false, parentTwo);

            Project googlePixel = new Project("Pixel", false, parentThree);
            Project googleChromecast = new Project("Chromecast", false, parentThree);

            parents[0].Children.Add(appleMacBook); parents[0].Children.Add(appleIpad); parents[0].Children.Add(appleiPhone);
            parents[1].Children.Add(samsungGalaxy); parents[1].Children.Add(samsungNote);
            parents[2].Children.Add(googlePixel); parents[2].Children.Add(googleChromecast); 

        }
    }
}

这是我试图显示TreeView的XAML。 现在，它只是空白。 我将不胜感激任何提示。

<TreeView x:Name="Hierarchy" Grid.Column="4" HorizontalAlignment="Left" Height="631" Margin="0,58,0,0" Grid.Row="1" VerticalAlignment="Top" Width="265"
              ItemsSource="{Binding parents}">
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding parents}" DataType="{x:Type self:Project}">
                <TreeViewItem Header="{Binding Name}"></TreeViewItem>
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>

编辑：

这是Property类：

 public string Name
    {
        get
        {
            return name;
        }
        set
        {
            name = value;
            OnPropertyChanged("Name");
        }
    }
    private string name { get; set; }
    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged(string propertyName)
    {
        if(PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

XAML：

<TreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding ChildFolders}">
                <StackPanel Orientation="Horizontal" >
                    <Image Source="{Binding Icon}" Margin="5, 5, 5, 5"></Image>
                    <TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" BorderThickness="0" FontSize="16" Margin="5"/>
                </StackPanel>
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>

因此，这似乎并没有引发变更事件。 我知道这是因为Path设置为Name +“>”。 当我更改名称时，路径不反映更改。 如果可以的话，它只会显示我以前的Name值是什么。

if (ParentFolder == null)
        {
            Path = Name;
        }
        else
        {
            Path = ParentFolder.Path + " > " + Name;
        }

编辑：

public Project(string Name, bool isFolder, Project ParentFolder)
    {
        this.Name = Name;
        this.isFolder = isFolder;
        Children = new List<Project>();
        this.ParentFolder = ParentFolder;
    }
    public string Path
    {
        get
        {
            return this.ParentFolder + " > " + this.Name;
        }
        set
        {
            this.Path = Path;
        }
    }

XAML：

<TextBox x:Name="FolderNameBox" Grid.Column="1" Background="White" Grid.Row="1" Grid.ColumnSpan="5" 
               Margin="0,0,287,654.333" VerticalContentAlignment="Center"
               Padding="6" FontSize="16"
               IsReadOnly="True"
               Text="{Binding ElementName=Hierarchy, Path=SelectedItem.Path, UpdateSourceTrigger=PropertyChanged}">
    </TextBox>
    <TextBox x:Name="SearchProjectsBox" Grid.Column="5" Background="White" Grid.Row="1" Text="Search Projects" 
        Margin="47.333,0,0,654.333" VerticalContentAlignment="Center" Foreground="LightGray" Padding="6" FontSize="16" HorizontalAlignment="Left" Width="268" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus"/>
    <TreeView x:Name="Hierarchy" Grid.Column="4" HorizontalAlignment="Left" Height="631" Margin="0,58,0,0" Grid.Row="1" VerticalAlignment="Top" Width="226" 
              ItemsSource="{Binding Projects}">

        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding ChildFolders}">
                <StackPanel Orientation="Horizontal" >
                    <Image Source="{Binding Icon}" Margin="5, 5, 5, 5"></Image>
                    <TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" BorderThickness="0" FontSize="16" Margin="5"/>
                </StackPanel>
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>
    <Grid Grid.ColumnSpan="2" Grid.Column="4" HorizontalAlignment="Left" Height="631" Margin="245,58,0,0" Grid.Row="1" VerticalAlignment="Top" Width="540">
        <ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden">
            <ListView Margin="0,0,10,0" Name="ProjectView" ItemsSource="{Binding Projects}" FontSize="16" Foreground="Black">
                <ListView.View>
                    <GridView ColumnHeaderContainerStyle="{StaticResource GridHeader}">
                        <GridViewColumn Header="Name" Width="200" DisplayMemberBinding="{Binding ElementName=Hierarchy, Path=SelectedItem.Name, UpdateSourceTrigger=PropertyChanged}"></GridViewColumn>
                        <GridViewColumn Header="Directory" Width="328" DisplayMemberBinding="{Binding ElementName=Hierarchy, Path=SelectedItem.Path, UpdateSourceTrigger=PropertyChanged}"></GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>
        </ScrollViewer>
    </Grid>
</Grid>

路径也会更新，但是当我看到它时，它将显示项目的路径，而不是名称的更改。 它实时更改，但不保存String值。仅注册已发生更改。

这也是我的财产变更。

public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged(string propertyName)
    {
        if(PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

Answer 1

您在这里遇到一些问题。

ItemsSource="{Binding parents}"

这是parents ：

private void BuildData()
{
    List<Project> parents = new List<Project>();

您要让XAML检查代码隐藏类中的所有方法，以查找名为parents局部变量。 这不是合理的要求。

如果要绑定到parents有一些要求：必须是...

1. public ...
2. 属性（不是字段-需要get块）...
3. 无论对象是TreeView的DataContext。

这些都不是真的。

还有两件事-不是必需的，而是一个非常好的主意：

1. 将其设置为ObservableCollection<T>而不是List<T> ，以便它将通知UI添加或删除的项目。
2. 拥有它的类应该是viewmodel类，而不是您的window / usercontrol。 当我们说“ viewmodel”时，是指它实现INotifyPropertyChanged并在其属性值更改时引发PropertyChanged 。 同样，这是关于使UI知道更改的信息。

使绑定始终了解UI的含义：它们侦听视图模型中的更改并更新UI。

因此，您需要一个如下所示的主视图模型：

public class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    //  C#6
    /*
    protected virtual void OnPropertyChanged([System.Runtime.CompilerServices.CallerMemberName] string propName = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
    */

    protected virtual void OnPropertyChanged(string propName)
    {
        var handler = PropertyChanged;
        if (handler != null) {
            handler(this, new PropertyChangedEventArgs(propName));
        }
    }
}

public class MainViewModel : ViewModelBase
{
    private ObservableCollection<Project> _projects;
    public ObservableCollection<Project> Projects {
        get { return _projects; }
        set {
             if (value != _projects) {
                 _projects = value;
                 OnPropertyChanged(nameof(Projects));
            }
        }
    }

    public void BuildData() {
        Projects = new ObservableCollection<Project>();

        //  do the rest of the stuff
    }
}

然后，您应该将Project类重写为从ViewModelBase派生的ProjectViewModel ，以相同的方式引发PropertyChanged ，并为Children使用ObservableCollection<Project> 。

在您的主窗口中...

public MainWindow()
{
    InitializeComponent();

    var vm = new MainViewModel();
    vm.BuildData();
    DataContext = vm;
}

您的XAML也需要一些工作。

1. Projects现在使用大写的名称
2. 对于项模板，您将绑定到提供树视图项的子项的子项的属性。 那是您的Project类的Children属性。
3. 数据模板告诉XAML如何显示控件的内容。 树将创建一个以Project作为其DataContext的TreeViewItem ，然后使用HierarchicalDataTemplate将DataContext转换为某种可视内容。 您不使用模板创建TreeViewItem ； 您可以使用它在 TreeViewItem创建视觉内容。

所以这是新的XAML：

<TreeView 
    x:Name="Hierarchy" 
    ItemsSource="{Binding Projects}"
    Grid.Column="4" 
    HorizontalAlignment="Left" 
    Height="631" 
    Margin="0,58,0,0" 
    Grid.Row="1" 
    VerticalAlignment="Top" 
    Width="265" 
    >
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Children}">
            <Label Content="{Binding Name}" />
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

---

没有理由养成DataContext = this;的习惯DataContext = this; 。 一旦开始，下一步您将知道将在UserControl执行此操作，然后来到这里询问为什么父XAML中所有与它的绑定都被破坏了。 依赖属性比INPC麻烦得多，最终您的代码应该混入MainWindow代码的viewmodel中。 如果您使用viewmodels，这是世界上最简单的方法，可以用来洗改UI。 也许您希望主窗口的原始内容只是主窗口中三个选项卡页面之一。 适当地分离代码使这种事情变得更加简单。