Текстовые поля

Текстовые поля ввода в .NET MAUI представлены несколькими классами:

• Entry: однострочное текстовое поле

• Editor: многострочное текстовое поле

Тектовое поле Entry

Класс Entry представляет текстовое поле для ввода однострочной информации. Для управления внешним видом элемента можно использовать следующие свойства:

• CharacterSpacing: расстояние между символами в тексте в виде значения типа double

• ClearButtonVisibility: значение типа ClearButtonVisibility, которое указывает, надо ли отображать рядом с полем кнопку для очистки содержимого в поле

• CursorPosition: значение типа int, которое определяет положение курсора внутри поля

• FontAttributes: определяет стиль текста

• FontAutoScalingEnabled: значение типа bool, устанавливает, будет ли к тексту применяться системное масштабирование

• FontFamily: семейство шрифтов в виде строки

• FontSize: размер шрифта (значение типа double)

• Keyboard: объект типа Keyboard, который позволяет установить тип клавиатуры

• IsPassword: значение типа bool, которое указывает, предназначено ли поле для ввода пароля

• IsTextPredictionEnabled: значение типа bool, которое указывает, будет ли применяться предсказание ввода и его автоисправление

• Placeholder: -плецсхолдер - текст, который отображается, если поле пусто

• PlaceholderColor: цвет плейсхолдера

• Text: текст элемента

• TextColor: цвет текста

• SelectionLength: значение типа int, которое определяет количество выделенных символов

• MaxLength: максимальное допустимое количество символов

• IsReadOnly: значение типа bool, которое указывает, доступно ли поле только для чтения. По умолчанию значение false, то есть поле доступно для редактирования

• IsSpellCheckEnabled: значение типа bool, которое указывает, включена ли проверка орфографии

• TextTransform: объект типа TextTransform, который определяет преобразование текста

• HorizontalTextAlignment: значение TextAlignment, которое определяет выравнивание текста по горизонтали

• VerticalTextAlignment: значение типа TextAlignment, которое определяет выравнивание текста по вертикали

Простейшее поле ввода:

namespace HelloApp
{
    class StartPage : ContentPage
    {
        public StartPage()
        {
            StackLayout stackLayout = new StackLayout();

            Entry entry = new Entry 
            { 
                Placeholder = "Введите Email", 
                FontFamily="Helvetica", 
                FontSize=22,
                MaxLength = 20
            };

            stackLayout.Children.Add(entry);
            Content = stackLayout;
        }
    }
}

Аналог в 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="HelloApp.MainPage">
    <StackLayout>
        <Entry Placeholder = "Введите Email" FontFamily="Helvetica" 
                FontSize="22" MaxLength ="20" />
    </StackLayout>
</ContentPage>

Формат клавиатуры

Среди свойств текстового поля ввода одним из наиболее интересных является свойство Keyboard. Оно позволяет задать формат клавиатуры для ввода символов. Например, если необходимо ввести в поле какую-то числовую информацию, то гораздо было бы проще с точки зрения юзабилити предоставить пользователю сразу числовую раскладку клавиатуры. Данное свойство в качестве значения принимает объект класса Keyboard. Готовые раскладки клавиатуры можно получить с помощью одного из статических свойств класса Keyboard:

• Default: раскладка по умолчанию

• Text: для набора текста

• Chat: для набора текста и эмодзи

• Url: для набора url-адресов

• Email: для набора электронных адресов

• Telephone: для набора номера телефона

• Numeric: для ввода чисел

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

 Entry entry = new Entry 
{ 
    Keyboard = Keyboard.Telephone
};

Или в XAML

<Entry Keyboard="Telephone" />

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

Флаги KeyboardFlags

Для настройки ввода также можно применять константы перечисления KeyboardFlags:

KeyboardFlags

• None: для клавиатуры не добавляется никакой дополнительной функциональности

• CapitalizeSentence: указывает, что первая буква первого слова каждого предложения автоматически будет заглавной

• Spellcheck: указывает, что для введенного текста будет применяться проверка правописания

• Suggestions: при вводе слова будут предлагаться завершения слова

• CapitalizeWord: первая буква каждого слова автоматически будет заглавной

• CapitalizeCharacter: каждый введенный символ будет автоматически делаться заглавным

• CapitalizeNone: автоматическая капитализация отключена

• All: будут автоматически применяться значения CapitalizeSentence, Spellcheck и Suggestions

Применение в коде C#:

Entry entry = new Entry();
entry.Keyboard = Keyboard.Create(KeyboardFlags.Suggestions | KeyboardFlags.CapitalizeCharacter);

Здесь одновременно применяются два значения - Suggestions и CapitalizeCharacter.

Аналог в XAML:

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

Обработка ввода пользователя

Для обработки ввода пользователя класс Entry предоставляет два события:

• TextChanged: возникает при вводе символов в поле

• Completed: возникает при завершении ввода

Например, обработаем ввод пользователя таким образом, чтобы вводимые в элемент Entry символы сразу же отображались в элементе Label

namespace HelloApp
{
    class StartPage : ContentPage
    {
        Label nameLabel;
        Entry nameEntry;
        public StartPage()
        {
            StackLayout stackLayout = new StackLayout();

            nameEntry = new Entry { FontSize = 22 };
            nameEntry.TextChanged+= nameEntry_TextChanged;
            nameLabel = new Label { FontSize = 22 };

            stackLayout.Children.Add(nameEntry);
            stackLayout.Children.Add(nameLabel);
            Content = stackLayout;
        }

        void nameEntry_TextChanged(object sender, TextChangedEventArgs e)
        {
            nameLabel.Text = nameEntry.Text;
        }
    }
}

Стоит отметить, что .NET MAUI предоставляет встроенную систему привязки, которая позволяет упростить такие случаи, тем не менее таким образом мы можем динамически перехватывать и обрабатывать ввод пользователя.

Аналогичный пример в xaml:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.MainPage">
    <StackLayout>
        <Entry x:Name="nameEntry" FontSize="22" TextChanged="nameEntry_TextChanged" />
        <Label x:Name="nameLabel" FontSize="22" />
    </StackLayout>
</ContentPage>

И обработчик события в файле связанного кода:

public partial class MainPage : ContentPage
{
	public MainPage()
	{
        InitializeComponent();
    }
    void nameEntry_TextChanged(object sender, TextChangedEventArgs e)
    {
        nameLabel.Text = nameEntry.Text;
    }
}

В качестве параметра в метод передается объект типа TextChangedEventArgs, который имеет два свойства:

• OldTextValue: старое значение поля

• NewTextValue: новое значение поля

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

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

Editor

В отличие от Entry Editor представляет собой многострочное поле ввода, но принципы его работы аналогичны. Он также имеет все те же свойства и события. Например:

namespace HelloApp
{
    class StartPage : ContentPage
    {
        public StartPage()
        {
            StackLayout stackLayout = new StackLayout();

            Editor textEditor = new Editor { HeightRequest = 200, FontSize = 16 };
            stackLayout.Children.Add(textEditor);
            Content = stackLayout;
        }
    }
}

По умолчанию размер поля Editor фактически представляет размер одной строки. И в данном случае, чтобы растянуть текстовое поле по высоте, у него устанавливается высота - свойство HeightRequest

Реализация в 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="HelloApp.MainPage">
    <StackLayout>
        <Editor FontSize="16" HeightRequest="200" />
    </StackLayout>
</ContentPage>