Etykieta

Artykuł
08/30/2024

Przeglądaj przykład. Przeglądanie przykładu

Interfejs użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) Label wyświetla tekst jednowierszowy i wielowierszowy. Tekst wyświetlany przez element Label może być kolorowy, rozmieszczony i może mieć dekoracje tekstowe.

Label definiuje następujące właściwości:

CharacterSpacing, typu double, ustawia odstępy między znakami w wyświetlonym tekście.
FontAttributes, typu FontAttributes, określa styl tekstu.
FontAutoScalingEnabled, typu bool, określa, czy tekst będzie odzwierciedlać preferencje skalowania ustawione w systemie operacyjnym. Wartość domyślna tej właściwości to true.
FontFamily, typu string, definiuje rodzinę czcionek.
FontSize, typu double, definiuje rozmiar czcionki.
FormattedText, typu FormattedString, określa prezentację tekstu z wieloma opcjami prezentacji, takimi jak czcionki i kolory.
HorizontalTextAlignment, typu TextAlignment, definiuje wyrównanie w poziomie wyświetlanego tekstu.
LineBreakMode, typu LineBreakMode, określa sposób obsługi tekstu, gdy nie można go zmieścić w jednym wierszu.
LineHeight, typu double, określa mnożnik, który ma być stosowany do domyślnej wysokości wiersza podczas wyświetlania tekstu.
MaxLines, typu int, wskazuje maksymalną liczbę wierszy dozwolonych w obiekcie Label.
Padding, typu Thickness, określa dopełnienie etykiety.
Text, typu string, definiuje tekst wyświetlany jako zawartość etykiety.
TextColor, typu Color, definiuje kolor wyświetlanego tekstu.
TextDecorations, typu TextDecorations, określa dekoracje tekstu (podkreślenie i przekreślenie), które można zastosować.
TextTransform, typu TextTransform, określa wielkość liter wyświetlanego tekstu.
TextType, typu TextType, określa, czy Label powinien być wyświetlany zwykły tekst, czy tekst HTML.
VerticalTextAlignment, typu TextAlignment, definiuje wyrównanie w pionie wyświetlanego tekstu.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Aby uzyskać informacje na temat określania czcionek w obiekcie Label, zobacz Czcionki.

Tworzenie etykiety

W poniższym przykładzie pokazano, jak utworzyć element Label:

<Label Text="Hello world" />

Równoważny kod języka C# to:

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

Ustawianie kolorów

Etykiety można ustawić tak, aby używały określonego koloru tekstu za pośrednictwem TextColor właściwości .

W poniższym przykładzie ustawiono kolor tekstu elementu Label:

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

Aby uzyskać więcej informacji na temat kolorów, zobacz Kolory.

Ustawianie odstępów między znakami

Odstępy między znakami można zastosować do Label obiektów, ustawiając CharacterSpacing właściwość na double wartość:

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

Wynikiem jest to, że znaki w tekście wyświetlanym przez Label element są oddzielone CharacterSpacing od siebie jednostkami niezależnymi od urządzenia.

Dodawanie nowych wierszy

Istnieją dwie główne techniki wymuszania tekstu w Label nowym wierszu z kodu XAML:

Użyj znaku kanału informacyjnego unicode o nazwie " ".
Określ tekst przy użyciu składni elementu właściwości.

Poniższy kod przedstawia przykład obu technik:

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

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

W języku C#tekst można wymusić na nowym wierszu z znakiem "\n":

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

Obcinanie tekstu sterującego i zawijanie

Zawijanie tekstu i obcinanie można kontrolować przez ustawienie LineBreakMode właściwości na wartość LineBreakMode wyliczenia:

NoWrap — nie opakowuje tekstu, wyświetlając tylko tyle tekstu, co można zmieścić w jednym wierszu. Jest to wartość domyślna LineBreakMode właściwości.
WordWrap — opakowuje tekst na granicy wyrazu.
CharacterWrap — opakowuje tekst w nowym wierszu na granicy znaku.
HeadTruncation — obcina głowę tekstu, pokazując koniec.
MiddleTruncation — wyświetla początek i koniec tekstu, a środkowy zamień na wielokropek.
TailTruncation — pokazuje początek tekstu, obcinając koniec.

Wyświetlanie określonej liczby wierszy

Liczbę wierszy wyświetlanych przez element Label można określić, ustawiając MaxLines właściwość na int wartość:

Gdy MaxLines wartość to -1, która jest jego wartością domyślną, Label wartość LineBreakMode właściwości uwzględnia tylko jeden wiersz, prawdopodobnie obcięty lub wszystkie wiersze ze wszystkim tekstem.
Wartość MaxLines 0 Label nie jest wyświetlana.
Gdy MaxLines wartość to 1, wynik jest identyczny z ustawieniem LineBreakMode właściwości na NoWrap, HeadTruncation, MiddleTruncationlub TailTruncation. Jednakże Label , będzie uwzględniać wartość LineBreakMode właściwości w odniesieniu do umieszczenia wielokropka, jeśli ma to zastosowanie.
Gdy MaxLines wartość jest większa niż 1, Label zostanie wyświetlona maksymalnie określona liczba wierszy, uwzględniając wartość LineBreakMode właściwości w odniesieniu do umieszczenia wielokropka, jeśli ma to zastosowanie. Jednak ustawienie MaxLines właściwości na wartość większą niż 1 nie ma wpływu, jeśli LineBreakMode właściwość jest ustawiona na NoWrapwartość .

W poniższym przykładzie XAML pokazano, jak ustawić MaxLines właściwość na obiekcie 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" />

Ustawianie wysokości linii

Wysokość pionowa elementu Label można dostosować, ustawiając Label.LineHeight właściwość na double wartość.

Uwaga

W systemie iOS Label.LineHeight właściwość zmienia wysokość wiersza tekstu, który mieści się w jednym wierszu, i tekst, który opakowuje się w wiele wierszy.
W systemie Android Label.LineHeight właściwość zmienia tylko wysokość wiersza tekstu zawijanego na wiele wierszy.
W systemie Windows Label.LineHeight właściwość zmienia wysokość wiersza tekstu, który opakowuje się w wiele wierszy.

W poniższym przykładzie pokazano, jak ustawić LineHeight właściwość w obiekcie 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" />

Poniższy zrzut ekranu przedstawia wynik ustawienia Label.LineHeight właściwości na 1.8:

Zrzut ekranu przedstawiający przykład wysokości wiersza etykiety.

Wyświetlanie kodu HTML

Ważne

Wyświetlanie kodu HTML w obiekcie Label jest ograniczone do tagów HTML obsługiwanych przez podstawową platformę. Na przykład system Android obsługuje tylko podzbiór tagów HTML, koncentrując się na podstawowym stylu i formatowaniu elementów na poziomie bloku, takich jak <span> i <p>. Aby uzyskać bardziej złożone renderowanie HTML, rozważ użycie elementu WebView lub FormattedText.

Klasa Label ma TextType właściwość, która określa, czy Label obiekt powinien wyświetlać zwykły tekst, czy tekst HTML. Ta właściwość powinna być ustawiona na jeden z elementów członkowskich TextType wyliczenia:

Text wskazuje, że Label będzie wyświetlany zwykły tekst i jest wartością domyślną TextType właściwości.
Html wskazuje, że Label zostanie wyświetlony tekst HTML.

W związku z tym obiekty mogą wyświetlać kod HTML, Label ustawiając TextType właściwość na Html, a Text właściwość na ciąg HTML:

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

W powyższym przykładzie znaki podwójnego cudzysłowu w kodzie HTML muszą zostać uniknięta przy użyciu symbolu \ .

W języku XAML ciągi HTML mogą stać się nieczytelne z powodu dodatkowego ucieczki symboli < i > :

<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"  />

Alternatywnie w celu zapewnienia większej CDATA czytelności kod HTML może być podkreśnięty w sekcji:

<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>

W tym przykładzie Text właściwość jest ustawiona na ciąg HTML, który jest wstawiony w CDATA sekcji. Działa to, ponieważ Text właściwość jest właściwością ContentProperty Label klasy .

Dekorowanie tekstu

Do obiektów można zastosować Label dekoracje tekstu podkreślenia i przekreślenia, ustawiając TextDecorations właściwość na co najmniej jeden TextDecorations składowy wyliczenia:

None
Underline
Strikethrough

W poniższym przykładzie pokazano ustawienie TextDecorations właściwości :

<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" />

Równoważny kod języka C# to:

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 };

Poniższy zrzut ekranu przedstawia TextDecorations członków wyliczania zastosowanych do Label wystąpień:

Zrzut ekranu przedstawiający etykiety z dekoracjami tekstowymi.

Uwaga

Dekoracje tekstu można również stosować do Span wystąpień. Aby uzyskać więcej informacji na temat Span klasy, zobacz Use formatted text (Używanie sformatowanego tekstu).

Przekształcanie tekstu

Obiekt Label może przekształcić wielkość liter tekstu przechowywaną we Text właściwości, ustawiając TextTransform właściwość na wartość TextTransform wyliczenia. Ta wyliczenie ma cztery wartości:

None wskazuje, że tekst nie zostanie przekształcony.
Default wskazuje, że będzie używane domyślne zachowanie platformy. Jest to wartość domyślna TextTransform właściwości.
Lowercase wskazuje, że tekst zostanie przekształcony w małe litery.
Uppercase wskazuje, że tekst zostanie przekształcony na wielkie litery.

W poniższym przykładzie pokazano przekształcanie tekstu na wielkie litery:

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

Używanie sformatowanego tekstu

Label Uwidacznia właściwość umożliwiającą prezentację FormattedText tekstu z wieloma czcionkami i kolorami w tym samym widoku. Właściwość FormattedText jest typu FormattedString, który składa się z co najmniej jednego Span wystąpienia ustawionego Spans za pośrednictwem właściwości .

Uwaga

Nie można wyświetlić kodu HTML w pliku Span.

Span definiuje następujące właściwości:

BackgroundColor, typu Color, który reprezentuje kolor tła zakresu.
CharacterSpacing, typu double, ustawia odstępy między znakami w wyświetlonym tekście.
FontAttributes, typu FontAttributes, określa styl tekstu.
FontAutoScalingEnabled, typu bool, określa, czy tekst będzie odzwierciedlać preferencje skalowania ustawione w systemie operacyjnym. Wartość domyślna tej właściwości to true.
FontFamily, typu string, definiuje rodzinę czcionek.
FontSize, typu double, definiuje rozmiar czcionki.
LineHeight, typu double, określa mnożnik, który ma być stosowany do domyślnej wysokości wiersza podczas wyświetlania tekstu.
Style, typu Style, który jest stylem, który ma być stosowany do zakresu.
Text, typu string, definiuje tekst wyświetlany jako zawartość .Span
TextColor, typu Color, definiuje kolor wyświetlanego tekstu.
TextDecorations, typu TextDecorations, określa dekoracje tekstu (podkreślenie i przekreślenie), które można zastosować.
TextTransform, typu TextTransform, określa wielkość liter wyświetlanego tekstu.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Uwaga

Właściwość Span.LineHeight nie ma wpływu na system Windows.

Ponadto GestureRecognizers właściwość może służyć do definiowania kolekcji aparatów rozpoznawania gestów, które będą reagować na gesty w obiekcie Span.

W poniższym przykładzie XAML pokazano właściwość składającą FormattedText się z trzech Span wystąpień:

<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>

Równoważny kod języka C# to:

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 };

Poniższy zrzut ekranu przedstawia wynikowy Label obiekt zawierający trzy Span obiekty:

Zrzut ekranu przedstawiający etykietę składającą się z trzech zakresów.

Obiekt Span może również reagować na wszelkie gesty dodawane do kolekcji span.GestureRecognizers Na przykład element TapGestureRecognizer został dodany do drugiego Span w powyższych przykładach. W związku z tym, gdy zostanie ona Span naciśnięta, TapGestureRecognizer funkcja będzie odpowiadać przez wykonanie zdefiniowanej ICommand Command przez właściwość . Aby uzyskać więcej informacji na temat rozpoznawania gestów naciśnięcia, zobacz Rozpoznawanie gestu naciśnięcia.

Tworzenie hiperłącza

Tekst wyświetlany przez Label wystąpienia i Span można przekształcić w hiperlinki przy użyciu następującego podejścia:

TextColor Ustaw właściwości i TextDecoration obiektu Label lub Span.
Dodaj obiekt TapGestureRecognizer do kolekcji Label obiektu lub Span, którego Command właściwość wiąże się z właściwością ICommand, i której CommandParameter właściwość zawiera adres GestureRecognizers URL do otwarcia.
Zdefiniuj element ICommand , który zostanie wykonany przez element TapGestureRecognizer.
Napisz kod, który zostanie wykonany przez element ICommand.

W poniższym przykładzie pokazano Label , którego zawartość jest ustawiana z wielu Span obiektów:

<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>

W tym przykładzie pierwsze i trzecie Span wystąpienia zawierają tekst, a drugi Span reprezentuje hiperlink z możliwością zastosowania. Ma kolor tekstu ustawiony na niebieski i ma podkreślenie dekoracji tekstu. Spowoduje to utworzenie hiperlinku, jak pokazano na poniższym zrzucie ekranu:

Zrzut ekranu przedstawiający hiperlink.

Gdy hiperlink zostanie naciśnięty, TapGestureRecognizer obiekt odpowie, wykonując definicję zdefiniowaną ICommand przez jej Command właściwość. Ponadto adres URL określony przez CommandParameter właściwość zostanie przekazany jako ICommand parametr.

Kod związany ze stroną XAML zawiera implementację 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;
    }
}

Metoda TapCommand wykonuje metodę Launcher.OpenAsync , przekazując TapGestureRecognizer.CommandParameter wartość właściwości jako parametr. Metoda Launcher.OpenAsync otwiera adres URL w przeglądarce internetowej. W związku z tym ogólny efekt polega na tym, że po naciśnięciu hiperłącza na stronie zostanie wyświetlona przeglądarka internetowa i zostanie wyświetlony adres URL skojarzony z hiperlinkiem.

Tworzenie klasy hiperlinków wielokrotnego użytku

Poprzednie podejście do tworzenia hiperlinku wymaga pisania powtarzalnego kodu za każdym razem, gdy potrzebujesz hiperlinku w aplikacji. Jednak zarówno klasy, jak Label i Span mogą być podklasowane do tworzenia HyperlinkLabel i HyperlinkSpan klas, z dodanym tam kodem rozpoznawania gestów i formatowania tekstu.

W poniższym przykładzie przedstawiono klasę 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))
        });
    }
}

Klasa HyperlinkSpan definiuje Url właściwość i skojarzona BindablePropertywłaściwość , a konstruktor ustawia wygląd hiperłącza, a TapGestureRecognizer obiekt, który będzie odpowiadać po naciśnięciu hiperlinku. Gdy element HyperlinkSpan zostanie naciśnięty, TapGestureRecognizer obiekt odpowie, wykonując Launcher.OpenAsync metodę w celu otwarcia adresu URL określonego Url przez właściwość w przeglądarce internetowej.

Klasę HyperlinkSpan można używać przez dodanie wystąpienia klasy do kodu 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>

Udostępnij za pośrednictwem

Etykieta

Tworzenie etykiety

Ustawianie kolorów

Ustawianie odstępów między znakami

Dodawanie nowych wierszy

Obcinanie tekstu sterującego i zawijanie

Wyświetlanie określonej liczby wierszy

Ustawianie wysokości linii

Wyświetlanie kodu HTML

Dekorowanie tekstu

Przekształcanie tekstu

Używanie sformatowanego tekstu

Tworzenie hiperłącza

Tworzenie klasy hiperlinków wielokrotnego użytku

Dodatkowe zasoby