Skip to content

Пользовательские редакторы

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

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

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

Вы можете указать встроенный редактор для столбца таблицы, присвоив свойству DataTemplate значение GridColumn.CellTemplate.

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

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

xmlns:mxdg="https://schemas.eremexcontrols.net/avalonia/datagrid"

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

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

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

Свойство x:Name имеет значение "PART_Editor" для редактора Eremex, определенного в шаблоне. Это обеспечивает автоматическую привязку значения редактора (BaseEditor.EditorValue) к полю столбца. Кроме того, свойства внешнего вида редактора (видимость границ и цвет отображаемого текста в активном и неактивном состояниях) будут управляться с помощью контрола DataGrid.

xmlns:mxdg="https://schemas.eremexcontrols.net/avalonia/datagrid"
xmlns:mxe="https://schemas.eremexcontrols.net/avalonia/editors"
...
<mxdg:GridColumn Header="Phone" FieldName="Phone">
    <mxdg:GridColumn.CellTemplate>
        <DataTemplate>
            <mxe:ButtonEditor x:Name="PART_Editor">
                <mxe:ButtonEditor.Buttons>
                    <mxe:ButtonSettings Content="..."/>
                </mxe:ButtonEditor.Buttons>
            </mxe:ButtonEditor>
        </DataTemplate>
    </mxdg:GridColumn.CellTemplate>
</mxdg:GridColumn>

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

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

  • Вы используете редактор, который не является редактором 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>

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

Столбцам можно назначить встроенные редакторы на основе типа данных привязанного поля столбца, как показано ниже:

  • Определите редактор в DataTemplate.
  • Установите для свойства DataTemplate.DataType значение целевого типа данных.
  • Присвойте созданному шаблону свойство DataGridControl.CellTemplate.

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

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

xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:mxdg="https://schemas.eremexcontrols.net/avalonia/datagrid"
xmlns:mxe="https://schemas.eremexcontrols.net/avalonia/editors"

<mxdg:DataGridControl.CellTemplate>
    <DataTemplate DataType="sys:Int32">
        <mxe:TextEditor x:Name="PART_Editor1" EditorValue="{Binding Value}" Foreground="Green"/>
    </DataTemplate>
</mxdg:DataGridControl.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));
    }
}
  • Инициализируйте свойство DataGridControl.CellTemplate с помощью объекта CellTemplateLocator.
  • Заполните объект CellTemplateLocator объектами DataTemplate, связанными с вашими типами данных.

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

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

<mxdg:DataGridControl.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>
</mxdg:DataGridControl.CellTemplate>



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