Как создать контрол TreeView и привязать его к самореферентному источнику данных

В этом примере создается контрол TreeViewControl, который отображает иерархическую коллекцию объектов Employee. Имя сотрудника, который в данный момент находится в TreeList, отображается в текстовом редакторе.

Класс Employee является самореферентным источником данных . Он хранит информацию о родительско-дочерних отношениях в двух служебных свойствах (ID и ParentID).

В приведенном примере для настройки TreeViewControl используются следующие основные свойства:

DataControlBase.ItemsSource — Указывает источник данных контрола.
TreeListControlBase.KeyFieldName — указывает имя Key field (свойства), в котором хранятся уникальные идентификаторы записей.
TreeListControlBase.ParentFieldName — указывает имя Key field родительской записи (свойство).
TreeListControlBase.RootValue — Идентифицирует корневые записи в связанной коллекции. Свойство RootValue определяет значение, которое имеют корневые записи в Parent key field (свойство).
TreeViewControl.DataFieldName — указывает имя поля (свойства), данные которого отображаются в TreeViewControl.

Когда пользователь фокусирует узел, вы можете использовать унаследованное свойство DataControlBase.FocusedItem TreeView для извлечения нижележащего объекта данных сфокусированного узла. В примере свойство DataControlBase.FocusedItem возвращает объект Employee. Значение Name сфокусированного объекта Employee отображается в TextEditor.

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:vm="using:TreeControls"
        
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        xmlns:mxtl="clr-namespace:Eremex.AvaloniaUI.Controls.TreeList;assembly=Eremex.Avalonia.Controls"
        xmlns:mxe="clr-namespace:Eremex.AvaloniaUI.Controls.Editors;assembly=Eremex.Avalonia.Controls"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        x:Class="TreeControls.MainWindow"
        Title="TreeControls">
    <Grid ColumnDefinitions="*, 200">
        <mxtl:TreeViewControl 
            Grid.Column="0"
            Name="treeView1"
            ItemsSource="{Binding Employees}"
            DataFieldName="Name"
            KeyFieldName="ID"
            ParentFieldName="ParentID"
            FocusedItem="{Binding Current}"
            >
            <mxtl:TreeViewControl.RootValue>
                <sys:Int32>-1</sys:Int32>
            </mxtl:TreeViewControl.RootValue>
        </mxtl:TreeViewControl>
        <StackPanel Orientation="Vertical" Grid.Column="1" >
            <Label Content="Focused Item:"></Label>
            
        <mxe:TextEditor 
            ReadOnly="True"
            EditorValue="{Binding Current.Name}"
            >
        </mxe:TextEditor>
        </StackPanel>
    </Grid>
</Window>

using Avalonia.Controls;
using CommunityToolkit.Mvvm.ComponentModel;
using System;
using System.Collections.ObjectModel;

namespace TreeControls
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            MyViewModel viewModel = new MyViewModel();
            this.DataContext = viewModel;

            InitializeComponent();

            treeView1.ExpandAllNodes();
        }
    }

    public partial class MyViewModel : ObservableObject
    {
        public MyViewModel() 
        {
            Employees = new ObservableCollection<Employee>
            {
                new Employee() { ID = 0, ParentID = -1, Name = "Serge Smolin", Birthdate = new DateTime(1990, 01, 5) },
                new Employee() { ID = 1, ParentID = 0, Name = "Alex Douglas", Birthdate = new DateTime(1975, 8, 27) },
                new Employee() { ID = 2, ParentID = 0, Name = "Dennis Parker", Birthdate = new DateTime(1985, 12, 17) },
                new Employee() { ID = 3, ParentID = 1, Name = "Pavel Morris", Birthdate = new DateTime(1987, 10, 15) },
                new Employee() { ID = 4, ParentID = 2, Name = "Mary Thompson", Birthdate = new DateTime(1991, 03, 16) },
                new Employee() { ID = 5, ParentID = 3, Name = "Vera Liskina", Birthdate = new DateTime(1991, 04, 16) }
            };

            Current = null;
        }

        public ObservableCollection<Employee> Employees { get; set; }

        [ObservableProperty]
        public Employee? current;
    }

    public partial class Employee : ObservableObject
    {
        [ObservableProperty]
        public string name = "";

        [ObservableProperty]
        public DateTime? birthdate = null;

        public int ID { get; set; }

        public int ParentID { get; set; }
    }
}

^* Эта страница была создана автоматически с помощью сервиса машинного перевода Яндекс Переводчик.

Table of Contents

Как создать контрол TreeView и привязать его к самореферентному источнику данных