Xamarin.Forms: Tutorial zu Bezeichnungen
Bevor Sie mit diesem Tutorial fortfahren, sollten Sie zunächst Folgendes erfolgreich abgeschlossen haben:
- Schnellstartanleitung Erstellen Ihrer ersten Xamarin.Forms-App
- Das Tutorial zu StackLayout
In diesem Tutorial lernen Sie, wie die folgenden Aufgaben ausgeführt werden:
- Erstellen eines Xamarin.Forms
Label
-Elements in XAML - Ändern der Darstellung eines
Label
-Elements - Darstellen von Text in einem einzelnen
Label
-Element, das über mehrere Formate verfügt
Sie verwenden Visual Studio 2019 oder Visual Studio für Mac, um eine einfache Anwendung zu erstellen, die zeigt, wie Sie Text einer Label
anzeigen können. Die folgenden Screenshots zeigen die finale Anwendung:
Außerdem verwenden Sie XAML Hot Reload für Xamarin.Forms, um Änderungen an der Benutzeroberfläche anzuzeigen, ohne die Anwendung neu zu erstellen.
Erstellen einer Bezeichnung
Für dieses Tutorial benötigen Sie das neueste Release von Visual Studio 2019 und die Workload Mobile-Entwicklung mit .NET. Außerdem müssen Sie über einen gekoppelten Mac verfügen, um die Tutorial-App unter iOS zu kompilieren. Informationen zur Installation der Xamarin-Plattform finden Sie unter Installieren von Xamarin. Informationen zum Verbinden von Visual Studio 2019 mit einem Mac-Buildhost finden Sie unter Durchführen einer Kopplung mit einem Mac für die Xamarin.iOS-Entwicklung.
Starten Sie Visual Studio, und erstellen Sie eine neue leere Xamarin.Forms-App namens LabelTutorial.
Wichtig
Für die C#- und XAML-Codeausschnitte in diesem Tutorial ist es erforderlich, dass die Projektmappe LabelTutorial genannt wird. Die Verwendung eines anderen Namens führt zu Buildfehlern, wenn Sie Code aus diesem Tutorial in die Projektmappe kopieren.
Weitere Informationen zur .NET Standard-Bibliothek, die erstellt wird, finden Sie unter Struktur einer Xamarin.Forms-Anwendung im Artikel Xamarin.Forms: Ausführliche Erläuterungen zum Schnellstart.
Doppelklicken Sie im Projektmappen-Explorer im Projekt LabelTutorial auf die Datei MainPage.xaml, um sie zu öffnen. Entfernen Sie dann in MainPage.xaml den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden:
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="LabelTutorial.MainPage"> <StackLayout Margin="20,35,20,20"> <Label Text="Welcome to Xamarin.Forms!" HorizontalOptions="Center" /> </StackLayout> </ContentPage>
In diesem Codeausschnitt wird die Benutzeroberfläche deklarativ für die Seite definiert, die ein
Label
-Element in einemStackLayout
enthält. Mit derLabel.Text
-Eigenschaft wird festgelegt, dass der Text angezeigt wird. Mit derHorizontalOptions
-Eigenschaft wird angegeben, dass derLabel
horizontal und zentriert ausgerichtet wird.Klicken Sie in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten:
Ändern der Darstellung
Ändern Sie in MainPage.xaml die
Label
-Deklaration, um die visuelle Darstellung zu ändern:<Label Text="Welcome to Xamarin.Forms!" TextColor="Blue" FontAttributes="Italic" FontSize="22" TextDecorations="Underline" HorizontalOptions="Center" />
Dieser Code legt Eigenschaften fest, die die visuelle Darstellung von
Label
ändern. DieTextColor
-Eigenschaft legt die Farbe desLabel
-Textes fest. DieFontAttributes
-Eigenschaft setzt die Schriftart für die Bezeichnung auf „Kursiv“, und dieFontSize
-Eigenschaft legt den Schriftgrad fest. Zudem wird dasLabel
-Element unterstrichen, indem dessenTextDecorations
-Eigenschaft festgelegt wird, und es wird horizontal zentriert, indem dieHorizontalOptions
-Eigenschaft aufCenter
festgelegt wird.Wenn die Anwendung noch ausgeführt wird, speichern Sie die Änderungen an der Datei, und die Benutzeroberfläche der Anwendung wird in Ihrem Simulator oder Emulator automatisch aktualisiert. Klicken Sie andernfalls in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten. Beachten Sie, wie sich die Darstellung von
Label
geändert hat:Weitere Informationen zum Festlegen der Darstellung von
Label
finden Sie im Leitfaden zu Xamarin.Forms-Bezeichnungen.
Präsentieren von formatiertem Text
Ändern Sie in der Datei MainPage.xaml die
Label
-Deklaration, um Text mit mehreren Formaten in einem einzelnenLabel
-Element darzustellen.<Label TextColor="Gray" FontSize="Medium"> <Label.FormattedText> <FormattedString> <Span Text="This sentence contains " /> <Span Text="words that are emphasized, " FontAttributes="Italic" /> <Span Text="and underlined." TextDecorations="Underline" /> </FormattedString> </Label.FormattedText> </Label>
Dieser Code zeigt Text in einem einzigen
Label
-Element an, das mehrere Formate verwendet. Der Text im erstenSpan
-Element wird mit dem imLabel
-Element festgelegten Format angezeigt, während der Text in den zweiten und drittenSpan
-Instanzen mit dem imLabel
-Element festgelegten Format und dem in jedemSpan
-Element zusätzlich festgelegten Format angezeigt wird.Hinweis
Die
FormattedText
-Eigenschaft vom TypFormattedString
, die mindestens eineSpan
-Instanz umfasst.Wenn die Anwendung noch ausgeführt wird, speichern Sie die Änderungen an der Datei, und die Benutzeroberfläche der Anwendung wird in Ihrem Simulator oder Emulator automatisch aktualisiert. Klicken Sie andernfalls in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten. Beachten Sie, wie sich die Darstellung von
Label
geändert hat:Beenden Sie die Anwendung in Visual Studio.
Weitere Informationen zum Festlegen der Darstellung von
Span
finden Sie unter Formatierter Text im Leitfaden zu Xamarin.Forms-Bezeichnungen.
Herzlichen Glückwunsch!
Glückwunsch, Sie haben das Tutorial erfolgreich abgeschlossen und Folgendes gelernt:
- Erstellen eines Xamarin.Forms
Label
-Elements in XAML - Ändern der Darstellung eines
Label
-Elements - Darstellen von Text in einem einzelnen
Label
-Element, das über mehrere Formate verfügt
Nächste Schritte
Wenn Sie mehr über die Grundlagen der Erstellung mobiler Apps mit Xamarin.Forms lernen möchten, fahren Sie mit dem Tutorial zu „Button“ fort.
Tutorial zu Button.
Verwandte Links
Liegt ein Problem mit diesem Abschnitt vor? Wenn ja, senden Sie uns Feedback, damit wir den Abschnitt verbessern können.