Текстовые поля в .NET MAUI: Editor и Entry

Для ввода текстовых данных в приложении .NET MAUI могут использоваться два типа компонентов — Editor(многострочный редактор) и Entry(однострочный редактор). В этой части мы рассмотрим работу с текстовыми полями в .NET MAUI и XAML

Общие свойства Editor и Entry

Так как оба редактора предназначены для ввода текста, то и свойства у этих редакторов, в большинстве случаев, аналогичны. Поэтому стоит сразу рассмотреть те свойства, которые присущи и Editor и Entry, а затем, рассмотреть отличия. Итак, оба редактора содержат следующие свойства:

Кроме того, оба элемента управления предоставляют нам для работы следующее событие:

public event TextChangedEventArgs> TextChanged;

возникающее каждый раз при изменении текста. Тип TextChangedEventArgs предоставляет нам свойства:

Рассмотрим некоторые из этих свойств подробнее. Для этого создадим новое приложение .NET MAUI и изменим код файла MainPage.xaml.cs следующим образом:

namespace MauiApp8
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void OnTextChanged(object sender, TextChangedEventArgs args)
        {
            EditorLabel.Text = args.OldTextValue;
        }

    }

}

Здесь мы добавили обработчик события TextChanged для нашего будущего редактора. Теперь изменим файл MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp8.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">

            <Editor Placeholder="Введите текст (не более 10 символов)" 
                    PlaceholderColor="Blue"
                    MaxLength="10"
                    Keyboard="Text"
                    IsSpellCheckEnabled="True"
                    IsTextPredictionEnabled="True"
                    TextChanged="OnTextChanged"/>

            <Label x:Name="EditorLabel" />
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Здесь мы добавили текстовый редактор для которого мы задали ряд свойств из таблицы выше, обработчик события TetChanged и метку, в которой будет отображаться предыдущее значение из редактора.

Чтобы продемонстрировать работу редактора в полной мере, лучше всего запустить приложение в эмуляторе Android или же непосредственно на телефоне. Как только вы запустите приложение, то увидите редактор текста:

При нажатии на редактор откроется клавиатура для набора текста.

При наборе текста в редакторе вы будете видеть также, как меняется содержимое метки и, при этом, текст метки будет всегда на один символ короче, чем в редакторе так как мы отображаем в ней предыдущее значение свойства Text редактора. Теперь разберемся с тем, как мы можем управлять клавиатурой в редакторах

Вид клавиатуры в Editor и Entry

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

Например, зададим в нашем приложении клавиатуру для ввода цифр (Numeric):

<Editor Placeholder="Введите текст (не более 10 символов)" 
        PlaceholderColor="Blue"
        MaxLength="10"
        Keyboard="Numeric"
        IsSpellCheckEnabled="True"
        IsTextPredictionEnabled="True"
        TextChanged="OnTextChanged"/>

Теперь в приложении наша клавиатура будет выглядеть следующим образом:

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

Так как KeyboardFlags представляет собой битовые флаги, то мы можем использовать несколько флагов одновременно. Например, перепишем XAML-код нашего редактора следующим образом:

<Editor Placeholder="Введите текст (не более 10 символов)" 
        PlaceholderColor="Blue"
        MaxLength="10"
        
        IsSpellCheckEnabled="True"
        IsTextPredictionEnabled="True"
        TextChanged="OnTextChanged">
    <Editor.Keyboard>
        <Keyboard x:FactoryMethod="Create">
            <x:Arguments>
                <KeyboardFlags>Suggestions, Spellcheck, CapitalizeWord</KeyboardFlags>
            </x:Arguments>
        </Keyboard>
    </Editor.Keyboard>
</Editor>

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

Теперь посмотрим на свойства Editor характерные именно для этого элемента управления.

Свойства Editor

Editor определяет следующие свойства:

Продемонстрируем значение этих свойств, изменив редактор в приложении следующим образом:

<Editor Placeholder="Введите текст (не более 10 символов)" 
        PlaceholderColor="Blue"
        AutoSize="TextChanges"
        VerticalTextAlignment="Center"
        HorizontalTextAlignment="Center"
        IsSpellCheckEnabled="True"
        IsTextPredictionEnabled="True"
        TextChanged="OnTextChanged"
        Keyboard="Text">
      
</Editor>

Теперь снова запустим приложение и напишем в редакторе текст, который явно не уместится в одну строку. В результате вы увидите, что Editor меняем свою высоту:

Кроме того, в соответствии с указанными настройками, текст размещается по центру как по вертикали, так и по горизонтали.

Свойства Entry

Однострочный редактор Entry предоставляет нам следующие свойства:

Например, изменим наше приложение следующим образом:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp8.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">

            <Entry IsPassword="True"
                   ReturnType="Send"
                   ClearButtonVisibility="WhileEditing"/>

            <Label x:Name="EditorLabel" />

            
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Теперь запустим приложение и посмотрим на результат. При запуске вы увидите обычное поле ввода без каких-либо дополнительных кнопок:

Как только вы начнете набирать текст, то увидите, что он скрывается, а в правой части поля появится кнопка очистки текста:

При этом, обратите внимание на кнопку «Ввод» на клавиатуре — её внешний вид может изменяться в зависимости от того, какое значения ReturnType было установлено. В нашем случае кнопка будет содержать пиктограмму «галочку». Можете поменять значение ReturnType, например, на Search и увидите, что на кнопке будет иконка с лупой. Вид кнопки «Ввод» зависит от платформы и не везде она пиктограммы будут выглядеть одинаково — это необходимо учитывать при работе со свойством ReturnType.

Итого

Для ввода текста в .NET MAUI мы можем использовать два вида текстовых редакторов: Editor — многострочный редактор и Entry — однострочный редактор. Оба редактора содержат достаточно большое количество одинаковый свойств, например, свойство Keyboard, свойства шрифтов и оформления текста. При этом, Entry позволяет показывать кнопку очистки текста, а также менять внешний вид кнопки «Ввод». В свою очередь, Editor позволяет изменять свой размер в зависимости от размера введенного в него текста.