Popisek

Článek
08/30/2024

Uživatelské rozhraní aplikace .NET pro více platforem (.NET MAUI) Label zobrazuje jednořádkový a víceřádkový text. Text zobrazený barvou Label , mezerami a může obsahovat dekorace textu.

Label definuje následující vlastnosti:

CharacterSpacing, typu double, nastaví mezery mezi znaky v zobrazeném textu.
FontAttributes, typu FontAttributes, určuje styl textu.
FontAutoScalingEnabled, typu bool, definuje, zda text bude odrážet předvolby škálování nastavené v operačním systému. Výchozí hodnota této vlastnosti je true.
FontFamily, typu string, definuje rodinu písem.
FontSize, typu double, definuje velikost písma.
FormattedText, typu FormattedString, určuje prezentaci textu s více možnostmi prezentace, jako jsou písma a barvy.
HorizontalTextAlignment, typu TextAlignment, definuje vodorovné zarovnání zobrazeného textu.
LineBreakMode, typu LineBreakMode, určuje, jak se má text zpracovat, když se nevejde na jeden řádek.
LineHeight, typu double, určuje násobitel, který se použije na výchozí výšku řádku při zobrazení textu.
MaxLines, typu intoznačuje maximální počet řádků povolených v sadě Label.
Padding, typu Thickness, určuje odsazení popisku.
Text, typu string, definuje text zobrazený jako obsah popisku.
TextColor, typu Color, definuje barvu zobrazeného textu.
TextDecorations, typu TextDecorations, určuje text dekorace (podtržení a přeškrtnutí), které lze použít.
TextTransform, typu TextTransform, určuje velikost písmen zobrazeného textu.
TextType, typu TextType, určuje, zda Label se má zobrazit prostý text nebo text HTML.
VerticalTextAlignment, typu TextAlignment, definuje svislé zarovnání zobrazeného textu.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že mohou být cíle datových vazeb a stylovány.

Informace o zadávání písem v části LabelPísma.

Vytvoření popisku

Následující příklad ukazuje, jak vytvořit Label:

<Label Text="Hello world" />

Ekvivalentní kód jazyka C# je:

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

Nastavení barev

Popisky lze nastavit tak, aby používaly určitou barvu textu prostřednictvím TextColor vlastnosti.

Následující příklad nastaví barvu Labeltextu :

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

Další informace o barvách naleznete v tématu Barvy.

Nastavení mezer mezi znaky

Pro objekty lze použít Label mezery mezi znaky nastavením CharacterSpacing vlastnosti na double hodnotu:

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

Výsledkem je, že znaky v textu zobrazeném řádkem Label jsou CharacterSpacing oddělené jednotky nezávislé na zařízení.

Přidání nových řádků

Existují dvě hlavní techniky vynucení textu na Label nový řádek z XAML:

Použijte znak odřádkování unicode, který je " ".
Zadejte text pomocí syntaxe elementu vlastnosti.

Následující kód ukazuje příklad obou 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>

V jazyce C# lze text vynutit na nový řádek se znakem \n:

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

Řízení zkrácení a obtékání textu

Obtékání textu a zkrácení lze řídit nastavením LineBreakMode vlastnosti na hodnotu výčtu LineBreakMode :

NoWrap — nezalamuje text, zobrazuje pouze tolik textu, kolik se vejde na jeden řádek. Toto je výchozí hodnota LineBreakMode vlastnosti.
WordWrap — zalamuje text na hranici slova.
CharacterWrap — zalamuje text na nový řádek na hranici znaku.
HeadTruncation — zkrátí hlavu textu a zobrazí konec.
MiddleTruncation — zobrazí začátek a konec textu a uprostřed nahradí tři tečky.
TailTruncation — zobrazuje začátek textu a zkracuje konec.

Zobrazení určitého počtu řádků

Počet řádků zobrazených parametrem Label lze určit nastavením MaxLines vlastnosti na int hodnotu:

Když MaxLines je -1, což je jeho výchozí hodnota, Label respektuje hodnotu LineBreakMode vlastnosti buď zobrazit pouze jeden řádek, případně zkrácený, nebo všechny řádky se všemi texty.
Pokud MaxLines je hodnota 0, Label nezobrazí se.
Pokud MaxLines je 1, výsledek je identický s nastavením LineBreakMode vlastnosti na NoWrap, HeadTruncation, MiddleTruncationnebo TailTruncation. Label Bude však respektovat hodnotu LineBreakMode nemovitosti s ohledem na umístění tří teček, pokud je to možné.
Pokud MaxLines je větší než 1, Label zobrazí se až zadaný počet řádků, přičemž respektuje hodnotu LineBreakMode vlastnosti s ohledem na umístění tří teček, pokud je to možné. Nastavení MaxLines vlastnosti na hodnotu větší než 1 však nemá žádný vliv, pokud je vlastnost nastavena LineBreakMode na NoWrap.

Následující příklad XAML ukazuje nastavení MaxLines vlastnosti na 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" />

Nastavení výšky čáry

Svislou výšku objektu Label lze přizpůsobit nastavením Label.LineHeight vlastnosti na double hodnotu.

Poznámka:

V iOSu změní Label.LineHeight vlastnost výšku řádku textu, která se vejde na jeden řádek, a text, který se zalamuje na více řádků.
V Androidu Label.LineHeight vlastnost změní jenom výšku řádku textu, která se zalamuje na více řádků.
Ve Windows Label.LineHeight změní vlastnost výšku řádku textu, která se zalamuje na více řádků.

Následující příklad ukazuje nastavení LineHeight vlastnosti na 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" />

Následující snímek obrazovky ukazuje výsledek nastavení Label.LineHeight vlastnosti na hodnotu 1.8:

Snímek obrazovky s příkladem výšky čáry Popisky

Zobrazit KÓD HTML

Důležité

Zobrazení HTML v jazyce Label a je omezené na značky HTML, které jsou podporovány základní platformou. Android například podporuje pouze podmnožinu značek HTML a zaměřuje se na základní styly a formátování prvků na úrovni bloku, jako <span> jsou a <p>. Pro složitější vykreslování HTML zvažte použití nebo WebView FormattedText.

Třída Label má TextType vlastnost, která určuje, zda Label má objekt zobrazit prostý text nebo text HTML. Tato vlastnost by měla být nastavena na jeden ze členů výčtu TextType :

Text označuje, že Label se zobrazí prostý text a je výchozí hodnota TextType vlastnosti.
Html označuje, že Label se zobrazí text HTML.

Label Objekty proto mohou zobrazit HTML nastavením TextType vlastnosti na Htmla Text vlastnost na řetězec HTML:

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

V příkladu výše musí být dvojité uvozovky v HTML uvozovky pomocí symbolu \ uvozovky.

V XAML se řetězce HTML můžou stát nečitelným kvůli dalšímu zapouzdření < symbolů a > symbolů:

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

Další možností je lepší čitelnost kódu HTML CDATA v části:

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

V tomto příkladu Text je vlastnost nastavena na řetězec HTML, který je vložen v oddílu CDATA . To funguje, protože Text vlastnost je ContentProperty pro Label třídu.

Ozdobit text

U objektů lze použít Label podtržení a přeškrtnutí textových dekorací nastavením TextDecorations vlastnosti na jeden nebo více TextDecorations členů výčtu:

None
Underline
Strikethrough

Následující příklad ukazuje nastavení TextDecorations vlastnosti:

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

Ekvivalentní kód jazyka C# je:

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

Následující snímek obrazovky ukazuje členy výčtu TextDecorations použité u Label instancí:

Snímek obrazovky s popisky s textovými dekoracemi

Poznámka:

Textové dekorace lze také použít u Span instancí. Další informace o Span třídě naleznete v tématu Použití formátovaného textu.

Transformace textu

A Label může transformovat velikost písmen jeho textu uloženého ve Text vlastnosti nastavením TextTransform vlastnosti na hodnotu výčtu TextTransform . Tento výčet má čtyři hodnoty:

None označuje, že text nebude transformován.
Default označuje, že se použije výchozí chování platformy. Toto je výchozí hodnota TextTransform vlastnosti.
Lowercase označuje, že text bude transformován na malá písmena.
Uppercase označuje, že text bude transformován na velká písmena.

Následující příklad ukazuje transformaci textu na velká písmena:

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

Použití formátovaného textu

LabelFormattedText zveřejňuje vlastnost, která umožňuje prezentaci textu s více písmy a barvami ve stejném zobrazení. Vlastnost FormattedText je typu FormattedString, která se skládá z jedné nebo více Span instancí, nastavena prostřednictvím Spans vlastnosti.

Poznámka:

Není možné zobrazit html v souboru Span.

Span definuje následující vlastnosti:

BackgroundColor, typu Color, který představuje barvu pozadí rozpětí.
CharacterSpacing, typu double, nastaví mezery mezi znaky v zobrazeném textu.
FontAttributes, typu FontAttributes, určuje styl textu.
FontAutoScalingEnabled, typu bool, definuje, zda text bude odrážet předvolby škálování nastavené v operačním systému. Výchozí hodnota této vlastnosti je true.
FontFamily, typu string, definuje rodinu písem.
FontSize, typu double, definuje velikost písma.
LineHeight, typu double, určuje násobitel, který se použije na výchozí výšku řádku při zobrazení textu.
Style, typu Style, což je styl, který se má použít pro rozsah.
Text, typu string, definuje text zobrazený jako obsah Span.
TextColor, typu Color, definuje barvu zobrazeného textu.
TextDecorations, typu TextDecorations, určuje text dekorace (podtržení a přeškrtnutí), které lze použít.
TextTransform, typu TextTransform, určuje velikost písmen zobrazeného textu.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že mohou být cíle datových vazeb a stylovány.

Poznámka:

Vlastnost Span.LineHeight nemá žádný vliv na Windows.

Kromě toho GestureRecognizers lze vlastnost použít k definování kolekce rozpoznávání gest, které budou reagovat na gesta na objektu Span.

Následující příklad XAML ukazuje FormattedText vlastnost, která se skládá ze tří Span instancí:

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

Ekvivalentní kód jazyka C# je:

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

Následující snímek obrazovky ukazuje výsledek Label , který obsahuje tři Span objekty:

Snímek obrazovky s popiskem skládajícím se ze tří rozsahů

Odpověď Span může také reagovat na všechna gesta přidaná do kolekce rozsahu GestureRecognizers . Například TapGestureRecognizer byla přidána do druhé Span z výše uvedených příkladů. Proto při Span klepnutí na TapGestureRecognizer bude reagovat spuštěním ICommand definované vlastnosti Command . Další informace o rozpoznávání gest klepnutím najdete v tématu Rozpoznávání gest klepnutím.

Vytvoření hypertextového odkazu

Text zobrazený v Label instancích a Span text se dá převést na hypertextové odkazy pomocí následujícího přístupu:

TextColor Nastavte a TextDecoration vlastnosti Label nebo Span.
TapGestureRecognizer Přidejte do GestureRecognizers kolekce Label nebo Span, jejíž Command vlastnost vytvoří vazbu k objektu ICommanda jehož CommandParameter vlastnost obsahuje adresu URL pro otevření.
ICommand Definujte, která bude spuštěna .TapGestureRecognizer
Napište kód, který bude proveden .ICommand

Následující příklad ukazuje, jehož Label obsah je nastaven z více Span objektů:

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

V tomto příkladu první a třetí Span instance obsahují text, zatímco druhý Span představuje tappable hypertextový odkaz. Má barvu textu nastavenou na modrou a má podtržené textové dekorace. Tím se vytvoří vzhled hypertextového odkazu, jak je znázorněno na následujícím snímku obrazovky:

Snímek obrazovky s hypertextovým odkazem

Po klepnutí TapGestureRecognizer na hypertextový odkaz odpoví spuštěním ICommand definované vlastnosti Command . Kromě toho se adresa URL zadaná CommandParameter vlastností předá ICommand jako parametr.

Kód na stránce XAML obsahuje implementaci 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;
    }
}

Spustí TapCommand metodu Launcher.OpenAsync a předá TapGestureRecognizer.CommandParameter hodnotu vlastnosti jako parametr. Metoda Launcher.OpenAsync otevře adresu URL ve webovém prohlížeči. Celkovým účinkem je proto, že když se hypertextový odkaz klepne na stránku, zobrazí se webový prohlížeč a adresa URL přidružená k hypertextovému odkazu se přepne na.

Vytvoření opakovaně použitelné třídy hypertextových odkazů

Předchozí přístup k vytvoření hypertextového odkazu vyžaduje psaní opakujícího se kódu při každém vyžadování hypertextového odkazu v aplikaci. Label Span Třídy ale můžou být podtříděny pro vytváření HyperlinkLabel a HyperlinkSpan třídy s kódem pro rozpoznávání gest a formátování textu.

Následující příklad ukazuje HyperlinkSpan třídu:

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

Třída HyperlinkSpan definuje Url vlastnost a přidružené BindablePropertya konstruktor nastaví vzhled hypertextového odkazu a TapGestureRecognizer který bude reagovat při klepnutí na hypertextový odkaz. HyperlinkSpan Při klepnutí TapGestureRecognizer na ni odpoví spuštěním Launcher.OpenAsync metody pro otevření adresy URL určené Url vlastností ve webovém prohlížeči.

Třídu HyperlinkSpan lze využívat přidáním instance třídy do 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>

Sdílet prostřednictvím

Popisek

Vytvoření popisku

Nastavení barev

Nastavení mezer mezi znaky

Přidání nových řádků

Řízení zkrácení a obtékání textu

Zobrazení určitého počtu řádků

Nastavení výšky čáry

Zobrazit KÓD HTML

Ozdobit text

Transformace textu

Použití formátovaného textu

Vytvoření hypertextového odkazu

Vytvoření opakovaně použitelné třídy hypertextových odkazů

Další materiály