Добавление редактора для значения свойства элемента управления

Редактор предоставляет пользовательский интерфейс для изменения значения свойства в программе Конструктор Web-разметок.

Новый редактор нужно разрабатывать, когда требуется поддержать возможность изменения свойства со сложным типом значения, предоставить новый пользовательский интерфейс для изменения свойства или изменить логику работы со значением свойства.

Редактор представляет собой элемент управления с типом System.Windows.Controls.UserControl, в котором реализован интерфейс Xceed.Wpf.Toolkit.PropertyGrid.Editors.ITypeEditor. Рекомендуемые размеры элемента управления: 20x200px. Если для изменения значения свойства требуется форма большего размера, разработайте её в отдельном компоненте с типом System.Windows.Window, а в основной компонент UserControl добавьте функцию, вызывающую данную форму.

Добавить новый редактор

Добавить новый редактор в Конструктор Web-разметок можно с помощью Расширения.

Создайте проект расширения программы Конструктор Web-разметок.

Добавьте в проект компонент с типом UserControl (WPF) и реализуйте в нем программный интерфейс ITypeEditor.

Следующий код демонстрирует пример класса редактора.

public partial class SuperEditor : UserControl, ITypeEditor
{
    private string startValue;
    private PropertyItem propertyItem; (1)

    public SuperEditor()
    {
        InitializeComponent();
    }

    public FrameworkElement ResolveEditor(PropertyItem prop) (2)
    {
        propertyItem = prop; (3)

        if (prop.Value == null) (4)
            prop.Value = string.Empty;

        startValue = prop.Value.ToString(); (5)

        Placeholder.Text = "{lines ...}"; (6)

        return this; (7)
    }

    private void ChangeLines_Click(object sender, RoutedEventArgs e) (8)
    {
        var dialog = new DialogEditor(startValue);
        dialog.ShowDialog();

        propertyItem.Value = startValue = dialog.Value; (9)
    }
}

1	Переменные для хранения текущего значения свойства и его программного компонента (`PropertyItem`).
2	Реализация единственного метода интерфейса `ITypeEditor`. Метод должен вернуть элемент управления, который будет отображаться на панели Свойства.
3	Сохраняем ссылку на компонент свойства, для возможности сохранения изменения свойства.
4	Поле `prop.Value` содержит значение элемента управления.
5	Значение свойства передается в `prop.Value`.
6	Текст, который будет отображаться в качестве значения свойства.
7	В качестве элемента управления для отображения на панели свойства используется текущий элемент управления.
8	Открытие диалогового окна редактирования значения свойства.
9	Новое значение получаем из переменной `Value`. Значение должно быть сохранено в `propertyItem.Value`.

В данном случае редактор представляет собой кнопку ChangeLines, при нажатии которой открывается диалоговое окно DialogEditor для ввода текстового значения, а также нередактируемый блок текста Placeholder для отображения статичного значения {lines …}.

Ниже приведён код графической части редактора.

 <UserControl x:Class="TemplateDesignerExtension1.Editors.SuperEditor"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                xmlns:local="clr-namespace:TemplateDesignerExtension1.Editors"
                mc:Ignorable="d"
                d:DesignHeight="20" d:DesignWidth="200">
        <Grid>
            <TextBlock x:Name="ValueString" HorizontalAlignment="Left" Margin="1" VerticalAlignment="Stretch" Width="164"/>
            <Button x:Name="ChangeLines" Content="…" HorizontalAlignment="Right" Margin="1" VerticalAlignment="Top" Width="22" Click="ChangeLines_Click" />;
        </Grid>
</UserControl>

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

Значение свойства можно получить из переменной propertyItem.Value. При изменении значения, его нужно сохранить в propertyItem.Value.

Переопределите метод GetEditors базового класса расширения, чтобы он возвращал коллекцию с парой: ключ — имя. Используя данный метод, можно получить редактор. Значением будет тип редактора:
```
protected override Dictionary<string, Type> GetEditors()
{
    return new Dictionary<string, Type>
    {
        { "SuperEditor", typeof(Editors.SuperEditor) }
    };
}
```
Скомпилируйте проект и скопируйте полученную сборку на сервер Web-клиента в папку \%WebCinstallDir%\Plugins\\%Каталог Решения%. Ресурсные сборки скопируйте в папки \%WebCinstallDir%\ru\ (для русской локализации), \%WebCinstallDir%\uk\ (для английской локализации) и т.д.
Перезапустите Конструктор Web-разметок.

Проверка примера

Создайте новое свойство элемента управления в расширении с Супер редактором.

Укажите Супер редактор в качестве редактора свойства в параметре Editor.

PropertyDescription GetSuperPropertyDescription()
{
    var propertyDescription = new PropertyDescription();
    propertyDescription.Name = "SuperProperty";
    propertyDescription.Type = typeof(string); (1)
    propertyDescription.Category = PropertyCategoryConstants.DataCategory;
    propertyDescription.DisplayName = "Супер свойство";
    propertyDescription.Editor = typeof(SuperEditor); (2)
    return propertyDescription;
}

1	Тип свойства должен быть string!
2	Указываем тип "Супер редактора".

Добавьте свойство с редактором Супер редактор в описатель элемента управления. См. пример в пункте Добавление нового свойства элементов управления.
Опубликуйте расширение с элементом управления на сервере Web-клиента.
Откройте для настройки любую разметку.
Добавьте в разметку элемент управления, содержащий свойство с редактором. Для изменения значения свойства будет использован Супер редактор.

Рисунок 1. Супер свойство с собственным редактором

Изменение значения свойства осуществляется в диалоговом окне, открываемом при нажатии кнопки … (три точки).

Рисунок 2. Диалоговое окно изменения значения свойства