Typen und Eigenschaften in .NET MAUI XAML

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 einer MAUI-App 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 Microsoft.Maui.Controls-Namespace, während der Microsoft.Maui-Namespace Hilfsprogrammtypen wie Thickness definiert, und der Microsoft.Maui.Graphics-Namespace generalisierte Typen wie z.B. Color umfasst. 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 für eine .NET MAUI-Seite verfügbaren Steuerelemente werden in einer Sammlung von Assemblys implementiert, die als Teil des Microsoft.Maui NuGet-Pakets installiert sind. 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 einfach ein Alias für einen oder mehrere der Namespaces, die von den Assemblys im Microsoft.Maui NuGet-Paket definiert werden. Wenn Sie diesen Namespace also am Anfang der Seite angeben, werden alle .NET MAUI-Typen und -Steuerelemente in den Bereich aufgenommen. 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 vorherigen 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 ihnen x:voranstellen. Beispielsweise wird jede XAML-Seite in eine Klasse kompiliert, und Sie geben den Namen der Klasse an, die mit dem x:Class-Attribut der Seite generiert wird:

<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 beispielsweise Typen und Methoden haben, die Sie in Ihrem XAML-Code verwenden möchten, der in einem Namespace namens Utils in Ihrem Projekt definiert ist, können Sie den Utils-Namespace der Seite hinzufügen, wie im folgenden Code gezeigt. In diesem Beispiel greifen Sie auf die Typen in diesem Namespace zu, indem Sie sie dem Alias "mycode" voranstellen.

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

    ...
</ContentPage>

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 ausfü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. Diese Syntax wird als Eigenschaftselementformular bezeichnet. Diese Syntax bedeutet das Aufteilen des Eigenschaftensetters in die Eltern-Kind-Form, in der die Eigenschaft in einem Elementtag der Form Type.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>