Vorteile der Verwendung von XAML
XAML ist eine Markupsprache, die Sie statt C#-Code zum Aufbau Ihrer Benutzeroberfläche verwenden können. XAML ermöglicht Ihnen, Ihren Benutzeroberflächencode von Ihrem Verhaltenscode zu trennen, damit beide sich einfacher verwalten lassen.
In dieser Lektion vergleichen Sie die Verwendung von XAML mit dem Definieren des UI-Layouts mithilfe von C#-Code. Sie werden auch einige der Vorteile kennenlernen, die die Verwendung von XAML als Markupsprache zum Definieren Ihrer Benutzeroberfläche bietet.
Was ist eine Markupsprache?
Eine Markupsprache ist eine Computersprache, mit der Sie verschiedene Elemente in ein Dokument einführen können. Sie beschreiben Elemente mithilfe vordefinierter Tags. Die Tags haben jeweils eine spezifische Bedeutung im Kontext des Bereichs, in dem das Dokument verwendet wird.
Beispielsweise können Sie mit HTML (Hypertext Markup Language) eine Webseite erstellen, die Sie in einem Webbrowser anzeigen können. Sie müssen nicht alle Tags verstehen, die wir im folgenden Beispiel verwenden. Sie sollten erkennen, dass dieser Code ein Dokument beschreibt, das den Text „Hello World!“ als Inhalt enthält.
<!DOCTYPE html>
<html>
<body>
<p>Hello <b>World</b>!</p>
</body>
</html>
Sie haben wahrscheinlich bereits mit einer Markupsprache gearbeitet. Vielleicht haben Sie eine Webseite mit HTML erstellt oder die XML-Definitionen (Extensible Markup Language) in einer Visual Studio project.csproj-Datei geändert. Die Microsoft-Buildtools analysieren und verarbeiten diese Datei.
Es ist üblich, dass Dateien, die eine Markupsprache enthalten, von anderen Softwaretools verarbeitet und interpretiert werden. Diese interpretative Natur des Markups entspricht genau der Zielsetzung von XAML. Die Softwaretools, die sie interpretieren, helfen allerdings bei der Erstellung der Benutzeroberfläche der App.
Was ist XAML?
XAML ist eine von Microsoft entwickelte deklarative Markupsprache. XAML wurde entwickelt, um den Prozess der Erstellung der Benutzeroberfläche in Anwendungen zu vereinfachen.
Die von Ihnen erstellten XAML-Dokumente enthalten Elemente, die die Benutzeroberflächenelemente der Anwendung deklarativ beschreiben. Beachten Sie, dass diese Elemente in XAML die Instanziierung von Objekten direkt darstellen. Nachdem Sie ein Element in XAML definiert haben, können Sie in CodeBehind-Dateien darauf zugreifen und Verhalten mithilfe von C#-Code definieren.
Unterschied zwischen .NET MAUI XAML und Microsoft XAML
XAML basiert auf der Microsoft 2009 XAML-Spezifikation. Diese Spezifikation definiert jedoch nur die Sprachsyntax. Wie bei Windows Presentation Foundation (WPF), der Universellen Windows-Plattform (UWP) und WinUI 3, die alle XAML verwenden, werden sich die Elemente, die Sie in der XAML deklarieren, ändern.
XAML wurde 2006 zusammen mit WPF (Windows Presentation Foundation) veröffentlicht. Wenn Sie schon länger mit Microsoft XAML arbeiten, sollte Ihnen die XAML-Syntax bekannt vorkommen.
Es gibt einige wesentliche Unterschiede zwischen der .NET MAUI-Variante von XAML und XAML, das von anderen Benutzeroberflächen-Tools verwendet wird. Die Struktur und die Konzepte sind ähnlich, aber einige Namen von Klassen und Eigenschaften sind unterschiedlich.
Erstellen einer Benutzeroberfläche mit .NET MAUI XAML
Die beste Möglichkeit, XAML in Aktion zu sehen, bietet ein Blick auf ein Beispiel einer vorhandenen mit C# programmierten Seite des Typs ContentPage. Sie können sie dann mit einer anderen Seite vergleichen, für die dieselbe Benutzeroberfläche mit XAML definiert wurde.
Angenommen, Sie haben die folgende ContentPage in Ihrer App programmiert:
namespace MauiCode;
public partial class MainPage : ContentPage
{
Button loginButton;
VerticalStackLayout layout;
public MainPage()
{
this.BackgroundColor = Color.FromArgb("512bdf");
layout = new VerticalStackLayout
{
Margin = new Thickness(15, 15, 15, 15),
Padding = new Thickness(30, 60, 30, 30),
Children =
{
new Label { Text = "Please log in", FontSize = 30, TextColor = Color.FromRgb(255, 255, 100) },
new Label { Text = "Username", TextColor = Color.FromRgb(255, 255, 255) },
new Entry (),
new Label { Text = "Password", TextColor = Color.FromRgb(255, 255, 255) },
new Entry { IsPassword = true }
}
};
loginButton = new Button { Text = "Login", BackgroundColor = Color.FromRgb(0, 148, 255) };
layout.Children.Add(loginButton);
Content = layout;
loginButton.Clicked += (sender, e) =>
{
Debug.WriteLine("Clicked !");
};
}
}
Die Seite enthält einen Layoutcontainer, zwei Beschriftungen, zwei Einträge und eine Schaltfläche. Der Code verarbeitet auch das Clicked-Ereignis für die Schaltfläche. Außerdem sind auf der Seite einige wenige Designeigenschaften für die Elemente festgelegt. Bei der Ausführung auf einem Android-Gerät sieht die Seite wie folgt aus:
Obwohl die Seite ein einfaches Design hat, befindet sich auf der gleichen Datei eine Mischung aus Verhalten und Design.
Das selbe Seitenlayout, das über XAML definiert wurde, sieht wie folgt aus:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiXaml.Page1"
BackgroundColor="#512bdf">
<VerticalStackLayout Margin="15" Padding="30, 60, 30, 30">
<Label Text="Please log in" FontSize="30" TextColor="AntiqueWhite"/>
<Label Text="Username" TextColor="White" />
<Entry />
<Label Text="Password" TextColor="White" />
<Entry IsPassword="True" />
<Button Text="Log in" BackgroundColor="#0094FF" Clicked="LoginButton_Clicked" />
</VerticalStackLayout>
</ContentPage>
Der C#-Code, der die Seite initialisiert und den Ereignis-Handler für das Clicked Ereignis des LoginButton Steuerelements in der CodeBehind-Datei implementiert, sieht wie folgt aus:
namespace MauiXaml;
public partial class Page1 : ContentPage, IPage
{
public Page1()
{
InitializeComponent();
}
void LoginButton_Clicked(object sender, EventArgs e)
{
Debug.WriteLine("Clicked !");
}
}
Hinweis
Die InitializeComponent-Methode im Seitenkonstruktor liest die XAML-Beschreibung der Seite, lädt die verschiedenen Steuerelemente der Seite und legt ihre Eigenschaften fest. Sie können diese Methode nur aufrufen, wenn Sie eine Seite mit XAML-Markup definieren. Das vorherige Beispiel, das zeigt, wie man die Benutzeroberfläche mit C#-Code erstellt, ruft nicht InitializeComponent auf.
Diese Struktur ermöglicht die Trennung von Design und Verhalten. Die gesamte Deklaration der Benutzeroberfläche ist in einer einzelnen dedizierten Quelldatei enthalten, die vom Benutzeroberflächenverhalten getrennt ist. Außerdem bietet das XAML-Markup mehr Klarheit für Entwickler, die versuchen, das Aussehen und die Bedienung der Anwendung zu verstehen.
Vorteile der Verwendung von XAML
XAML erlaubt Ihnen, die Verhaltenslogik vom UI-Design zu trennen. Diese Trennung hilft Ihnen, jeden Teil eigenständig zu erstellen und erleichtert die Verwaltung der gesamten App, wenn sie wächst.
Dieser Ansatz ermöglicht es spezialisierten Benutzeroberflächendesigner, das Erscheinungsbild der Benutzeroberfläche mithilfe von XAML-Bearbeitungstools zu aktualisieren, und zwar unabhängig von Entwickler, die die Benutzeroberflächenlogik aktualisieren.