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

В Xamarin Forms текстовые поля представлены несколькими классами:

• Label: текстовая метка для вывода текста

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

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

Label

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

Label довольно простой элемент, однако даже с ним могут возникать некоторые сложности. Например, кнопки определяют событие нажатия, которое мы можем обработать. У Label подобного события нет. Но что делать, если мы вдруг хотим обрабатывать нажатие на заголовок? В этом случае мы можем воспользоваться специальным классом TapGestureRecognizer, который позволяет обрабатывать нажатия:

public class MainPage : ContentPage
{
    public MainPage()
    {
        Label label = new Label
        {
            VerticalTextAlignment = TextAlignment.Center,
            HorizontalTextAlignment = TextAlignment.Center,
            Text = "Welcome to Xamarin Forms!",
            FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
        };
            
        TapGestureRecognizer tapGesture = new TapGestureRecognizer
        {
            NumberOfTapsRequired = 2
        };

        int count = 0;	// счетчик нажатий
        tapGesture.Tapped += (s, e) =>
        {
            count++;
            if (count % 2 == 0)
            {
                label.BackgroundColor = Color.Black;
                label.TextColor = Color.White;
            }
            else
            {
                label.TextColor = Color.Black;
                label.BackgroundColor = Color.White;
            }
            label.Text = $"Вы нажали {count} раз";
        };
        label.GestureRecognizers.Add(tapGesture);
            
        Content = label;
    }
}

TapGestureRecognizer представляет специальный класс, который позволяет распознать нажатия. С помощью свойства NumberOfTapsRequired мы можем установить, сколько нажатий необходимо. В данном случае мы устанавливаем двойное нажатие. И именно по двойному нажатию будет генерироваться событие Tapped, в обработчике которого мы будем переключать цвет текста и фона метки.

И чтобы связать объект TapGestureRecognizer с меткой, необходимо добавить этот объект в коллекцию GestureRecognizers:

label.GestureRecognizers.Add(tapGesture);

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

Entry представляет текстовое поле для ввода однострочной информации:

class MainPage : ContentPage
{
    Label textLabel;
    Entry loginEntry, passwordEntry;
    public MainPage()
    {
        StackLayout stackLayout = new StackLayout();

        loginEntry = new Entry { Placeholder = "Login" };
        loginEntry.TextChanged+=loginEntry_TextChanged;

        passwordEntry = new Entry
        {
            Placeholder = "Password",
            IsPassword = true
        };
        textLabel = new Label { FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)) };

        stackLayout.Children.Add(loginEntry);
        stackLayout.Children.Add(passwordEntry);
        stackLayout.Children.Add(textLabel);
        this.Content = stackLayout;
    }
	
	private void loginEntry_TextChanged(object sender, TextChangedEventArgs e)
    {
        textLabel.Text = loginEntry.Text;
    }
}

Обработать ввод пользователя мы можем с помощью обработки события TextChanged

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

<StackLayout>
    <Entry x:Name="loginEntry" TextChanged="loginEntry_TextChanged" />
    <Entry x:Name="passwordEntry"  Placeholder = "Password" IsPassword ="True" />
    <Label x:Name="textLabel" FontSize="Large" />
</StackLayout>

Основные свойства элемента Entry, которые мы можем использовать:

• Text: введенный в поле текст

• TextColor: цвет вводимого текста

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

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

Также класс Entry определяет два события:

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

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

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

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

• Default

• Text

• Chat

• Url

• Email

• Telephone

• Numeric

Каждое значение предоставляет свою раскладку клавиатуры, предназначенную для ввода определенной информации. Например, entry.Keyboard=Keyboard.Telephone - при вводе нам автоматически представляется раскладка, содержащая только те знаки, которые используются при наборе телефонного номера.

Editor

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

public MainPage()
{
    StackLayout stackLayout = new StackLayout();

    Editor textEditor = new Editor { HeightRequest=200, BackgroundColor=Color.Teal};
    Label textLabel = new Label 
	{ 
		Text="Многострочный текст", 
		FontSize= Device.GetNamedSize(NamedSize.Large, typeof(Label)) 
	};

    stackLayout.Children.Add(textLabel);
    stackLayout.Children.Add(textEditor);
    this.Content = stackLayout;
}

Реализация в xaml:

<StackLayout>
    <Label Font="26" Text="Многострочный ввод" />
    <Editor BackgroundColor="#a5d6a7" HeightRequest="200" />
</StackLayout>