ButtonEditor

ButtonEditor - это текстовый редактор, который может отображать множество встроенных обычных кнопок и переключателей.

buttoneditor

Основные функции контрола включают в себя:

Обычные кнопки и переключатели.
Отображение текста и картинок на кнопках.
Выравнивание правой и левой кнопок.
Всплывающие подсказки.
Встроенная кнопка "x" для удаления значения редактора.
Водяные знаки.

Встроенные кнопки

Чтобы добавить встроенную кнопку, добавьте объект ButtonSettings в коллекцию ButtonEditor.Buttons. Объект ButtonSettings содержит опции отображения кнопки и поведения.

Основные свойства и события

ButtonKind — Указывает, является ли кнопка обычной или кнопкой переключения.
Content — Текст кнопки или пользовательские данные. Используйте свойство ContentTemplate, чтобы указать шаблон для отображения пользовательских данных.
Glyph — Картинка кнопки.
GlyphSize — Размер картинки кнопки.
IsLeft — Указывает, выровнена ли кнопка по левому или правому краю поля редактирования (по умолчанию).
Click — Событие, которое позволяет вам реагировать на нажатия кнопок.
Command — Указывает команду, вызываемую при нажатии на кнопку.
CommandParameter — указывает параметр команды.
IsChecked — Возвращает или устанавливает, кнопка нажата ли для переключения.

Пример - Как добавить обычные кнопки и переключатели

В следующем примере определяется контрол ButtonEditor с двумя кнопками:

Обычная кнопка, связанная с командой ResetValue, которая устанавливает значение редактора равным '0'.
Кнопка-переключатель, которая переключает свойства родительского редактора IsTextEditable. Редактирование текста отключено, когда кнопка нажата.

Предполагается, что проект содержит картинки 'dot.svg', 'locked.svg' и 'unlocked.svg' в папке 'Images'. Обычная кнопка отображает картинку "dot.svg". На кнопке-переключателе отображается картинка "locked.svg" или "unlocked.svg" в зависимости от состояния нажатия.

xmlns:mxe="using:Eremex.AvaloniaUI.Controls.Editors"
xmlns:local="clr-namespace:EditorsSample"

<Window.DataContext>
    <local:MainViewModel/>
</Window.DataContext>

<mxe:ButtonEditor Name="btnEditor1" 
                  EditorValue="{Binding Quantity, Mode=TwoWay}"
                  IsTextEditable="True">
    <mxe:ButtonEditor.Buttons>
        <mxe:ButtonSettings ButtonKind="Simple"
                            Glyph="{SvgImage 'avares://EditorsSample/Images/dot.svg'}"
                            Command="{Binding ResetValueCommand}"
                            CommandParameter="{Binding #btnEditor1}"
                            ToolTip.Tip = "Reset value"
                            >
        </mxe:ButtonSettings>
        <mxe:ButtonSettings ButtonKind="Toggle"
                            Glyph="{Binding $self.IsChecked, Converter={local:LockedStateToSvgNameConverter}}"
                            IsChecked="{Binding !$parent.IsTextEditable}"
                            ToolTip.Tip = "Toggle text editing mode"
                >
        </mxe:ButtonSettings>
    </mxe:ButtonEditor.Buttons>
</mxe:ButtonEditor>

namespace EditorsSample;

[ObservableObject]
public partial class MainViewModel
{
    [ObservableProperty]
    decimal quantity = 0;

    // Sets the editor's value to '0'.
    [RelayCommand]
    void ResetValue(TextEditor editor)
    {
        // You can access the current editor from the command parameter, 
        // and change its value.
        editor.EditorValue = 0;
    }
}

public class LockedStateToSvgNameConverter : MarkupExtension, IValueConverter
{
    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
    {
        if (value == null)
            return null;
        bool isLocked = (bool)value;
        string lockedState = isLocked ? "locked" : "unlocked";
        if (isLocked)
            lockedState = "locked";
        return SvgImageExtension.ProvideValue($"avares://EditorsSample/Images/{lockedState}.svg", null!, null!);
    }

    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }

    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        return this;
    }
}

Кнопка Очистить Значение ('x')

Установите для свойства ButtonEditor.NullValueButtonPosition значение ComponentPlacement.EditorBox, чтобы включить встроенную кнопку "x", которая позволяет пользователю установить текущее значение равным null.

buttoneditor-clearbutton

Водяной знак

Как и все потомки TextEditor, контрол ButtonEditor поддерживает водяной знак (подсказка, выделенная серым цветом, отображается, когда значение редактора пустое или null).

buttoneditor-watermark

Используйте унаследованное свойство TextEditor.Watermark, чтобы указать водяной знак.

xmlns:mxe="clr-namespace:Eremex.AvaloniaUI.Controls.Editors;assembly=Eremex.Avalonia.Controls"

<mxe:ButtonEditor Name="buttonEditor1" Watermark="User Name or Email" Margin="5">
    ...
</mxe:ButtonEditor>