Стилизация текста

Для стилизации текста у элементов управления .NET MAUI имеют ряд свойств:

• FontFamily: устанавливает применяемое семейство шрифтов в виде значения типа string

• FontSize: устанавливает высоту шрифта в виде значения double

• FontAttributes: устанавливает дополнительные визуальные эффекты шрифта - выделение жирным или курсивом

• FontAutoScalingEnabled: указывает, будет ли для шрифта использоваться масштабирование, установленное в системе. Принимает значение bool - если масштабирование применяется, то используется значение true. По умолчанию значение true.

Для установки семейства используемых шрифтов свойству FontFamily в качестве значения передается название шрифта. Однако при установке шрифта надо учитывать, что данный шрифт должен поддерживаться на всех используемых платформах. Например, установка в коде:

Label header = new Label() { Text = ".NET MAUI in Arial" };
header.FontFamily = "Arial";

Установка в XAML:

<Label Text=".NET MAUI in Arial" FontFamily="Arial" />

Свойство FontSize

Для установки высоты шрифта используется значение типа double:

Label header = new Label() { Text = ".NET MAUI" };
header.FontSize = 26;

Установка в XAML:

<Label Text=".NET MAUI" FontSize="26" />

FontAttributes

FontAttributes позволяет выделить текст жирным или курсивом. Для этого он принимает значение из перечисления FontAttributes:

• Bold: выделение жирным

• Italic: выделение курсивом

Применение:

Label label1 = new Label
{
    Text = "Bold",
    FontAttributes = FontAttributes.Bold
};

Label label2 = new Label
{
    Text = "Bold и Italics",
    // сочетание значений
    FontAttributes = FontAttributes.Bold | FontAttributes.Italic
};

В xaml:

<Label Text="Bold" FontAttributes="Bold" />
<Label Text="Bold и Italics" FontAttributes="Bold, Italic" />

Регистрация шрифтов

Использование своих или каких-то кастомных шрифтов на сегодняшний день достаточно распространенная задача. Механизм MAUI предельно ее упрощает. Прежде всего, если мы хотим использовать кастомные шрифты в формате TTF (True Type Format) или OTF (Open Type Font), нам надо добавить их файлы в проект в папку Resources/Fonts. Так, в проекте по умолчанию в этой папке уже есть два шрифта:

Для регистрации добавленныъ шрифтов применяется метод ConfigureFonts() объекта MauiAppBuilder (по умолчанию это делается в файле MauiProgram.cs). В метод ConfigureFonts передается объект IFontCollection (коллекция шрифтов), у которого можно вызвать метод AddFont для добавления шрифта:

var builder = MauiApp.CreateBuilder();
builder
	.UseMauiApp()
	.ConfigureFonts(fonts =>
	{
		fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
		fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});

В метод AddFont передается название файла шрифта и его псевдоним.

После регистрации шрифта мы сможем обращаться к нему в коде C# или XAML через его псевдоним. Например, второй добавленный шрифт имеет псевдоним "OpenSansSemibold", используем его

Label label1 = new Label
{
    Text = "OpenSansSemibold",
    FontSize = 22,
    FontFamily = "OpenSansSemibold" // устанавливаем шрифт по его псевдониму
};

Выравнивание текста внутри элемента

Элементы управления, которые реализуют интерфейс ITextAlignment, позволяют настроить выравнивание текста. Выравнивание текста по горизонтали и вертикали задается с помощью свойств HorizontalTextAlignment и VerticalTextAlignment соответственно. В качестве значения эти свойства принимают одну из констант перечисления TextAlignment:

• Start: текст выравнивается по левому краю по горизонтали или по верху по вертикали

• Center: текст выравнивается по центру

• End: текст выравнивается по правому краю по горизонтали или по низу по вертикали

Пример на c#:

Label header = new Label() { Text = "Hello METANIT.COM!" };
header.HorizontalTextAlignment = TextAlignment.Center;
header.VerticalTextAlignment = TextAlignment.Center;

В xaml:

<Label Text="Hello METANIT.COM!" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" />