Label

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

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

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

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

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

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

• FormattedText: представляет отформатированный текст в виде объекта FormattedString

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

• LineHeight: высота строки (значение типа double)

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

• Padding: внутренний отступ

• Text: текст метки

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

• TextDecorations: декорации текста (его подчеркивание или вчеркивание) (значение типа TextDecorations)

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

• TextType: значение типа TextType, которое определяет тип текста - обычный текст или html

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

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

Пример простейшей метки

namespace HelloApp
{
    class StartPage : ContentPage
    {
        public StartPage()
        {
            Grid grid = new Grid();

            Label label = new Label
            {
                Text = "Hello METANIT.COM!",
                TextDecorations = TextDecorations.Underline,
                CharacterSpacing = 2,
                FontAttributes = FontAttributes.Bold,
                FontFamily = "Helvetica",
                FontSize = 22,
                VerticalOptions = LayoutOptions.Center,
                HorizontalOptions = LayoutOptions.Center
            };

            grid.Children.Add(label);
            Content = grid;
        }
    }
}

Аналогичный пример в 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">
    <Grid>
        <Label FontSize="22" Text = "Hello METANIT.COM!"
             TextDecorations = "Underline" CharacterSpacing = "2"
             FontAttributes = "Bold" FontFamily = "Helvetica"
            HorizontalOptions="Center" VerticalOptions="Center"
         />
    </Grid>
</ContentPage>

Форматирование текста

Свойство Text элемента Label позволяет устанавливать простой текст, который мы можем стилизовать с помощью ранее рассмотренных свойств. Однако текст с каким-то более сложным форматированием так не задать. И для этого в элементе Label определено вспомогательное свойство FormattedText, которое допускает сложное форматирование.

Свойство FormattedText хранит не просто строку текста, а объект типа FormattedString, который инкапсулирует объекты типа Span. Каждый объект Span как раз и представляет кусок некоторым образом стилизованного текста. Для стилизации объекта Span применются все те же свойства:

• Text

• FontFamily

• FontSize

• FontAttributes

• TextColor

• BackgroundColor

Например,создадим текст со сложным форматированием в коде:

namespace HelloApp
{
    class StartPage : ContentPage
    {
        public StartPage()
        {
            Grid grid = new Grid();

            Label header = new Label();

            FormattedString formattedString = new FormattedString();
            formattedString.Spans.Add(new Span
            {
                Text = "Сегодня ",
                FontSize = 22
            });
            formattedString.Spans.Add(new Span
            {
                Text = "хорошая",
                TextColor = Colors.DarkRed,
                BackgroundColor = Colors.LightPink,
            });
            formattedString.Spans.Add(new Span
            {
                Text = " погода!",
                FontAttributes = FontAttributes.Bold
            });
            header.FormattedText = formattedString;

            header.VerticalOptions = LayoutOptions.Center;
            header.HorizontalOptions = LayoutOptions.Center;

            grid.Children.Add(header);
            Content = grid;
        }
    }
}

Аналогичный код в 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">
    <Grid>
        <Label HorizontalOptions="Center" VerticalOptions="Center">
            <Label.FormattedText>
                <FormattedString>
                    <Span Text="Сегодня " FontSize="22" />
                    <Span Text="хорошая " BackgroundColor="LightPink" TextColor="DarkRed" />
                    <Span Text="погода!" FontAttributes="Bold" />
                </FormattedString>
            </Label.FormattedText>
        </Label>
    </Grid>
</ContentPage>

Перевод строки

Для переноса текста на новую строку используется значение "\n". Например:

header.Text= "Его пример другим наука;\n"+
             "Но, боже мой, какая скука\n" +
             "С больным сидеть и день и ночь,\n" +
             "Не отходя ни шагу прочь!\n";

В 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">
    <Grid>
        <Label HorizontalOptions="Center" VerticalOptions="Center" FontSize="22">
            <Label.Text>
                <x:String>
Его пример другим наука;
Но, боже мой, какая скука
С больным сидеть и день и ночь,
Не отходя ни шагу прочь!
                </x:String>
            </Label.Text>
        </Label>
    </Grid>
</ContentPage>

В данном случае применяется сложное свойство Label.Text, которое в качестве значения принимает объект String. Причем для элемента String применяется префикс x - x:String, то есть определение данного типа берется из пространства имен "http://schemas.microsoft.com/winfx/2009/xaml"

Обработка нажатия

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

namespace HelloApp
{
    class StartPage : ContentPage
    {
        public StartPage()
        {
            Grid grid = new Grid();

            Label label = new Label 
            {
                Text = "Hello METANIT.COM",
                VerticalOptions = LayoutOptions.Center,
                HorizontalOptions = LayoutOptions.Center,
                FontSize = 22
            };
            
            TapGestureRecognizer tapGesture = new TapGestureRecognizer
            {
                NumberOfTapsRequired = 2
            };

            int count = 0;  // счетчик нажатий
            tapGesture.Tapped += (s, e) =>
            {
                count++;
                label.Text = $"Вы нажали {count} раз";
            };
            label.GestureRecognizers.Add(tapGesture);

            grid.Children.Add(label);
            Content = grid;
        }
    }
}

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

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

label.GestureRecognizers.Add(tapGesture);