Skip to content

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="https://schemas.eremexcontrols.net/avalonia/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>

using Eremex.AvaloniaUI.Controls.Utils;

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 ImageLoader.LoadSvgImage(Assembly.GetExecutingAssembly(), $"Images/{lockedState}.svg");
    }

    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="https://schemas.eremexcontrols.net/avalonia/editors"

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



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