.NET MAUI. Работа с текстом и шрифтами

Многие элементы управления в .NET MAUI могут отображать какой-либо текст. Например, такие элементы как метки (Label), кнопки (Button), а также различные списки и коллекции могут содержать такие свойства для работы с текстом и шрифтами как FontFamily, FontSize, TextDecorations, TextTransform и другие. В этой части мы рассмотрим работу с этими другими свойствами элементов XAML, отвечающими за работу с текстом в .NET MAUI

Использование шрифтов в .NET MAUI

Все элементу управления в .NET MAUI, которые могут отображать какие-либо текстовые данные, содержат следующие свойства для работы со шрифтами:

Чтобы продемонстрировать работу с этими свойствами, создадим новое приложение .NET MAUI и изменим содержимое страницы 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="MauiApp6.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            <Image
                Source="dotnet_bot.png"
                HeightRequest="185"
                Aspect="AspectFit"
                SemanticProperties.Description="dot net bot in a hovercraft number nine" />

            <Label FontSize="30"
                   FontAttributes="Italic"
                   FontAutoScalingEnabled="True"
                   Text="Привет, мир!" />

            <Label 
                FontSize="24"
                FontAttributes="Bold,Italic"
                FontAutoScalingEnabled="True"
                Text="Это приложение демонстрирует работу со шрифтами в .NET MAUI"/>

            <Button
                x:Name="CounterBtn"
                Text="Click me" 
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Fill" />
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Здесь мы использовали свойства управления шрифтами для двух меток. Для первой метки мы установили размер шрифта в 30 единиц, стиль шрифта — курсив и масштабирование:

<Label FontSize="30"
       FontAttributes="Italic"
       FontAutoScalingEnabled="True"
       Text="Привет, мир!" />

Для второй метки мы также установили свой размер шрифта, но стиль установили как жирный курсив:

<Label 
    FontSize="24"
    FontAttributes="Bold,Italic"
    FontAutoScalingEnabled="True"
    Text="Это приложение демонстрирует работу со шрифтами в .NET MAUI"/>

Обратите внимание, как мы в XAML устанавливаем несколько значений для свойства FontAttributes — мы просто перечисляем каждое значение перечисления через запятую

FontAttributes="Bold,Italic"

Теперь запустим приложение и посмотрим на результат:

Что касается свойства FontFamily, то мы его используем далее. По умолчанию, в приложении .NET MAUI использует на каждой платформе шрифт Open Sans, однако, при желании мы можем зарегистрировать в приложении свои собственные шрифты.

Регистрация собственных шрифтов в .NET MAUI

Регистрация шрифтов, обычно, производится в файле MainProgram.cs. Посмотрим на содержимое этого файла более внимательно:

Все регистрируемые в приложении шрифты, обычно, располагаются в папке Resources/Fonts. При этом, мы можем использовать как шрифты True Type (ttf), так и OpenType (otf).

Для того, чтобы зарегистрировать новый шрифт в системе, мы должны воспользоваться методом расширения для MauiAppBuilder ConfigureFonts(). Этот метод принимает делегат вида Action<IFontCollection>, где IFontCollection — коллекция, содержащая шрифты.

В свою очередь, метод IFontCollection.AddFont() добавляет новый шрифт в коллекцию и принимает два параметра: имя файла шрифта и псевдоним (alias) для шрифта, который мы далее будем использовать в приложении.

Рассмотрим процесс регистрации и использования нового шрифта в нашем приложении. Например, ниже будет регистрироваться True Type шрифт с именем Pastry Chef.

Перетаскиваем файл шрифта в папку Resources/Fonts:

Для файла шрифта необходимо установить действие при сборке — MauiFont, чтобы шрифт скопировался в пакет приложения при сборке.

Теперь зарегистрируем новый шрифт в нашем приложении:

using Microsoft.Extensions.Logging;

namespace MauiApp6;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                fonts.AddFont("PastryChef.ttf", "PastryChef"); //регистрируем собственный шрифт
            });

#if DEBUG
        builder.Logging.AddDebug();
#endif

        return builder.Build();
    }
}

Используем наш шрифт в приложении. Изменим содержимое 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="MauiApp6.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            <Image
                Source="dotnet_bot.png"
                HeightRequest="185"
                Aspect="AspectFit"
                SemanticProperties.Description="dot net bot in a hovercraft number nine" />

            <Label FontSize="30"
                   FontAttributes="None"
                   FontFamily="PastryChef"
                   FontAutoScalingEnabled="True"
                   Text="Привет, мир!" />

            <Label 
                FontSize="24"
                FontAttributes="Bold,Italic"
                FontAutoScalingEnabled="True"
                Text="Это приложение демонстрирует работу со шрифтами в .NET MAUI"/>

            <Button
                x:Name="CounterBtn"
                Text="Click me" 
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Fill" />
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

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

• monospaced
• Serif
• sans-serif (или sansserif)
• sans-serif-black (или sansserif-black)
• sans-serif-condensed (или sansserif-condensed)
• sans-serif-сжатый свет (или sansserif-сжатый свет)
• sans-serif-light (или sansserif-light)
• sans-serif-medium (или sansserif-medium)

Работа с текстом в .NET MAUI

Для работы с текстом в .NET MAUI могут использоваться следующие свойства:

Воспользуемся этими свойствами в нашем приложении и изменим первую метку на странице MainPage.xaml следующим образом:

<Label FontSize="30"
       FontAttributes="None"
       FontFamily="PastryChef"
       TextColor="Red"
       TextDecorations="Strikethrough, Underline"
       TextTransform ="Uppercase"
       HorizontalTextAlignment="Center"
       VerticalTextAlignment="Center"
       FontAutoScalingEnabled="True"
       Text="Привет, мир!" />

Теперь запустим приложение и посмотрим на результат:

Итого

Для работы со шрифтами в .NET MAUI элементы управления содержат свойства вида Font*, например, FontFamily, FotnSize и так далее. При желании, мы можем зарегистрировать в своем приложении свои собственные шрифты, используя файлы с расширениями ttf или otf. Также в XAML содержится ряд свойств, позволяющие украшать текст элемента — устанавливать цвет шрифта, делать шрифт зачеркнутым и так далее. Эти свойства, содержат в названии слово Text, например, TextColor, TextDecorations и т.д.