Этикетка

  • Статья

Просмотрите пример. Обзор примера

Многоплатформенный пользовательский интерфейс приложения .NET (.NET MAUI) Label отображает однострочный и многострочный текст. Текст, отображаемый Label цветом, пробелами и может иметь текстовые украшения.

Label определяет следующие свойства:

  • CharacterSpacing, тип double, задает интервал между символами в отображаемом тексте.
  • FontAttributes, типа FontAttributes, определяет стиль текста.
  • FontAutoScalingEnabledboolТип , определяет, будет ли текст отражать параметры масштабирования, заданные в операционной системе. Значение по умолчанию этого свойства равно true.
  • FontFamily, тип string, определяет семейство шрифтов.
  • FontSize, тип double, определяет размер шрифта.
  • FormattedTextFormattedStringТип , указывает представление текста с несколькими параметрами презентации, такими как шрифты и цвета.
  • HorizontalTextAlignment, типа TextAlignment, определяет горизонтальное выравнивание отображаемого текста.
  • LineBreakMode, типа LineBreakMode, определяет, как следует обрабатывать текст, если он не может помещаться в одну строку.
  • LineHeightdoubleТип , указывает умножение, которое будет применяться к высоте строки по умолчанию при отображении текста.
  • MaxLinesintТип , указывает максимальное число строк, разрешенных в .Label
  • PaddingThicknessТип , определяет заполнение метки.
  • TextstringТип , определяет текст, отображаемый в виде содержимого метки.
  • TextColor, типа Color, определяет цвет отображаемого текста.
  • TextDecorations, тип TextDecorations, указывает текстовые украшения (подчеркивание и начерк), которые могут быть применены.
  • TextTransformTextTransformТип , указывает регистр отображаемого текста.
  • TextTypeTextTypeТип , определяет, должен ли Label отображаться обычный текст или HTML-текст.
  • VerticalTextAlignmentTextAlignmentТип , определяет вертикальное выравнивание отображаемого текста.

Эти свойства поддерживаются объектами BindableProperty, то есть эти свойства можно указывать в качестве целевых для привязки и стилизации данных.

Сведения об указании шрифтов в объекте Labelсм. в разделе "Шрифты".

Создание метки

В следующем примере показано, как создать :Label

<Label Text="Hello world" />

Эквивалентный код на C# выглядит так:

Label label = new Label { Text = "Hello world" };

Настройка цветов

Метки можно задать для использования определенного цвета текста с помощью TextColor свойства.

В следующем примере задается цвет текста:Label

<Label TextColor="#77d065"
       Text="This is a green label." />

Дополнительные сведения о цветах см. в разделе "Цвета".

Установка интервалов символов

Интервалы символов можно применить к Label объектам, задав CharacterSpacing свойству double значение:

<Label Text="Character spaced text"
       CharacterSpacing="10" />

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

Добавление новых строк

Существует два основных метода принудительного ввода текста в Label новую строку из XAML:

  1. Используйте символ канала строки Юникода, который имеет значение " ".
  2. Укажите текст с помощью синтаксиса элемента свойства.

В следующем коде показан пример обоих методов:

<!-- Unicode line feed character -->
<Label Text="First line &#10; Second line" />

<!-- Property element syntax -->
<Label>
    <Label.Text>
        First line
        Second line
    </Label.Text>
</Label>

В C#текст можно принудительно принудить к новой строке с символом \n:

Label label = new Label { Text = "First line\nSecond line" };

Управление усечением текста и оболочкой

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

  • NoWrap — не упаковывает текст, отображая только столько текста, сколько можно поместить в одну строку. Это значение по умолчанию для свойства LineBreakMode.
  • WordWrap — упаковывает текст по границе слова.
  • CharacterWrap — упаковывает текст в новую строку на границе символа.
  • HeadTruncation — усечение головы текста, показывающее конец.
  • MiddleTruncation — отображает начало и конец текста с серединой, заменяя многоточием.
  • TailTruncation — показывает начало текста, усечение конца.

Отображение определенного количества строк

Число строк, отображаемых элементом, Label можно указать, задав MaxLines свойству int значение:

  • Если MaxLines значение равно -1, являющееся значением LineBreakMode по умолчанию, Label значение свойства будет отображаться только одна строка, возможно усеченная или все строки со всеми текстами.
  • Если MaxLines значение равно 0, Label оно не отображается.
  • Если MaxLines значение равно 1, результат идентичен настройке LineBreakMode свойства NoWrap, или MiddleTruncationHeadTruncationTailTruncation. Однако значение Label свойства будет соблюдаться LineBreakMode в отношении размещения многоточия, если применимо.
  • Если MaxLines значение больше 1, Label отображается до указанного количества строк, учитывая значение LineBreakMode свойства в отношении размещения многоточия, если применимо. Однако если MaxLines для свойства задано NoWrapзначение, равное 1, значение не действуетLineBreakMode.

В следующем примере XAML показано, как задать MaxLines свойство в Label:

<Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis nulla eu felis fringilla vulputate. Nullam porta eleifend lacinia. Donec at iaculis tellus."
       LineBreakMode="WordWrap"
       MaxLines="2" />

Установка высоты линии

Вертикальная высота Label объекта может быть настроена, задав Label.LineHeight свойству double значение.

Примечание.

  • В iOS Label.LineHeight свойство изменяет высоту строки текста, помещаемого в одну строку, и текст, который помещается в несколько строк.
  • В Android Label.LineHeight свойство изменяет только высоту строки текста, которая переносится на несколько строк.
  • В Windows Label.LineHeight свойство изменяет высоту строки текста, которая переносится на несколько строк.

В следующем примере показано, как задать LineHeight свойство в :Label

<Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis nulla eu felis fringilla vulputate. Nullam porta eleifend lacinia. Donec at iaculis tellus."
       LineBreakMode="WordWrap"
       LineHeight="1.8" />

На следующем снимка экрана показан результат установки Label.LineHeight свойства на 1.8:

Снимок экрана: пример высоты строк меток.

Отображение HTML

Внимание

Отображение HTML в объекте Label ограничено тегами HTML, поддерживаемыми базовой платформой. Например, Android поддерживает только подмножество HTML-тегов, фокусируясь на базовом стиле и форматировании для элементов уровня блока, таких как <span> и <p>. Для более сложной отрисовки HTML рекомендуется использовать или WebViewFormattedText.

Класс Label имеет свойство, определяющее, должен ли Label объект отображать обычный TextType текст или HTML-текст. Это свойство должно иметь одно из элементов TextType перечисления:

  • Text указывает, что Label будет отображаться обычный текст и является значением TextType по умолчанию свойства.
  • Html указывает, что Label будет отображаться HTML-текст.

Таким образом, объекты могут отображать HTML, Label задав Text свойству TextTypeHtmlзначение , а свойство — HTML-строке:

Label label = new Label
{
    Text = "This is <span style=\"color:red;\"><strong>HTML</strong></span> text.",
    TextType = TextType.Html
};

В приведенном выше примере двойные кавычки в HTML-коде должны быть экранированы с помощью символа \ .

В XAML строки HTML могут стать нечитаемыми из-за дополнительного < экранирования символов и > символов:

<Label Text="This is &lt;span style=&quot;color:red&quot;&gt;&lt;strong&gt;HTML&lt;/strong&gt;&lt;/span&gt; text."
       TextType="Html"  />

Кроме того, для повышения удобочитаемости HTML можно встраить в CDATA раздел:

<Label TextType="Html">
    <![CDATA[
    <Label Text="This is &lt;span style=&quot;color:red&quot;&gt;&lt;strong&gt;HTML&lt;/strong&gt;&lt;/span&gt; text."
    ]]>
</Label>

В этом примере Text свойство имеет значение HTML-строки, вложенной в CDATA раздел. Это работает, так как Text свойство предназначено ContentProperty для Label класса.

Декорировать текст

Подчеркивание и зачеркивание текстовых украшений можно применять к Label объектам, задав свойству TextDecorations одно или несколько TextDecorations элементов перечисления:

  • None
  • Underline
  • Strikethrough

В следующем примере показано, как задать TextDecorations свойство:

<Label Text="This is underlined text." TextDecorations="Underline"  />
<Label Text="This is text with strikethrough." TextDecorations="Strikethrough" />
<Label Text="This is underlined text with strikethrough." TextDecorations="Underline, Strikethrough" />

Эквивалентный код на C# выглядит так:

Label underlineLabel = new Label { Text = "This is underlined text.", TextDecorations = TextDecorations.Underline };
Label strikethroughLabel = new Label { Text = "This is text with strikethrough.", TextDecorations = TextDecorations.Strikethrough };
Label bothLabel = new Label { Text = "This is underlined text with strikethrough.", TextDecorations = TextDecorations.Underline | TextDecorations.Strikethrough };

На следующем снимках экрана показаны TextDecorations элементы перечисления, примененные к Label экземплярам:

Снимок экрана: метки с текстовыми украшениями.

Примечание.

Украшения текста также можно применять к Span экземплярам. Дополнительные сведения о классе см. в Span разделе "Использование форматированного текста".

Преобразование текста

Объект Label может преобразовать регистр текста, хранящегося в Text свойстве, задав TextTransform свойству значение перечисления TextTransform . Это перечисление имеет четыре значения:

  • None указывает, что текст не будет преобразован.
  • Default указывает, что будет использоваться поведение по умолчанию для платформы. Это значение по умолчанию для свойства TextTransform.
  • Lowercase указывает, что текст будет преобразован в нижний регистр.
  • Uppercase указывает, что текст будет преобразован в верхний регистр.

В следующем примере показано преобразование текста в верхний регистр:

<Label Text="This text will be displayed in uppercase."
       TextTransform="Uppercase" />

Использование форматированного текста

LabelFormattedText предоставляет свойство, которое позволяет презентации текста с несколькими шрифтами и цветами в одном представлении. Свойство FormattedText имеет тип FormattedString, который состоит из одного или нескольких Span экземпляров, заданных через Spans свойство.

Примечание.

Невозможно отобразить HTML-код в Spanформате .

Span определяет следующие свойства:

  • BackgroundColorтип Color, представляющий цвет фона диапазона.
  • CharacterSpacing, тип double, задает интервал между символами в отображаемом тексте.
  • FontAttributes, типа FontAttributes, определяет стиль текста.
  • FontAutoScalingEnabledboolТип , определяет, будет ли текст отражать параметры масштабирования, заданные в операционной системе. Значение по умолчанию этого свойства равно true.
  • FontFamily, тип string, определяет семейство шрифтов.
  • FontSize, тип double, определяет размер шрифта.
  • LineHeightdoubleТип , указывает умножение, которое будет применяться к высоте строки по умолчанию при отображении текста.
  • Styleтип Style, который является стилем, применяемым к диапазону.
  • Text, тип string, определяет текст, отображаемый в виде содержимого Spanобъекта .
  • TextColor, типа Color, определяет цвет отображаемого текста.
  • TextDecorations, тип TextDecorations, указывает текстовые украшения (подчеркивание и начерк), которые могут быть применены.
  • TextTransformTextTransformТип , указывает регистр отображаемого текста.

Эти свойства поддерживаются объектами BindableProperty, то есть эти свойства можно указывать в качестве целевых для привязки и стилизации данных.

Примечание.

Свойство Span.LineHeight не влияет на Windows.

Кроме того, GestureRecognizers свойство можно использовать для определения коллекции распознавателей жестов, которые будут реагировать на жесты.Span

В следующем примере XAML демонстрируется FormattedText свойство, состоящее из трех Span экземпляров:

<Label LineBreakMode="WordWrap">
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Red Bold, " TextColor="Red" FontAttributes="Bold" />
            <Span Text="default, " FontSize="14">
                <Span.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding TapCommand}" />
                </Span.GestureRecognizers>
            </Span>
            <Span Text="italic small." FontAttributes="Italic" FontSize="12" />
        </FormattedString>
    </Label.FormattedText>
</Label>

Эквивалентный код на C# выглядит так:

FormattedString formattedString = new FormattedString ();
formattedString.Spans.Add (new Span { Text = "Red bold, ", TextColor = Colors.Red, FontAttributes = FontAttributes.Bold });

Span span = new Span { Text = "default, " };
span.GestureRecognizers.Add(new TapGestureRecognizer { Command = new Command(async () => await DisplayAlert("Tapped", "This is a tapped Span.", "OK")) });
formattedString.Spans.Add(span);
formattedString.Spans.Add (new Span { Text = "italic small.", FontAttributes = FontAttributes.Italic, FontSize = 14 });

Label label = new Label { FormattedText = formattedString };

На следующем снимках экрана показан результат Label , содержащий три Span объекта:

Снимок экрана: метка, состоящая из трех диапазонов.

A Span также может реагировать на любые жесты, добавленные в коллекцию диапазона GestureRecognizers . Например, вторая TapGestureRecognizer была добавлена во второй Span в приведенных выше примерах. Таким образом, если это Span будет касаться TapGestureRecognizer ответа, выполняя ICommand определенный свойством Command . Дополнительные сведения о распознавании жестов касания см. в статье "Распознавание жеста касания".

Текст, отображаемый Label и Span экземплярами, можно превратить в гиперссылки с помощью следующего подхода:

  1. TextColor Задайте и TextDecoration свойства объекта Label или Span.
  2. TapGestureRecognizerGestureRecognizers Добавьте коллекцию Label или Span, свойство которого Command привязывается к объектуICommand, и свойство которого CommandParameter содержит URL-адрес для открытия.
  3. Определите ICommand , что будет выполняться параметром TapGestureRecognizer.
  4. Напишите код, который будет выполняться объектом ICommand.

В следующем примере показано содержимое Label , содержимое которого задано из нескольких Span объектов:

<Label>
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Alternatively, click " />
            <Span Text="here"
                  TextColor="Blue"
                  TextDecorations="Underline">
                <Span.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding TapCommand}"
                                          CommandParameter="https://learn.microsoft.com/dotnet/maui/" />
                </Span.GestureRecognizers>
            </Span>
            <Span Text=" to view .NET MAUI documentation." />
        </FormattedString>
    </Label.FormattedText>
</Label>

В этом примере первый и третий Span экземпляры содержат текст, а второй Span представляет неприменимую гиперссылку. Он имеет свой цвет текста синим цветом и имеет подчеркивание оформления текста. Это создает внешний вид гиперссылки, как показано на следующем снимке экрана:

Снимок экрана: гиперссылка.

При нажатии гиперссылки он будет отвечать, TapGestureRecognizer выполняя определенный ICommand его Command свойством. Кроме того, URL-адрес, указанный CommandParameter свойством, будет передан ICommand в качестве параметра.

Код для страницы XAML содержит реализацию TapCommand :

using System.Windows.Input;

public partial class MainPage : ContentPage
{
    // Launcher.OpenAsync is provided by Essentials.
    public ICommand TapCommand => new Command<string>(async (url) => await Launcher.OpenAsync(url));

    public MainPage()
    {
        InitializeComponent();
        BindingContext = this;
    }
}

Метод TapCommand выполняется Launcher.OpenAsync , передав TapGestureRecognizer.CommandParameter значение свойства в качестве параметра. Метод Launcher.OpenAsync открывает URL-адрес в веб-браузере. Таким образом, общий эффект заключается в том, что при нажатии гиперссылки на страницу отображается веб-браузер, а URL-адрес, связанный с гиперссылкой, перемещается.

Предыдущий подход к созданию гиперссылки требует написания повторяющегося кода каждый раз, когда требуется гиперссылка в приложении. Однако для создания HyperlinkLabel и HyperlinkSpan классов можно подклассить как классы, так Label и Span распознаватель жестов, а также код форматирования текста, добавленный там.

В следующем примере показан HyperlinkSpan класс:

public class HyperlinkSpan : Span
{
    public static readonly BindableProperty UrlProperty =
        BindableProperty.Create(nameof(Url), typeof(string), typeof(HyperlinkSpan), null);

    public string Url
    {
        get { return (string)GetValue(UrlProperty); }
        set { SetValue(UrlProperty, value); }
    }

    public HyperlinkSpan()
    {
        TextDecorations = TextDecorations.Underline;
        TextColor = Colors.Blue;
        GestureRecognizers.Add(new TapGestureRecognizer
        {
            // Launcher.OpenAsync is provided by Essentials.
            Command = new Command(async () => await Launcher.OpenAsync(Url))
        });
    }
}

Класс HyperlinkSpan определяет свойство, связанное BindablePropertyс ним, а конструктор задает Url внешний вид гиперссылки и TapGestureRecognizer ответ, который будет реагировать при нажатии гиперссылки. HyperlinkSpan При нажатии на TapGestureRecognizer запрос будет выполнен Launcher.OpenAsync метод, чтобы открыть URL-адрес, указанный Url свойством, в веб-браузере.

Класс HyperlinkSpan можно использовать, добавив экземпляр класса в XAML:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:HyperlinkDemo"
             x:Class="HyperlinkDemo.MainPage">
    <StackLayout>
        ...
        <Label>
            <Label.FormattedText>
                <FormattedString>
                    <Span Text="Alternatively, click " />
                    <local:HyperlinkSpan Text="here"
                                         Url="https://learn.microsoft.com/dotnet/" />
                    <Span Text=" to view .NET documentation." />
                </FormattedString>
            </Label.FormattedText>
        </Label>
    </StackLayout>
</ContentPage>