Freigeben über

Bezeichnung

  • Artikel

Beispiel durchsuchen.Durchsuchen Sie das Beispiel

Die .NET Multiplatform App UI (.NET MAUI) Label zeigt ein- und mehrzeiligen Text an. Text, der mit Label angezeigt wird, kann eingefärbt, mit Abständen versehen und mit Textdekorationen versehen werden.

Label definiert die folgenden Eigenschaften:

  • CharacterSpacing, vom Typ double, legt den Abstand zwischen den Zeichen im angezeigten Text fest.
  • FontAttributes, vom Typ FontAttributes, bestimmt die Textformatvorlage.
  • FontAutoScalingEnabled, vom Typ bool, definiert, ob der Text Skalierungspräferenzen im Betriebssystem entspricht. Der Standardwert dieser Eigenschaft ist true.
  • FontFamily, vom Typ string, definiert die Schriftartfamilie.
  • FontSize, vom Typ double, definiert den Schriftgrad.
  • FormattedText, vom Typ FormattedString, gibt die Darstellung von Text mit mehreren Darstellungsoptionen wie Schriftarten und Farben an.
  • HorizontalTextAlignment, vom Typ TextAlignment, definiert die horizontale Ausrichtung des angezeigten Textes.
  • LineBreakMode, vom Typ LineBreakMode, bestimmt, wie Text behandelt werden soll, wenn er nicht in eine Zeile passt.
  • LineHeight vom Typ double, gibt den Multiplikator an, der bei der Anzeige von Text auf die Standardzeilenhöhe anzuwenden ist.
  • MaxLines, vom Typ int, gibt die maximale Anzahl der Zeilen an, die im Label zulässig sind.
  • Padding, vom Typ Thickness, bestimmt die Füllung des Etiketts.
  • Text, vom Typ string, definiert den Text, der als Inhalt des Etiketts angezeigt wird.
  • TextColor, vom Typ Color, definiert die Farbe des angezeigten Texts.
  • TextDecorations vom Typ TextDecorations, definiert welche Textdekorationen (unterstrichen und durchgestrichen) angewendet werden können.
  • TextTransform, vom Typ TextTransform, gibt die Schreibweise des angezeigten Textes an.
  • TextType, vom Typ TextType, bestimmt, ob Label reinen Text oder HTML-Text anzeigen soll.
  • VerticalTextAlignment, vom Typ TextAlignment, legt die vertikale Ausrichtung des angezeigten Textes fest.

Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.

Für Informationen über die Angabe von Schriftarten auf einem Label, siehe Schriftarten.

Erstellen einer Bezeichnung

Im folgenden Beispiel wird gezeigt, wie ein Label erstellt wird.

<Label Text="Hello world" />

Der entsprechende C#-Code lautet:

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

Festlegen von Farben

Beschriftungen können für die Verwendung einer bestimmten Textfarbe über die TextColor Eigenschaft festgelegt werden.

Im folgenden Beispiel wird der Inhalt eines Label-Steuerelements festgelegt:

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

Für weitere Informationen über Farben, siehe Farben.

Zeichenabstand

Zeichenabstände können auf Label-Objekte angewendet werden, indem die Eigenschaft CharacterSpacing auf einen double-Wert gesetzt wird:

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

Dies hat zur Folge, dass die Zeichen im Text, der von der Label angezeigt wird, einen Abstand von CharacterSpacing geräteunabhängigen Einheiten aufweisen.

Eine neue Position hinzufügen.

Es gibt zwei Haupttechniken, um Text in einem Label in eine neue Zeile zu zwingen, und zwar von XAML aus:

  1. Verwenden Sie das Unicode-Zeilenvorschubzeichen, das „ “ lautet.
  2. Geben Sie Ihren Text mit der Syntax Eigenschaftselement an.

Im folgenden Code wird ein Beispiel hierfür dargestellt:

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

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

In C# kann Text in eine neue Zeile mit dem Zeichen „\n“ erzwungen werden:

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

Steuern des Abschneidens und Umbruchs von Text

Textumbruch und -abschneidung können durch die Einstellung der Eigenschaft LineBreakMode auf einen Wert der Enumeration LineBreakMode gesteuert werden:

  • NoWrap – bricht den Text nicht um und zeigt nur so viel Text an, wie in eine Zeile passt. Dies ist der Standardwert der Eigenschaft LineBreakMode.
  • WordWrap – bricht Text an der Wortgrenze um.
  • CharacterWrap – bricht Text an einer Zeichengrenze in eine neue Zeile um.
  • HeadTruncation – schneidet den Kopf des Textes ab und zeigt das Ende an.
  • MiddleTruncation – zeigt den Anfang und das Ende des Texts an, wobei die Mitte durch eine Auslassungspunkte ersetzt wird.
  • TailTruncation – zeigt den Anfang des Texts an, wobei das Ende abgeschnitten wird.

Anzeigen einer bestimmten Anzahl von Zeilen

Die Anzahl der Zeilen, die von einer Label angezeigt werden, kann durch Festlegen der MaxLines-Eigenschaft auf einen int-Wert angegeben werden:

  • Wenn MaxLines den Standardwert -1 hat, berücksichtigt Label den Wert der Eigenschaft LineBreakMode, um entweder nur eine Zeile, möglicherweise abgeschnitten, oder alle Zeilen mit dem gesamten Text anzuzeigen.
  • Wenn MaxLines gleich 0 ist, wird Label nicht angezeigt.
  • Wenn MaxLines gleich 1 ist, ist das Ergebnis identisch mit der Einstellung der Eigenschaft LineBreakMode auf NoWrap, HeadTruncation, MiddleTruncation oder TailTruncation. Die Label berücksichtigt jedoch den Wert der LineBreakMode-Eigenschaft im Hinblick auf die Platzierung einer Ellipse, falls zutreffend.
  • Wenn MaxLines größer als 1 ist, wird Label bis zur angegebenen Zeilenzahl angezeigt, wobei der Wert der Eigenschaft LineBreakMode in Bezug auf die Platzierung einer Ellipse, falls zutreffend, beachtet wird. Die Einstellung der Eigenschaft MaxLines auf einen Wert größer als 1 hat jedoch keine Auswirkungen, wenn die Eigenschaft LineBreakMode auf NoWrap eingestellt ist.

Das folgende XAML-Beispiel veranschaulicht das Festlegen der Eigenschaft MaxLines auf einem 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" />

Zeilenhöhe festlegen

Die vertikale Höhe eines Label kann angepasst werden, indem die Eigenschaft Label.LineHeight auf einen double-Wert gesetzt wird.

Hinweis

  • Unter iOS ändert die Label.LineHeight-Eigenschaft die Zeilenhöhe von Text, der in eine einzelne Zeile passt, und Text, der in mehrere Zeilen umgebrochen wird.
  • Unter Android ändert die Label.LineHeight-Eigenschaft nur die Zeilenhöhe von Text, der in mehrere Zeilen umgebrochen wird.
  • Unter Windows ändert die Label.LineHeight-Eigenschaft die Zeilenhöhe von Text, der in mehrere Zeilen umgebrochen wird.

Das folgende Beispiel zeigt, wie die Eigenschaft LineHeight auf ein Label gesetzt wird:

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

Der folgende Screenshot zeigt das Ergebnis der Einstellung der Eigenschaft Label.LineHeight auf 1,8:

Screenshot des Beispiels für die Zeilenhöhe von Bezeichnungen

Anzeigen von HTML

Wichtig

Die Anzeige von HTML in einem Label ist auf die HTML-Tags beschränkt, die von der zugrunde liegenden Plattform unterstützt werden. Android unterstützt z. B. nur eine Teilmenge der HTML-Tags, die sich auf grundlegende Stile und Formatierungen für Elemente auf Blockebene wie <span> und <p> konzentrieren. Für komplexeres HTML-Rendering sollten Sie WebView oder FormattedText verwenden.

Die Label-Klasse hat eine TextType-Eigenschaft, die bestimmt, ob das Label-Objekt reinen Text oder HTML-Text anzeigen soll. Diese Eigenschaft sollte auf eines der Members der Enumeration TextType gesetzt werden:

  • Text gibt an, dass Label reinen Text anzeigt, und ist der Standardwert der Eigenschaft TextType.
  • Html gibt an, dass der Label HTML-Text anzeigt.

Daher können Label-Objekte HTML anzeigen, indem die TextType-Eigenschaft auf Html und die Text-Eigenschaft auf einen HTML-String gesetzt wird:

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

Im obigen Beispiel müssen die doppelten Anführungszeichen in der HTML-Datei mit dem Symbol \ maskiert werden.

In XAML können HTML-Zeichenfolgen unlesbar werden, weil die Symbole < und > zusätzlich escaped werden:

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

Alternativ kann der HTML-Code zur besseren Lesbarkeit in einen CDATA-Abschnitt eingefügt werden:

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

In diesem Beispiel wird die Eigenschaft Text auf die HTML-Zeichenkette gesetzt, die im Abschnitt CDATA eingefügt ist. Dies funktioniert, da die Text-Eigenschaft für ContentProperty die Label-Klasse ist.

Schmücken von Text

Unterstrichene und durchgestrichene Textdekorationen können auf Label-Objekte angewendet werden, indem die TextDecorations-Eigenschaft auf ein oder mehrere TextDecorations-Enumerationselemente gesetzt wird:

  • None
  • Underline
  • Strikethrough

Das folgende Beispiel zeigt die Einstellung der Eigenschaft 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" />

Der entsprechende C#-Code lautet:

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

Der folgende Screenshot zeigt die TextDecorations Enumerationselemente, die auf Label Instanzen angewendet werden:

Screenshot von Bezeichnungen mit Textdekorationen

Hinweis

Text-Dekorationen können auch auf Span-Instanzen angewendet werden. Weitere Informationen über die Klasse Span finden Sie unter Formatierten Text verwenden.

Transformieren von Text

Ein Label kann die Umhüllung seines in der Eigenschaft Text gespeicherten Textes ändern, indem es die Eigenschaft TextTransform auf einen Wert der Enumeration TextTransform setzt. Diese Enumeration weist 4 Werte auf:

  • None gibt an, dass der Text nicht transformiert wird.
  • Default gibt an, dass das plattformspezifische Standardverhalten verwendet wird. Dies ist der Standardwert der Eigenschaft TextTransform.
  • Lowercase gibt an, dass der Text in Kleinbuchstaben umgewandelt wird.
  • Uppercase gibt an, dass der Text in Großbuchstaben umgewandelt wird.

Das folgende Beispiel zeigt das Transformieren von Text in Großbuchstaben:

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

Formatierten Text verwenden

Label stellt eine FormattedText-Eigenschaft zur Verfügung, die die Darstellung von Text mit mehreren Schriftarten und Farben in derselben Ansicht ermöglicht. Die FormattedText-Eigenschaft ist vom Typ FormattedString, der eine oder mehrere Span-Instanzen umfasst, die über die Spans-Eigenschaft eingestellt werden.

Hinweis

Es ist nicht möglich, HTML in einem Span anzuzeigen.

Span definiert die folgenden Eigenschaften:

  • BackgroundColor, vom Typ Color, der die Farbe des Hintergrunds der Spanne darstellt.
  • CharacterSpacing, vom Typ double, legt den Abstand zwischen den Zeichen im angezeigten Text fest.
  • FontAttributes, vom Typ FontAttributes, bestimmt die Textformatvorlage.
  • FontAutoScalingEnabled, vom Typ bool, definiert, ob der Text Skalierungspräferenzen im Betriebssystem entspricht. Der Standardwert dieser Eigenschaft ist true.
  • FontFamily, vom Typ string, definiert die Schriftartfamilie.
  • FontSize, vom Typ double, definiert den Schriftgrad.
  • LineHeight vom Typ double, gibt den Multiplikator an, der bei der Anzeige von Text auf die Standardzeilenhöhe anzuwenden ist.
  • Style, vom Typ Style, das die Formatvorlage ist, die auf die Spanne angewendet werden soll.
  • Text, vom Typ string, definiert den Text, der als Inhalt von Span angezeigt wird.
  • TextColor, vom Typ Color, definiert die Farbe des angezeigten Texts.
  • TextDecorations vom Typ TextDecorations, definiert welche Textdekorationen (unterstrichen und durchgestrichen) angewendet werden können.
  • TextTransform, vom Typ TextTransform, gibt die Schreibweise des angezeigten Textes an.

Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.

Hinweis

Die Eigenschaft Span.LineHeight hat unter Windows keine Wirkung.

Darüber hinaus kann die Eigenschaft GestureRecognizers verwendet werden, um eine Sammlung von Gestenerkennungen zu definieren, die auf Gesten auf dem Span reagieren.

Im folgenden XAML-Beispiel wird eine FormattedText-Eigenschaft veranschaulicht, die aus drei Span-Instanzen besteht:

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

Der entsprechende C#-Code lautet:

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

Der folgende Screenshot zeigt die resultierende Label, die 3 Span-Objekte enthält:

Screenshot einer Bezeichnung, die aus drei span-Elementen besteht

Ein Span kann auch auf alle Gesten reagieren, die der GestureRecognizers-Sammlung des Bereichs hinzugefügt werden. Beispielsweise wurde der zweiten Span in den obigen Beispielen eine TapGestureRecognizer hinzugefügt. Wenn dieses Span angetippt wird, reagiert das TapGestureRecognizer mit der Ausführung des ICommand, das durch die Eigenschaft Command definiert ist. Weitere Informationen zur Erkennung von Tippgesten finden Sie unter Erkennen einer Tippgeste.

Der von den Instanzen Label und Span angezeigte Text kann mit der folgenden Methode in Hyperlinks umgewandelt werden:

  1. Stellen Sie die Eigenschaften TextColor und TextDecoration des Label oder Span ein.
  2. Fügen Sie der GestureRecognizers-Sammlung von Label oder Span ein TapGestureRecognizer hinzu, dessen Command-Eigenschaft an ein ICommand gebunden ist und dessen CommandParameter-Eigenschaft die zu öffnende URL enthält.
  3. Definieren Sie die ICommand, die von der TapGestureRecognizer ausgeführt wird.
  4. Schreiben Sie den Code, der von der ICommand ausgeführt werden soll.

Das folgende Beispiel zeigt ein Label, dessen Inhalt aus mehreren Span-Objekten zusammengesetzt ist:

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

In diesem Beispiel enthalten die erste und dritte Span-Instanz Text, während die zweite Span-Instanz einen antippbaren Hyperlink darstellt. Es hat seine Textfarbe auf Blau festgelegt und hat eine Unterstreichungstext-Dekoration. Dadurch wird die Darstellung eines Links erstellt, wie im folgenden Screenshot gezeigt:

Screenshot eines Links

Wenn der Hyperlink angetippt wird, reagiert das TapGestureRecognizer mit der Ausführung des ICommand, das durch seine Command-Eigenschaft definiert ist. Darüber hinaus wird die durch die Eigenschaft CommandParameter angegebene URL als Parameter an ICommand übergeben.

Der Code-Behind für die XAML-Seite enthält die TapCommand-Implementierung:

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

Die TapCommand führt die Launcher.OpenAsync-Methode aus und übergibt den TapGestureRecognizer.CommandParameter-Eigenschaftswert als Parameter. Die Launcher.OpenAsync-Methode öffnet die URL in einem Webbrowser. Der Gesamteffekt besteht daher darin, dass beim Tippen auf den Link auf der Seite ein Webbrowser angezeigt wird und zu der dem Link zugeordneten URL navigiert wird.

Der vorherige Ansatz zum Erstellen eines Links erfordert jedes Mal, wenn Sie einen Link in Ihrer App benötigen, wiederholten Code zu schreiben. Die Klassen Label und Span können jedoch in Unterklassen unterteilt werden, um die Klassen HyperlinkLabel und HyperlinkSpan zu erstellen, zu denen der Code für die Gestenerkennung und die Textformatierung hinzugefügt wird.

Im folgenden Beispiel wird die HyperlinkSpan-Klasse gezeigt.

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

Die HyperlinkSpan-Klasse definiert eine Url-Eigenschaft und ein zugehöriges BindableProperty, und der Konstruktor legt das Aussehen des Hyperlinks und das TapGestureRecognizer fest, das reagiert, wenn der Hyperlink angetippt wird. Wenn ein HyperlinkSpan angetippt wird, reagiert das TapGestureRecognizer, indem es die Launcher.OpenAsync-Methode ausführt, um die durch die Url-Eigenschaft angegebene URL in einem Webbrowser zu öffnen.

Die Klasse HyperlinkSpan kann verwendet werden, indem eine Instanz der Klasse zur XAML hinzugefügt wird:

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