Группы¶

Вы можете использовать полосы для визуального объединения столбцов вместе. TreeListControl отображает полосы в качестве дополнительных заголовков над заголовками столбцов. Заголовки как группы, так и столбца могут содержать текст, картинки или пользовательский контент. Вы также можете создавать иерархические группы с неограниченным количеством уровней вложенности.

На следующей картинке показан контрол TreeList с четырьмя полосами: "Сотрудник", "Сведения", "Контакт" и "Адрес".:

treelist-bands

Следующие подходы позволяют создавать группы столбцов:

Создавать группы вручную
Создание групп из источника групп
Создавать диапазоны на основе атрибутов DataAnnotation (для автоматически сгенерированных столбцов)

Создание групп вручную¶

Выполните следующие действия, чтобы вручную создать группы:

Создайте объекты band (экземпляры класса TreeListBand) и добавьте их в коллекцию TreeListControl.Bands.

Назначьте уникальные имена диапазонов созданным диапазонам, используя свойство TreeListBand.BandName.
```
<mxtl:TreeListControl.Bands>
    <mxtl:TreeListBand BandName="Employee" HeaderHorizontalAlignment="Center"/>
    <mxtl:TreeListBand BandName="Details" HeaderHorizontalAlignment="Center"/>
</mxtl:TreeListControl.Bands>
```
Вы можете создать иерархическую структуру бэндов. Для создания вложенных бэндов:
- В коде: добавьте полосы в коллекцию TreeListBand.Bands.
- В XAML: Определите вложенные диапазоны непосредственно между открывающим и закрывающим тегами TreeListBand.
```
<mxtl:TreeListBand BandName="Details" HeaderHorizontalAlignment="Center">
    <mxtl:TreeListBand BandName="DetailsAddress" Header="Address" HeaderHorizontalAlignment="Center"/>
    <mxtl:TreeListBand BandName="DetailsContact" Header="Contact" HeaderHorizontalAlignment="Center"/>
</mxtl:TreeListBand>
```
Свойство TreeListBand.Header позволяет задать пользовательское содержимое (например, пользовательский текст) для бэнда. Если это свойство не задано, в заголовке бэнда отображается значение свойства TreeListBand.BandName.

Привязать столбцы к определенным диапазонам, установив для свойства TreeListColumn.BandName каждого столбца значение соответствующего имени диапазона (TreeListBand.BandName).

<mxtl:TreeListControl.Columns>
    <mxtl:TreeListColumn Width="150" FieldName="Name" BandName="Employee"/>
    <mxtl:TreeListColumn Width="*" FieldName="City" BandName="DetailsAddress"/>
    <mxtl:TreeListColumn Width="*" FieldName="Phone" BandName="DetailsContact"/>
    <!-- ... -->
</mxtl:TreeListControl.Columns>

Столбцы размещены в TreeListControl в соответствии с их свойствами TreeListColumn.VisibleIndex. Контрол не перестраивает столбцы автоматически, чтобы сгруппировать их по диапазонам.

Смотрите Порядок расположения столбцов и полос

Связанный API¶

Класс TreeListBand — инкапсулирует диапазон столбцов.
TreeListBand.BandName — уникальное имя, используемое для идентификации диапазона и привязывающее его к столбцам.
TreeListColumn.BandName — название группы, связанной с столбцом. Это значение соответствует значению свойства TreeListBand.BandName.
TreeListControl.Bands — Коллекция корневых бэндов.
TreeListBand.Bands — Коллекция детских бэндов для этой группы.

Пример - Создание полос столбцов в контроле TreeList¶

В следующем примере создаются группы и присваиваются им столбцы TreeList, как показано на картинке ниже:

Группы "Сотрудник", "Работа", "Личные данные", "Адрес" и "Контакт" связаны со столбцами TreeList.
Группе "Подробности" принадлежат две вложенные группы ("Адрес" и "Контакт"). Этот диапазон напрямую не связан с столбцами.

Каждому диапазону присваивается уникальное имя с помощью свойства TreeListBand.BandName. Чтобы связать столбцы с определенным диапазоном, свойству TreeListColumn.BandName присваивается значение BandName целевого диапазона.

Свойство TreeListControl.Bands определяет структуру бэндов. Чтобы создать вложенные бэнды, определите их как дочерние по отношению к родительскому бэнду.

<!-- MainWindow.axaml file -->
<mx:MxWindow xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:TreeListColumnBands.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:mx="https://schemas.eremexcontrols.net/avalonia"
        xmlns:mxtl="https://schemas.eremexcontrols.net/avalonia/treelist"
        xmlns:mxe="https://schemas.eremexcontrols.net/avalonia/editors"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="TreeListColumnBands.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/EMXControls.ico"
        Title="TreeListColumnBands">

    <Design.DataContext>
        <!-- This only sets the DataContext for the previewer in an IDE-->
        <vm:MainWindowViewModel/>
    </Design.DataContext>

    <mxtl:TreeListControl Name="employeeTreeList" AutoGenerateColumns="False"
                          ItemsSource="{Binding Employees}"
                          ChildrenFieldName="Subordinates"
                          HasChildrenFieldName="HasSubordinates"
                          >

        <mxtl:TreeListControl.Bands>
            <mxtl:TreeListBand BandName="Employee" HeaderHorizontalAlignment="Center"/>
            <mxtl:TreeListBand BandName="Job" HeaderHorizontalAlignment="Center"/>
            <mxtl:TreeListBand BandName="Personal" HeaderHorizontalAlignment="Center"/>
            <mxtl:TreeListBand BandName="Details" HeaderHorizontalAlignment="Center" HeaderToolTip="Contact and location information">
                <mxtl:TreeListBand BandName="DetailsAddress" Header="Address" HeaderHorizontalAlignment="Center"/>
                <mxtl:TreeListBand BandName="DetailsContact" Header="Contact" HeaderHorizontalAlignment="Center"/>
            </mxtl:TreeListBand>
        </mxtl:TreeListControl.Bands>

        <mxtl:TreeListControl.Columns>
            <mxtl:TreeListColumn Width="150" FieldName="Name" BandName="Employee"/>
            <mxtl:TreeListColumn Width="*" FieldName="Position" BandName="Job"/>
            <mxtl:TreeListColumn Width="*" FieldName="Salary" BandName="Job">
                <mxtl:TreeListColumn.EditorProperties>
                    <mxe:TextEditorProperties DisplayFormatString="c"/>
                </mxtl:TreeListColumn.EditorProperties>
            </mxtl:TreeListColumn>
            <mxtl:TreeListColumn Width="*" FieldName="HireDate" BandName="Job"/>
            <mxtl:TreeListColumn Width="*" FieldName="BirthDate" BandName="Personal"/>
            <mxtl:TreeListColumn Width="*" FieldName="Email" BandName="DetailsContact"/>
            <mxtl:TreeListColumn Width="*" FieldName="Phone" BandName="DetailsContact"/>
            <mxtl:TreeListColumn Width="*" FieldName="Address" BandName="DetailsAddress"/>
            <mxtl:TreeListColumn Width="*" FieldName="City" BandName="DetailsAddress"/>
            <mxtl:TreeListColumn Width="*" FieldName="Country" BandName="DetailsAddress"/>
        </mxtl:TreeListControl.Columns>
    </mxtl:TreeListControl>
</mx:MxWindow>

//MainWindow.axaml.cs file
using Avalonia.Controls;
using Eremex.AvaloniaUI.Controls.Common;
using TreeListColumnBands.ViewModels;

namespace TreeListColumnBands.Views;
public partial class MainWindow : MxWindow
{
    public MainWindow()
    {
        this.DataContext = new MainWindowViewModel();
        InitializeComponent();
        employeeTreeList.Loaded += EmployeeTreeList_Loaded;
    }

    private void EmployeeTreeList_Loaded(object? sender, Avalonia.Interactivity.RoutedEventArgs e)
    {
        employeeTreeList.ExpandAllNodes();
    }
}

//MainWindowViewModel.cs file
using System.Collections.Generic;
using System;
using CommunityToolkit.Mvvm.ComponentModel;
using System.Collections.ObjectModel;

namespace TreeListColumnBands.ViewModels;
public partial class MainWindowViewModel : ViewModelBase
{
    public MainWindowViewModel()
    {            
        Employees = EmployeeDataGenerator.GenerateData();
    }
    [ObservableProperty]
    public ObservableCollection<Employee> employees = new();
}
public partial class Employee : ObservableObject
{
    [ObservableProperty]
    public string name;

    [ObservableProperty]
    public string position;

    [ObservableProperty]
    public DateTime birthDate;

    [ObservableProperty]
    public string address;

    [ObservableProperty]
    public string city;

    [ObservableProperty]
    public string country;

    [ObservableProperty]
    public string phone;

    [ObservableProperty]
    public string email;

    [ObservableProperty]
    public DateTime hireDate;

    [ObservableProperty]
    public decimal salary;

    [ObservableProperty]
    public ObservableCollection<Employee> subordinates;

    public Employee(string name, string position, DateTime birthDate,
                   string address, string city, string country,
                   string phone, string email, DateTime hireDate,
                   decimal salary)
    {
        Name = name;
        Position = position;
        BirthDate = birthDate;
        Address = address;
        City = city;
        Country = country;
        Phone = phone;
        Email = email;
        HireDate = hireDate;
        Salary = salary;
        Subordinates = null;
    }
    public void AddSubordinate(Employee subordinate)
    {
        if (Subordinates == null)
            Subordinates = new();
        Subordinates.Add(subordinate);
    }
    public bool HasSubordinates => Subordinates?.Count > 0;
}
public static class EmployeeDataGenerator
{
    public static ObservableCollection<Employee> GenerateData()
    {
        var ceo = new Employee(
            "John Smith", "CEO", new DateTime(1972, 8, 10), "1 Financial District",
            "Riyadh", "Saudi Arabia", "+966 11 123 4567", "j.smith@company.sa", 
            new DateTime(2011, 3, 15), 320000m);
        var vpTech = new Employee(
            "Wei Chen", "VP of Technology", new DateTime(1980, 5, 22), "22 Innovation Park",
            "Shanghai", "China", "+86 21 8765 4321", "w.chen@company.cn", 
            new DateTime(2013, 6, 20), 240000m);
        var devManager = new Employee(
            "Raj Pat", "Development Manager", new DateTime(1985, 11, 30), "33 Tech Corridor",
            "Bangalore", "India", "+91 80 2345 6789", "r.pat@company.in", 
            new DateTime(2016, 4, 10), 160000m);
        var seniorDev = new Employee(
            "Hannah Zhang", "Senior Developer", new DateTime(1990, 3, 12), "44 Code Avenue",
            "Casablanca", "Morocco", "+212 522 987 654", "h.zhang@company.ma", 
            new DateTime(2018, 7, 15), 95000m);
        var juniorDev = new Employee(
            "Lillian Oni", "Junior Developer", new DateTime(1994, 9, 25), "55 Debug Street",
            "Lagos", "Nigeria", "+234 1 345 6789", "l.oni@company.ng", 
            new DateTime(2020, 2, 20), 65000m);
        var cfo = new Employee(
            "Marianne Lockwood", "CFO", new DateTime(1978, 4, 18), "66 Finance Plaza",
            "Ho Chi Minh City", "Vietnam", "+84 28 7654 3210", "m.lock@company.vn", 
            new DateTime(2014, 9, 12), 280000m);
        var financeManager = new Employee(
            "Joanna Bennett", "Finance Manager", new DateTime(1983, 7, 8), "77 Capital Road",
            "Kuala Lumpur", "Malaysia", "+60 3 4567 8901", "j.ben@company.my", 
            new DateTime(2017, 1, 5), 140000m);
        ceo.AddSubordinate(vpTech);
        vpTech.AddSubordinate(devManager);
        devManager.AddSubordinate(seniorDev);
        seniorDev.AddSubordinate(juniorDev);
        ceo.AddSubordinate(cfo); 
        cfo.AddSubordinate(financeManager);
        ObservableCollection<Employee> employees = new ObservableCollection<Employee>();
        employees.Add(ceo);
        return employees;
    }
}

Создание групп из источника групп¶

Вы можете заполнить бэнды столбцов из источника бэндов, определенного в модели представления. Используйте свойства TreeListControl.BandsSource и TreeListControl.BandTemplate для создания диапазонов из коллекции бизнес-объектов.

В качестве альтернативы указанию свойства BandTemplate вы можете использовать свойство Styles для инициализации объектов TreeListBand из бизнес-объектов. Пример смотрите в разделе Инициализация бэндов с использованием стиля .

Чтобы привязать столбцы к диапазонам, установите TreeListColumn.BandName для каждого столбца на соответствующее название диапазона (TreeListBand.BandName).

Связанный API¶

TreeListControl.BandsSource — Коллекция бизнес-объектов, используемых для создания корневых бэндов.
TreeListControl.BandTemplate — Шаблон, который создает экземпляры TreeListBand из бизнес-объектов.
TreeListBand.BandsSource — Коллекция бизнес-объектов, используемых для создания дочерних групп.
TreeListBand.BandName — уникальное имя, используемое для идентификации диапазона и привязывающее его к столбцам.
TreeListColumn.BandName — название группы, связанной с столбцом. Это значение соответствует значению свойства TreeListBand.BandName.

Инициализация бэндов с помощью стиля¶

В качестве альтернативы указанию свойства BandTemplate вы можете использовать свойство Styles для инициализации объектов TreeListBand из business objects.

<mxtl:TreeListControl.Styles>
    <Style Selector="mxtl|TreeListBand">
        <Setter Property="BandName" Value="{Binding Name}"/>
        <Setter Property="Header" Value="{Binding DisplayName}"/>
        <Setter Property="HeaderHorizontalAlignment" Value="Center"/>
    </Style>
</mxtl:TreeListControl.Styles>

Смотрите демонстрацию "Диапазоны столбцов" для примера использования свойств BandsSource и Styles.

Генерация диапазонов на основе атрибутов DataAnnotation (для автоматически генерируемых столбцов)¶

Этот подход позволяет вам использовать атрибуты для привязывать автоматически сгенерированные столбцы к диапазонам.

Когда включена автоматическая генерация столбцов (см. TreeListControl.AutoGenerateColumns), контрол TreeList может инициализировать свойства столбца из определенных атрибутов , применяемых к свойствам бизнес-объекта. Атрибут System.ComponentModel.DataAnnotations.DisplayAttribute позволяет привязывать автоматически сгенерированные столбцы к диапазонам. Укажите параметр DisplayAttribute.GroupName, чтобы определить название диапазона для соответствующего столбца.

public partial class Order : ObservableObject
{
    [ObservableProperty]
    [property: Display(Order = 0, GroupName = "Order")]
    private int orderId;
    //...
}

Когда TreeList обнаруживает DisplayAttribute.GroupName, он проверяет наличие существующего диапазона с соответствующим именем (TreeListBand.BandName). Если такой диапазон не найден, он создается и инициализируется следующим образом:

Контрол автоматически создает диапазон и устанавливает для его свойства TreeListBand.BandName значение DisplayAttribute.GroupName.
Полоса добавлена в коллекцию TreeListControl.Bands контрола. Вложенные группы добавляются в соответствующие коллекции TreeListBand.Bands.
Созданный диапазон связан с автоматически сгенерированным столбцом, используя свойство TreeListColumn.BandName.

Параметр DisplayAttribute.GroupName поддерживает вложенные диапазоны. Используйте символ "/" для разделения родительского и дочернего диапазонов (например, "ParentBandName/ChildBandName"). Чтобы включить "/" в качестве буквального символа, используйте двойную косую черту ("//").

Обратите

Individual child band names must be unique throughout the TreeList control.

public partial class Order : ObservableObject
{
    [ObservableProperty]
    [property: Display(Order = 20, GroupName = "Shipping Info/Address")]
    private string shipCountry = string.Empty;
    //...
}

Связанный API¶

TreeListControl.AutoGenerateBands (по умолчанию — true) - Получает или устанавливает, будут ли автоматически генерироваться диапазоны из атрибутов DisplayAttribute.GroupName, применяемых к свойствам нижележащего бизнес-объекта. Затем эти диапазоны автоматически привязываются к соответствующим автоматически сгенерированным столбцам.

Автоматическая генерация диапазонов (и привязка диапазонов к автоматически сгенерированным столбцам) принудительно отключена, если TreeListControl.AutoGenerateColumns равен false.
TreeListControl.Bands и TreeListBand.Bands — Вы можете использовать эти коллекции для доступа к автоматически сгенерированным диапазонам.

Порядок расположения столбцов и полос¶

TreeListControl размещает столбцы в соответствии с их свойствами TreeListColumn.VisibleIndex.

Порядок заголовков полос определяется визуальным порядком расположения столбцов. Если столбцы, связанные с одним и тем же диапазоном, расположены рядом друг с другом, заголовки их диапазонов объединяются.

<mxtl:TreeListControl.Columns>
    <mxtl:TreeListColumn Width="*" FieldName="FirstName" BandName="Customer"/>
    <mxtl:TreeListColumn Width="*" FieldName="LastName" BandName="Customer"/>
    <mxtl:TreeListColumn Width="*" FieldName="Address" BandName="Details"/>
</mxtl:TreeListControl.Columns>

Контрол не перестраивает столбцы автоматически, чтобы сгруппировать их по диапазонам. Если столбцы, связанные с одним и тем же диапазоном, размещены в несмежных позициях (разделенных столбцами, связанными с разными диапазонами), контрол TreeList создает несколько заголовков диапазонов с одинаковыми именами над заголовками столбцов.

В следующем фрагменте кода столбцы, связанные с диапазоном Customer, разделены столбцом Address, который связан с диапазоном Details. Контрол не изменяет автоматически порядок столбцов, чтобы объединить их в один диапазон Customer:

<mxtl:TreeListControl.Columns>
    <mxtl:TreeListColumn Width="*" FieldName="FirstName" BandName="Customer"/>
    <mxtl:TreeListColumn Width="*" FieldName="LastName" BandName="Customer"/>
    <mxtl:TreeListColumn Width="*" FieldName="Address" BandName="Details"/>
    <mxtl:TreeListColumn Width="*" FieldName="Title" BandName="Customer"/>
</mxtl:TreeListControl.Columns>

treelist-bands-not-keep-columns-together

Операции перетаскивания¶

Перетаскивание столбцов¶

Пользователи могут свободно перетаскивать столбцы внутри контрола, если TreeListControl.AllowColumnMoving равен true (по умолчанию). Если они перетаскивают столбец в другой диапазон, контрол рисует соответствующий заголовок диапазона (TreeListColumn.BandHeader) над этим столбцом в его новой позиции. Смотрите Порядок расположения столбцов и полос .

Связанный API¶

TreeListControl.AllowColumnMoving — Возвращает или устанавливает, включены ли операции перетаскивания столбцов.

Перетаскивание группы¶

Контрол TreeList не поддерживает операции перетаскивания в диапазонах.

Отображение и скрытие панели групп¶

На панели диапазонов отображаются заголовки диапазонов. Панель видна, когда любой столбец связан с существующей полосой. Используйте следующее свойство, чтобы принудительно скрыть панель band, когда это необходимо:

TreeListControl.ShowBands — Определяет, будет ли видна панель диапазонов.

Укажите содержимое заголовка группы¶

Header — Возвращает или задает содержимое заголовка группы. Если это свойство не задано, в группе отображается значение свойства TreeListBand.BandName.
HeaderTemplate — Получает или задает шаблон, используемый для отображения объекта Header. Шаблон позволяет отображать картинки и пользовательские контролы, а также отображать текст произвольным способом.

Пример - Отображение картинки в заголовке группы¶

В следующем примере отображается картинка в формате SVG, за которой следует текстовая подпись в заголовке группы. Картинка в формате SVG (файл address-location-icon.svg) найдена в папке проекта Assets, а для свойства Build Action установлено значение AvaloniaResource.

treelist-bandheader-ImageAndText

xmlns:svg="using:Avalonia.Svg.Skia"

<mxtl:TreeListControl.Bands>
    <mxtl:TreeListBand BandName="Customer" HeaderHorizontalAlignment="Center">
        <mxtl:TreeListBand.HeaderTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <svg:Svg Path="/Assets/address-location-icon.svg" Width="16" Height="16" Margin="5" />
                    <TextBlock Text="{Binding}" VerticalAlignment="Center"/>
                </StackPanel>
            </DataTemplate>
        </mxtl:TreeListBand.HeaderTemplate>
</mxtl:TreeListControl.Bands>

Пустой заголовок полосы¶

Столбцы, не связанные с существующими диапазонами, отображаются под пустым заголовком диапазона.

Разделители полос¶

TreeListControl.ShowBandSeparators — Позволяет использовать толстые разделители между соседними полосами. Используйте это свойство, чтобы подчеркнуть различия между полосами. Если ShowBandSeparators отключен, Tree List рисует обычные разделители столбцов (тонкие линии) между полосами.

Скрыть группы¶

Объекты Band не обладают свойством "Visible". Чтобы скрыть группу, вам следует скрыть столбцы, связанные с этой группой.

Полосы без связанных столбцов никогда не отображаются.

Всплывающие подсказки для заголовков групп¶

Используйте свойство HeaderToolTip, чтобы указать пользовательские подсказки для заголовков бэндов. Пользовательские подсказки отображаются при наведении курсора мыши на заголовки бэндов независимо от того, обрезан текст заголовка бэнда или нет.

<mxtl:TreeListBand BandName="Details" HeaderHorizontalAlignment="Center" HeaderToolTip="Contact and location information">

treelist-band-headertooltip

Если бэнду не назначена пользовательская подсказка, для заголовка бэнда отображается всплывающая подсказка по умолчанию, если текст заголовка обрезан. Во всплывающей подсказке по умолчанию отображается полный текст заголовка без обрезки.

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