Xamarin.Forms Editor

Статья
01/10/2024

Элемент Editor управления используется для принятия многострочного ввода.

Установка и чтение текста

В Editorтаких представлениях, как и в других представлениях для представления текста, предоставляется Text свойство. Это свойство можно использовать для задания и чтения текста, представленного этим свойством Editor. В следующем примере показано задание Text свойства в XAML:

<Editor x:Name="editor" Text="I am an Editor" />

В C#:

var editor = new Editor { Text = "I am an Editor" };

Чтобы прочитать текст, получите доступ к свойству Text в C#:

var text = editor.Text;

Установка текста заполнителя

Можно Editor задать для отображения заполнителя текста, если он не сохраняет входные данные пользователя. Это достигается путем задания Placeholder свойства stringдля свойства и часто используется для указания типа содержимого, подходящего для Editorобъекта. Кроме того, цвет текста заполнителя можно контролировать, задав PlaceholderColor для свойства значение Color:

<Editor Placeholder="Enter text here" PlaceholderColor="Olive" />

var editor = new Editor { Placeholder = "Enter text here", PlaceholderColor = Color.Olive };

Запрет ввода текста

Пользователям может быть запрещено изменять текст в свойстве EditorIsReadOnly , которое имеет значение falseпо умолчанию , в true:

<Editor Text="This is a read-only Editor"
        IsReadOnly="true" />

var editor = new Editor { Text = "This is a read-only Editor", IsReadOnly = true });

Примечание.

Свойство IsReadonly не изменяет внешний вид визуального Editorэлемента, в отличие IsEnabled от свойства, которое также изменяет внешний вид визуального Editor элемента на серый.

Преобразование текста

Объект Editor может преобразовать регистр текста, хранящегося в Text свойстве, задав TextTransform свойство значению перечисления TextTransform . Это перечисление имеет четыре значения:

None указывает, что текст не будет преобразован.
Default указывает, что будет использоваться поведение по умолчанию для платформы. Это значение по умолчанию для свойства TextTransform.
Lowercase указывает, что текст будет преобразован в нижний регистр.
Uppercase указывает, что текст будет преобразован в верхний регистр.

В следующем примере показано преобразование текста в верхний регистр:

<Editor Text="This text will be displayed in uppercase."
        TextTransform="Uppercase" />

Эквивалентный код на C# выглядит так:

Editor editor = new Editor
{
    Text = "This text will be displayed in uppercase.",
    TextTransform = TextTransform.Uppercase
};

Ограничение длины входных данных

Свойство MaxLength можно использовать для ограничения длины входных данных, разрешенной для Editorобъекта . Это свойство должно иметь положительное целое число:

<Editor ... MaxLength="10" />

var editor = new Editor { ... MaxLength = 10 };

MaxLength Значение свойства 0 указывает, что входные данные не будут разрешены, а значение int.MaxValue, которое является значением по умолчанию для объектаEditor, указывает, что число введенных символов не ограничено.

Интервалы между символами

Интервалы символов можно применить к объекту Editor , задав Editor.CharacterSpacing свойству double значение:

<Editor ...
        CharacterSpacing="10" />

Эквивалентный код на C# выглядит так:

Editor editor = new editor { CharacterSpacing = 10 };

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

Примечание.

Значение CharacterSpacing свойства применяется к тексту, отображаемого свойствами и Placeholder свойствамиText.

Автоматический размер редактора

Можно Editor выполнить автоматическое масштабирование содержимого, задав Editor.AutoSize для TextChangesсвойства значение , которое является значением перечисления EditorAutoSizeOption . Это перечисление имеет два значения:

Disabled указывает, что автоматическое изменение размера отключено и является значением по умолчанию.
TextChanges указывает, что автоматическое изменение размера включено.

Это можно сделать в коде следующим образом:

<Editor Text="Enter text here" AutoSize="TextChanges" />

var editor = new Editor { Text = "Enter text here", AutoSize = EditorAutoSizeOption.TextChanges };

При включении автоматического Editor изменения размера высота увеличивается при заполнении пользователем текста, а высота уменьшается по мере удаления текста пользователем.

Примечание.

Не Editor будет автоматический размер, если HeightRequest свойство задано.

Настройка клавиатуры

Клавиатура, представленная при взаимодействии пользователей с Editor ним, может быть программно задана через Keyboard свойство, в одно из следующих свойств из Keyboard класса:

Chat — это текстовая клавиатура с эмодзи.
Default — это клавиатура по умолчанию.
Email используется для ввода адресов электронной почты.
Numeric — цифровая клавиатура.
Plain предназначена для ввода текста, если нет заданных KeyboardFlags.
Telephone — клавиатура для ввода телефонных номеров.
Text — текстовая клавиатура.
Url — клавиатура для ввода путей к файлам и веб-адресов.

Это можно сделать в XAML следующим образом:

<Editor Keyboard="Chat" />

Эквивалентный код на C# выглядит так:

var editor = new Editor { Keyboard = Keyboard.Chat };

Примеры каждой клавиатуры можно найти в нашем репозитории рецептов .

Класс Keyboard также имеет фабричный метод Create, который может использоваться для настройки клавиатуры, задавая регистр букв, проверку орфографии и режим подсказок. Значения перечисления KeyboardFlags задаются как аргументы метода, при этом возвращается настроенное свойство Keyboard. Перечисление KeyboardFlags имеет такие значения:

None указывает, что клавиатура не имеет никаких дополнительных функций.
CapitalizeSentence указывает, что первые слова во всех вводимых предложениях автоматически начинаются с прописных букв.
Spellcheck указывает, что для вводимого текста выполняется проверка орфографии.
Suggestions указывает, что для вводимых слов предлагается завершение.
CapitalizeWord указывает, что все слова автоматически начинаются с прописных букв.
CapitalizeCharacter указывает, что все символы автоматически пишутся прописными буквами.
CapitalizeNone указывает, что автоматическая подстановка прописных букв не выполняется.
All указывает, что для вводимого текста выполняется проверка орфографии, завершение слов и автоматическое написание предложений с прописной буквы.

В следующем примере кода XAML показано, как настроить значение по умолчанию Keyboard, чтобы включить предложение завершения слов и написание всех символов прописными буквами:

<Editor>
    <Editor.Keyboard>
        <Keyboard x:FactoryMethod="Create">
            <x:Arguments>
                <KeyboardFlags>Suggestions,CapitalizeCharacter</KeyboardFlags>
            </x:Arguments>
        </Keyboard>
    </Editor.Keyboard>
</Editor>

Эквивалентный код на C# выглядит так:

var editor = new Editor();
editor.Keyboard = Keyboard.Create(KeyboardFlags.Suggestions | KeyboardFlags.CapitalizeCharacter);

Включение и отключение проверка орфографии

Свойство IsSpellCheckEnabled определяет, включено ли проверка орфографии. По умолчанию для свойства задано trueзначение . Когда пользователь вводит текст, указываются ошибки.

Однако для некоторых сценариев ввода текста, таких как ввод имени пользователя, орфография проверка обеспечивает отрицательный интерфейс и поэтому следует отключить, установив IsSpellCheckEnabled для свойства falseзначение :

<Editor ... IsSpellCheckEnabled="false" />

var editor = new Editor { ... IsSpellCheckEnabled = false };

Примечание.

IsSpellCheckEnabled Если для свойства задано falseзначение , и пользовательская клавиатура не используется, собственный проверка орфографический проверка er будет отключен. Однако если Keyboard задано значение, которое отключает проверка орфографических проверка, напримерKeyboard.Chat, IsSpellCheckEnabled свойство игнорируется. Поэтому свойство нельзя использовать для включения проверка орфографии для явного Keyboard отключения свойства.

Включение и отключение прогнозирования текста

Свойство IsTextPredictionEnabled определяет, включено ли прогнозирование текста и автоматическое исправление текста. По умолчанию для свойства задано trueзначение . По мере ввода текста пользователь представляет прогнозы слов.

Однако для некоторых сценариев ввода текста, таких как ввод имени пользователя, прогнозирование текста и автоматическое исправление текста, обеспечивает отрицательный интерфейс и должен быть отключен, задав IsTextPredictionEnabled для свойства falseзначение :

<Editor ... IsTextPredictionEnabled="false" />

var editor = new Editor { ... IsTextPredictionEnabled = false };

Примечание.

IsTextPredictionEnabled Если для свойства задано falseзначение, а пользовательская клавиатура не используется, прогнозирование текста и автоматическое исправление текста отключается. Однако если Keyboard задано значение, которое отключает прогнозирование текста, IsTextPredictionEnabled свойство игнорируется. Поэтому свойство нельзя использовать для включения прогнозирования текста для явного Keyboard отключения этого свойства.

Цвета

Editor можно задать для использования пользовательского цвета фона BackgroundColor с помощью свойства. Необходимо специальное внимание, чтобы гарантировать, что цвета будут использоваться на каждой платформе. Так как каждая платформа имеет разные значения по умолчанию для цвета текста, может потребоваться задать пользовательский цвет фона для каждой платформы. Дополнительные сведения об оптимизации пользовательского интерфейса для каждой платформы см. в статье "Работа с платформой tweaks ".

В C#:

public partial class EditorPage : ContentPage
{
    public EditorPage ()
    {
        InitializeComponent ();
        var layout = new StackLayout { Padding = new Thickness(5,10) };
        this.Content = layout;
        //dark blue on UWP & Android, light blue on iOS
        var editor = new Editor { BackgroundColor = Device.RuntimePlatform == Device.iOS ? Color.FromHex("#A4EAFF") : Color.FromHex("#2c3e50") };
        layout.Children.Add(editor);
    }
}

В XAML:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="TextSample.EditorPage"
    Title="Editor Demo">
    <ContentPage.Content>
        <StackLayout Padding="5,10">
            <Editor>
                <Editor.BackgroundColor>
                    <OnPlatform x:TypeArguments="x:Color">
                        <On Platform="iOS" Value="#a4eaff" />
                        <On Platform="Android, UWP" Value="#2c3e50" />
                    </OnPlatform>
                </Editor.BackgroundColor>
            </Editor>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Editor with BackgroundColor Example

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

События и интерактивность

Editor предоставляет два события:

TextChanged — вызывается при изменении текста в редакторе. Предоставляет текст до и после изменения.
Завершено — возникает, когда пользователь завершил ввод, нажав клавишу возврата на клавиатуре.

Примечание.

Класс VisualElement , от которого Entry наследуется, также имеет Focused и Unfocused события.

Завершено

Событие Completed используется для реагирования на завершение взаимодействия с ним Editor. Completed вызывается, когда пользователь заканчивает вход с полем, введя возвращаемый ключ на клавиатуре (или нажав клавишу TAB на UWP). Обработчик события — это универсальный обработчик событий, принимающие отправителя и EventArgs:

void EditorCompleted (object sender, EventArgs e)
{
    var text = ((Editor)sender).Text; // sender is cast to an Editor to enable reading the `Text` property of the view.
}

Завершенное событие можно подписаться на код и XAML:

В C#:

public partial class EditorPage : ContentPage
{
    public EditorPage ()
    {
        InitializeComponent ();
        var layout = new StackLayout { Padding = new Thickness(5,10) };
        this.Content = layout;
        var editor = new Editor ();
        editor.Completed += EditorCompleted;
        layout.Children.Add(editor);
    }
}

В XAML:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TextSample.EditorPage"
Title="Editor Demo">
    <ContentPage.Content>
        <StackLayout Padding="5,10">
            <Editor Completed="EditorCompleted" />
        </StackLayout>
    </ContentPage.Content>
</Contentpage>

Textchanged

Событие TextChanged используется для реагирования на изменение содержимого поля.

TextChanged вызывается всякий TextEditor раз, когда изменения изменяются. Обработчик события принимает экземпляр TextChangedEventArgs. TextChangedEventArgs предоставляет доступ к старым и новым значениям EditorText через OldTextValue и NewTextValue свойства:

void EditorTextChanged (object sender, TextChangedEventArgs e)
{
    var oldText = e.OldTextValue;
    var newText = e.NewTextValue;
}

Завершенное событие можно подписаться на код и XAML:

В коде:

public partial class EditorPage : ContentPage
{
    public EditorPage ()
    {
        InitializeComponent ();
        var layout = new StackLayout { Padding = new Thickness(5,10) };
        this.Content = layout;
        var editor = new Editor ();
        editor.TextChanged += EditorTextChanged;
        layout.Children.Add(editor);
    }
}

В XAML:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TextSample.EditorPage"
Title="Editor Demo">
    <ContentPage.Content>
        <StackLayout Padding="5,10">
            <Editor TextChanged="EditorTextChanged" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Xamarin.Forms Editor

Установка и чтение текста

Установка текста заполнителя

Запрет ввода текста

Преобразование текста

Ограничение длины входных данных

Интервалы между символами

Автоматический размер редактора

Настройка клавиатуры

Включение и отключение проверка орфографии

Включение и отключение прогнозирования текста

Цвета

События и интерактивность

Завершено

Textchanged

Дополнительные ссылки

Дополнительные ресурсы