Typen und Eigenschaften in .NET MAUI XAML

Abgeschlossen

XAML ist eine deklarative Markupsprache. Sie wurde mit dem Ziel entwickelt, den Prozess der Erstellung Ihrer Benutzeroberfläche zu vereinfachen. Diese Elemente in XAML stellen die Instanziierung von Objekten direkt dar, auf die Sie in CodeBehind-Dateien zugreifen.

In dieser Lerneinheit erfahren Sie, wie Sie die in XAML verfügbaren Typen verwenden und wie Eigenschaften dieser Typen festgelegt bzw. gelesen werden.

Wo werden Typen definiert?

.NET MAUI implementiert einen XAML-Parser, der die deklarierten XAML-Elemente analysiert und jedes Element als .NET-Typ instanziiert. Der XAML-Dialekt, den der .NET MAUI-Parser versteht, ist .NET MAUI-spezifisch, obwohl er mit dem XAML vergleichbar ist, das von anderen Frameworks wie Windows Presentation Foundation verwendet wird.

Die .NET-Typen, die die durch XAML-Code angegebenen Elemente implementieren, werden durch Code in mehreren .NET-Assemblys implementiert. Viele dieser Assemblys sind als Teil der .NET MAUI-Vorlagen enthalten. Sie können auch andere benutzerdefinierte Typen verwenden, indem Sie die entsprechenden Assemblys im Rahmen Ihres Projekts laden. Viele Assemblys sind als NuGet-Pakete verfügbar. Die meisten gängigen Typen, die eine MAUI-App verwendet, befinden sich in den Paketen Microsoft.Maui.Dependencies und Microsoft.Maui.Extensions.

Jeder Typ wird in einem Namespace definiert. Im XAML-Code geben Sie die Namespaces für die Typen an, auf die Sie verweisen. Die meisten MAUI-Steuerelemente befinden sich im Namespace Microsoft.Maui.Controls, während der Microsoft.Maui-Namespace nützliche Typen wie Thickness definiert und der Microsoft.Maui.Graphics-Namespace generalisierte Typen wie Color enthält. Die Möglichkeit, auf diese Weise Typen einzuführen, unterstreicht die Erweiterbarkeit von XAML. XAML erlaubt Ihnen, die Benutzeroberfläche Ihrer App mit der Möglichkeit zu erstellen, .NET MAUI-Elemente, .NET- und benutzerdefinierte Typen einzubinden. In den meisten Fällen müssen Sie sich keine Gedanken über diese Namespaces machen, da sie mithilfe des impliziten usings-Features von C# eingebracht und automatisch in der gesamten App hinzugefügt werden.

Instanziieren von Typen in XAML

Der erste Schritt bei der Verwendung von XAML zum Erstellen einer Benutzeroberfläche ist die Instanziierung ihrer Steuerelementtypen. In XAML können Sie ein Objekt eines bestimmten Typs mithilfe der Objektelementsyntax erstellen. Objektelementsyntax ist eine standardisierte, wohlgeformte XML-Syntax zum Deklarieren eines Elements. Wenn Sie beispielsweise eine Beschriftung mit einer bestimmten Farbe erstellen möchten, sieht das XAML-Element wie der folgende Code aus:

<Label TextColor="AntiqueWhite"/>

Der .NET MAUI XAML-Parser analysiert dieses XAML-Element, um das Objekt im Arbeitsspeicher zu instanziieren. Tatsächlich entspricht die analysierte XAML-Beschriftung dem folgenden C#-Code:

var myLabel = new Label
{
  TextColor = Color.FromRgb(255, 255, 100)
};

Was ist ein XAML-Namespace?

Damit der XAML-Parser die XAML-Definition eines Steuerelements auf einer Seite erfolgreich analysieren kann, muss der Parser Zugriff auf den Code haben, der das Steuerelement implementiert und dessen Eigenschaften definiert. Die auf einer .NET MAUI-Seite verfügbaren Steuerelemente werden in einer Sammlung von Assemblys implementiert, die als Teil des Microsoft.Maui-Pakets von NuGet installiert werden. Die Steuerelemente befinden sich in diesen Assemblys in einem .NET-Namespace. Im C#-Code binden Sie einen Namespace mit der using-Direktive ein. In einer XAML-Seite verweisen Sie mit dem xmlns-Attribut der Seite auf einen Namespace. Der folgende Code veranschaulicht die Namespaces, die von der XAML-Seite verwendet werden, die in der vorherigen Lerneinheit erstellt wurde:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             ...>

    ...
</ContentPage>

Der erste Namespace, http://schemas.microsoft.com/dotnet/2021/maui, ist der Standardnamespace der Seite. Diese URI-Form des Namespaces ist typisch für XML und weicht etwas von der Form ab, die Sie möglicherweise aus C# kennen. Dieser URI ist jedoch lediglich ein Alias für Namespaces, die von den Assemblys im Microsoft.Maui-NuGet-Paket definiert sind. Wenn Sie diesen Namespace also am Anfang der Seite angeben, werden alle .NET MAUI-Typen und -Steuerelemente eingebunden. Wenn Sie diesen Namespace weglassen, können Sie keine Steuerelemente wie Button, Label, Entry oder StackLayout verwenden.

Der zweite Namespace, http://schemas.microsoft.com/winfx/2009/xaml, verweist auf die Assemblys, die die verschiedenen systeminternen .NET-Typen wie Zeichenfolgen, Zahlen und Eigenschaften enthalten. Im obigen XAML-Code wird diesem Namespace der Alias x zugewiesen. Im XAML-Code für diese Seite verweisen Sie auf die Typen in diesem Namespace, indem Sie das Präfix x: verwenden. Jede XAML-Seite wird beispielsweise zu einer Klasse kompiliert, und Sie geben den Namen der generierten Klasse mit dem x:Class-Attribut der Seite an:

<ContentPage ...
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiXaml.Page1"
            ...>

    ...
</ContentPage>

Sie können in Ihren eigenen Assemblys im XAML-Code über einen XAML-Namespace auf Typen verweisen. Wenn Sie in Ihrem XAML-Code beispielsweise Typen und Methoden verwenden möchten, die in einem Namespace namens Utils in Ihrem Projekt definiert sind, können Sie den Utils-Namespace wie im folgenden Code gezeigt der Seite hinzufügen. In diesem Beispiel greifen Sie auf die Typen in diesem Namespace zu, indem Sie den Alias mycode als Präfix verwenden.

<ContentPage ...
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mycode="clr-namespace:Utils"
            ...>

    ...
</ContentPage>

Hinweis

Weitere Beispiele für diese Technik finden Sie weiter unten in diesem Modul.

Angeben von Eigenschaftswerten in XAML

In XML verwenden Sie Attribute, um ein Element zu beschreiben oder Informationen für ein Element bereitzustellen. In XAML verwenden Sie Attribute, um Eigenschaften für den zugrunde liegenden Typ festzulegen. Sehen wir uns beispielsweise den folgenden C#-Code an:

var label = new Label { Text = "Username", TextColor = Color.Black };

Diese Anweisung erstellt ein neues Label-Objekt, und legt die Eigenschaften Text und TextColor fest. Zum Festlegen von Eigenschaften in XAML verwenden Sie Attribute. Der entsprechende XAML-Code sieht wie folgt aus:

<Label Text="Username" TextColor="Black" />

Ein Unterschied zwischen dem XAML-Code und dem C#-Code, den Sie vielleicht bemerken werden, sind die Eigenschaftswerte. Im C#-Code verwenden Sie beispielsweise den Typ Color für die Eigenschaft TextColor. In der XAML-Definition legen Sie TextColor jedoch mit einem Zeichenfolgenwert fest. Dies liegt daran, dass eine Zeichenfolge das einzige zulässige Element für einen XML-Attributwert ist. Daher muss es eine Möglichkeit geben, die einzelnen Zeichenfolgenwerte in den richtigen Typ zu konvertieren. In XAML können Sie diese Konvertierung mithilfe eines Typkonverters durchführen.

Was ist ein Typkonverter?

Ein Typkonverter konvertiert ein als Zeichenfolgenwert angegebenes XML-Attribut in den richtigen Typ. Betrachten Sie das folgende Beispiel, um dieses Konzept besser zu verstehen:

<Label Text="Username" TextColor="Black" FontSize="42" FontAttributes="Bold,Italic" />

Dieser Code erstellt ein Label-Objekt und legt dessen Eigenschaften Text, TextColor, FontSize sowie FontAttributes fest.

Betrachten Sie zunächst die erste Eigenschaft, Text. Der Text ist bereits eine Zeichenfolge, d. h., dass die XAML-Seite keinen Typkonverter benötigt. Als Nächstes verwendet TextColor den Color-Typ verwendet, sodass XAML einen Typkonverter benötigt, um die Zeichenfolge in den entsprechenden Color-Wert zu konvertieren. Die FontSize-Eigenschaft ist eine ganze Zahl, sodass XAML einen Typkonverter benötigt, um die ganze Zahl in eine Zeichenfolge zu konvertieren. FontAttributes ist schließlich ein Beispiel eines komplexen Objekts. Sie können die Werte zu einer durch Kommas getrennten Zeichenfolge kombinieren: „Bold,Italic“. Die durch Kommas getrennte Zeichenfolge wird als eine auf [Flags] basierende Enumeration behandelt. Der Typkonverter wendet ein bitweises OR auf den Wert der Eigenschaft an.

.NET MAUI verfügt über Typkonverter für die meisten integrierten Klassen und verwendet diese Typkonverter automatisch. Wenn jedoch ein bestimmter Konverter nicht vorhanden ist, können Sie einen eigenen schreiben und ihn Ihrem Typ zuordnen, um ihn in XAML nutzbar zu machen.

Komplexe Typzuweisung

Typkonverter eignen sich hervorragend für einfache Eigenschaftseinstellungen. In einigen Fällen müssen Sie jedoch ein vollständiges Objekt mit eigenen Eigenschaftswerten erstellen. Die Lösung dieses Problems besteht darin, die Eigenschaftszuweisung so zu ändern, dass eine elementbezogene Syntax verwendet wird. Die Form dieser Syntax wird als Property-Element bezeichnet. Diese Syntax sieht vor, den Setter für eine Eigenschaft in die Form „Übergeordnetes/Untergeordnetes Element“ aufzuteilen, wobei die Eigenschaft in einem Elementtag im Format Typ.PropertyName ausgedrückt wird. Angenommen, Sie möchten einer Bezeichnung eine Gestenerkennung zuweisen, damit die Benutzer*innen der App auf die Bezeichnung tippen können. Die Gestenerkennung ist ein komplexes Objekt mit eigenen Eigenschaften. Üblicherweise müssen diese Eigenschaften zugewiesen werden, um eine einwandfreie Funktionalität zu gewährleisten:

<TapGestureRecognizer NumberOfTapsRequired="2" />

Wenn Sie diesen Wert einem Label zuweisen müssen, können Sie den XAML-Code wie folgt schreiben:

<Label Text="Username" TextColor="Black" FontSize="42" FontAttributes="Bold,Italic">
    <Label.GestureRecognizers>
        <TapGestureRecognizer NumberOfTapsRequired="2" />
    </Label.GestureRecognizers>
</Label>

Der Label-Typ verfügt über eine Eigenschaft namens GestureRecognizers. Mit der Property-Element-Form können Sie TapGestureRecognizer zur Liste der Gesten für Label hinzufügen.

Standardinhaltseigenschaft

Einige .NET MAUI-Steuerelemente verfügen über eine Standardinhaltseigenschaft. Die Inhaltseigenschaft ermöglicht Ihnen das Angeben des Werts einer Eigenschaft für ein Steuerelement, ohne diesen explizit in XAML anzugeben. Sehen Sie sich das folgende XAML-Fragment an:

<VerticalStackLayout>
    <VerticalStackLayout.Children>
        <Label Text="Please log in" />
    </VerticalStackLayout.Children>
</VerticalStackLayout>

Mit diesem Code wird ein VerticalStackLayout-Element erstellt und Label als untergeordnetes Element hinzugefügt. Da es üblich ist, untergeordnete Elemente zu VerticalStackLayout hinzufügen, ist die zugehörige Children-Eigenschaft die Standardinhaltseigenschaft. Dies bedeutet, dass Sie wie folgt ein untergeordnetes Element hinzufügen können, ohne Children explizit anzugeben:

<VerticalStackLayout>
    <Label Text="Please log in" />
</VerticalStackLayout>

Wissensbeurteilung

1.

Wozu dient ein Typkonverter?

Ein Typkonverter konvertiert die XAML-Beschreibung einer Seite in den entsprechenden C#-Code.

Ein Typkonverter kann C#-Code in die XAML-Darstellung einer Seite konvertieren.

Ein Typkonverter dient zum Konvertieren eines als Zeichenfolge angegebenen XML-Attributwerts in den richtigen Typ.

2.

Wie können Sie Ihre eigenen benutzerdefinierten Typen in einer XAML-Datei einbringen?

Sie verwenden das xmlns-Attribut der Seite und weisen dem Namespace, der Ihre benutzerdefinierten Typen enthält, einen Alias zu, auf den Sie in den XAML-Steuerelementen auf der Seite verweisen können.

Sie fügen der XAML-Datei eine using-C#-Direktive hinzu.

Sie wenden das x:FieldModifier-Namespaceattribut auf benannte XAML-Elemente an.

Sie müssen alle Fragen beantworten, bevor Sie Ihre Arbeit überprüfen können.