Пользовательские редакторы в ячейках TreeList и TreeView

Контролы TreeList и TreeView по умолчанию используют встроенные редакторы Eremex. Смотрите Редактирование данных для получения информации о том, как назначить встроенные редакторы по умолчанию и получить к ним доступ.

В этом разделе показано, как назначить пользовательские редакторы контролам. Доступны следующие два подхода:

Назначить пользовательский редактор столбцу TreeList и TreeView напрямую
Динамически назначать редакторов на основе типа данных столбца TreeList

Назначение пользовательского редактора непосредственно столбцу в контроле TreeList и TreeView

Столбцу TreeList или TreeView можно назначить встроенный редактор, создав DataTemplate. Используйте свойства TreeListColumn.CellTemplate и TreeViewControl.CellTemplate для этой цели следующим образом.

Создайте объект DataTemplate с редактором, определенным внутри шаблона.
Присвойте DataTemplate свойству CellTemplate.
При необходимости явно привяжите редактор к значению столбца.

В следующем примере показан код XAML, который устанавливает свойство CellTemplate столбца TreeList для объекта TextBox:

xmlns:mxtl="clr-namespace:Eremex.AvaloniaUI.Controls.TreeList;assembly=Eremex.Avalonia.Controls"

<mxtl:TreeListColumn Header="Phone" FieldName="Phone">
    <mxtl:TreeListColumn.CellTemplate>
        <DataTemplate>
            <TextBox Text="{Binding Value}"/>
        </DataTemplate>
    </mxtl:TreeListColumn.CellTemplate>
</mxtl:TreeListColumn>

Неявная привязка данных для редакторов Eremex

Если вы используете редактор Eremex внутри DataTemplate, вы можете опустить явную привязку данных к значению столбца для редактора. Убедитесь, что в редакторе Eremex для свойства x:Name установлено значение "PART_Editor". В этом случае контрол TreeList/TreeView автоматически привязывает свойство редактора EditorValue к значению ячейки столбца. Кроме того, контрол начинает поддерживать свойства внешнего вида встроенного редактора (видимость границ и цвет отображаемого текста в активном и неактивном состояниях).

xmlns:mxtl="clr-namespace:Eremex.AvaloniaUI.Controls.TreeList;assembly=Eremex.Avalonia.Controls"
xmlns:mxe="clr-namespace:Eremex.AvaloniaUI.Controls.Editors;assembly=Eremex.Avalonia.Controls"
...
<mxtl:TreeListColumn Header="Phone" FieldName="Phone">
    <mxtl:TreeListColumn.CellTemplate>
        <DataTemplate>
            <mxe:ButtonEditor x:Name="PART_Editor">
                <mxe:ButtonEditor.Buttons>
                    <mxe:ButtonSettings Content="..."/>
                </mxe:ButtonEditor.Buttons>
            </mxe:ButtonEditor>
        </DataTemplate>
    </mxtl:TreeListColumn.CellTemplate>
</mxtl:TreeListColumn>

Явная привязка данных

Явная привязка данных требуется в следующих случаях:

Вы используете редактор, который не является редактором Eremex.

СОВЕТ

Редакторы Eremex - это контролы, производные от класса Eremex.AvaloniaUI.Controls.Editors.BaseEditor.
Вам необходимо указать пользовательский конвертер значений в выражении привязки данных.

<DataTemplate DataType="pepa:Color">
    <mxe:PopupColorEditor x:Name="PART_Editor" EditorValue="{Binding Path=Value, Converter={ecadpg:EcadColorToAvaloniaColorConverter}}"/>
</DataTemplate>

Динамическое назначение редакторов на основе типа данных столбца TreeList

Контрол TreeList позволяет назначать встроенные редакторы, встроенные в DataTemplates, ячейкам столбцов на основе типа данных привязанного поля столбца. Используйте свойство TreeListControl.CellTemplate для этой цели.

Пример - Как связать редактор с определенным типом данных

Следующий пример привязывает TextEditor, который рисует значения зеленым цветом, к столбцам, привязанным к целочисленным полям:

xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:mxtl="clr-namespace:Eremex.AvaloniaUI.Controls.TreeList;assembly=Eremex.Avalonia.Controls"
xmlns:mxe="clr-namespace:Eremex.AvaloniaUI.Controls.Editors;assembly=Eremex.Avalonia.Controls"

<mxtl:TreeListControl.CellTemplate>
    <DataTemplate DataType="sys:Int32">
        <mxe:TextEditor x:Name="PART_Editor1" EditorValue="{Binding Value}" Foreground="Green"/>
    </DataTemplate>
</mxtl:TreeListControl.CellTemplate>

Пример - Как связать редакторы с несколькими типами данных

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

Для выполнения этой задачи выполните следующие действия:

Создайте пользовательский класс (CellTemplateLocator) в коде, который возвращает DataTemplate для определенного типа данных и создает контрол, связанный с этим типом данных.

using Avalonia.Collections;
using Avalonia.Controls.Templates;

namespace AvaloniaApplication1.Views;

public class CellTemplateLocator : AvaloniaList<IDataTemplate>, IDataTemplate
{
    public Control Build(object? param)
    {
        var cellData = param as Eremex.AvaloniaUI.Controls.DataControl.Visuals.CellData;
        if (cellData == null) return null;
        return this.First(x => x.Match(cellData.Value)).Build(cellData.Value);
    }

    public bool Match(object? data)
    {
        var cellData = data as Eremex.AvaloniaUI.Controls.DataControl.Visuals.CellData;
        if (cellData == null) return false;
        return this.Any(x => x.Match(cellData.Value));
    }
}

Инициализируйте свойство TreeListControl.CellTemplate с помощью объекта CellTemplateLocator.
Заполните объект CellTemplateLocator объектами DataTemplate, связанными с вашими типами данных.

В следующем примере определены два объекта DataTemplate с редакторами, связанными с типами данных String и Integer соответственно.

xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:local="clr-namespace:AvaloniaApplication1.Views"

<mxtl:TreeListControl.CellTemplate>
    <local:CellTemplateLocator>
        <DataTemplate DataType="sys:String">
            <mxe:TextEditor x:Name="PART_Editor" EditorValue="{Binding Value}" Foreground="Red"/>
        </DataTemplate>
        <DataTemplate DataType="sys:Int32">
            <mxe:TextEditor x:Name="PART_Editor1" EditorValue="{Binding Value}" Foreground="Green"/>
        </DataTemplate>
    </local:CellTemplateLocator>
</mxtl:TreeListControl.CellTemplate>

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

Table of Contents