Skip to content

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

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

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

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

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

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

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

xmlns:mxtl="https://schemas.eremexcontrols.net/avalonia/treelist"

<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="https://schemas.eremexcontrols.net/avalonia/treelist"
xmlns:mxe="https://schemas.eremexcontrols.net/avalonia/editors"
...
<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 editors are controls derived from the Eremex.AvaloniaUI.Controls.Editors.BaseEditor class.

  • Вам необходимо указать пользовательский конвертер значений в выражении привязки данных.
<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="https://schemas.eremexcontrols.net/avalonia/treelist"
xmlns:mxe="https://schemas.eremexcontrols.net/avalonia/editors"

<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>



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