Training
Modul
Erstellen Sie eine Benutzeroberfläche in einer .NET MAUI-Anwendung mithilfe von XAML - Training
Lernen Sie, wie Sie eine Benutzeroberfläche für eine .NET MAUI-Anwendung mit XAML entwerfen.
Dieser Browser wird nicht mehr unterstützt.
Führen Sie ein Upgrade auf Microsoft Edge durch, um die neuesten Features, Sicherheitsupdates und den technischen Support zu nutzen.
.NET Multiplattform-App UI (.NET MAUI) kann die Benutzeroberfläche von Apps für bestimmte Plattformen und Geräte angepasst werden. Dies ermöglicht es Ihrer ,App
Wenn Sie die Benutzeroberfläche Ihrer App für bestimmte Plattformen und Geräte-Idiome optimieren, erstellen Sie eine responsive Benutzeroberfläche. Die primären Ansätze zur Erstellung einer responsiven Benutzeroberfläche in .NET MAUI beinhalten die Verwendung der OnPlatform
Markuperweiterung und der OnIdiom
-Markuperweiterung.
Hinweis
Es gibt eine Kategorie von Auslösern, die so genannten Zustandsauslöser, die verwendet werden können, um das Erscheinungsbild der Benutzeroberfläche in bestimmten Szenarien anzupassen, z. B. wenn sich die Ausrichtung eines Geräts ändert. Weitere Informationen finden Sie unter Zustandsauslöser.
Die Markuperweiterung OnPlatform
ermöglicht Ihnen das plattformspezifische Anpassen der Benutzeroberfläche. Sie bietet die gleiche Funktionalität wie die Klassen OnPlatform<T> und On, jedoch mit einer prägnanteren Darstellung.
Die Markuperweiterung OnPlatform
wird von der Klasse OnPlatformExtension unterstützt, in der die folgenden Eigenschaften definiert werden:
Default
vom Typ object
, den Sie auf einen Standardwert setzen, der auf die Eigenschaften angewendet wird, die Plattformen darstellen.Android
vom Typ object
, den Sie auf einen Wert setzen, der auf Android angewendet werden soll.iOS
, vom Typ object
, den Sie auf einen Wert festlegen, der auf iOS angewendet werden soll.MacCatalyst
vom Typ object
, den Sie auf einen Wert festlegen, der auf Mac Catalyst angewendet werden soll.Tizen
vom Typ object
, den Sie auf einen Wert festlegen, der auf der Tizen-Plattform angewendet werden soll.WinUI
, vom Typ object
, den Sie auf einen Wert festgelegt haben, der auf WinUI angewendet werden soll.Converter
, vom Typ IValueConverter, der auf eine IValueConverter-Implementierung festgelegt werden kann.ConverterParameter
, vom Typ object
, der auf einen Wert festgelegt werden kann, der an die IValueConverter-Implementierung übergeben werden soll.Hinweis
Im XAML-Parser kann die Klasse OnPlatformExtension zu OnPlatform
abgekürzt werden.
Die Eigenschaft Default
ist die Inhaltseigenschaft von OnPlatformExtension. Daher können Sie bei XAML-Markup-Ausdrücken, die mit geschweiften Klammern ausgedrückt werden, den Default=
-Teil des Ausdrucks entfernen, wenn er das erste Argument ist. Wenn die Default
-Eigenschaft nicht festgelegt ist, wird standardmäßig der Wert der BindableProperty.DefaultValue
-Eigenschaft verwendet, vorausgesetzt, die Markup-Erweiterung zielt auf eine BindableProperty.
Wichtig
Der XAML-Parser erwartet, dass für Eigenschaften, die die Markuperweiterung OnPlatform
verwenden, Werte des richtigen Typs bereitgestellt werden. Wenn eine Typkonvertierung erforderlich ist, versucht die OnPlatform
-Markuperweiterung, diese mit den von .NET MAUI bereitgestellten Standardkonvertern durchzuführen. Es gibt jedoch einige Typkonvertierungen, die nicht von den Standardkonvertern durchgeführt werden können. In diesen Fällen sollte die Converter
-Eigenschaft auf eine IValueConverter-Implementierung gesetzt werden.
Die OnPlatform Demo-Seite zeigt, wie die OnPlatform
-Markuperweiterung verwendet wird:
<BoxView Color="{OnPlatform Yellow, iOS=Red, Android=Green}"
WidthRequest="{OnPlatform 250, iOS=200, Android=300}"
HeightRequest="{OnPlatform 250, iOS=200, Android=300}"
HorizontalOptions="Center" />
In diesem Beispiel verwenden alle drei OnPlatform
-Ausdrücke die abgekürzte Version des OnPlatformExtension-Klassennamens. Die 3 OnPlatform
-Markuperweiterungen setzen die xref:Microsoft.Maui.Graphics.Color
-, WidthRequest- und HeightRequest-Eigenschaften von BoxView unter iOS und Android auf unterschiedliche Werte. Die Markuperweiterungen bieten auch Standardwerte für diese Eigenschaften auf den Plattformen, die nicht spezifiziert sind, wobei der Default=
-Teil des Ausdrucks entfällt.
Mit der OnIdiom
-Markuperweiterung können Sie das Erscheinungsbild der Benutzeroberfläche an das Idiom des Geräts anpassen, auf dem die App ausgeführt wird. Sie wird von der Klasse OnIdiomExtension unterstützt, die die folgenden Eigenschaften definiert:
Default
vom Typ object
, den Sie auf einen Standardwert setzen, der auf die Eigenschaften angewendet werden soll, die Geräte-Idiome darstellen.Phone
vom Typ object
, die Sie auf einen Wert setzen, der auf Telefone angewendet werden soll.Tablet
vom Typ object
, den Sie auf einen Wert setzen, der auf Tabletten angewendet werden soll. Diese Eigenschaft ist nicht exklusiv für Android- und iOS-Plattformen.Desktop
vom Typ object
, den Sie auf einen Wert setzen, der auf Desktop-Plattformen angewendet werden soll. Beachten Sie, dass einige Laptops möglicherweise mithilfe der Tablet
-Eigenschaft klassifiziert werden.TV
vom Typ object
, den Sie auf einen Wert setzen, der auf TV-Plattformen angewendet werden soll.Watch
vom Typ object
, den Sie auf einen Wert setzen, der auf Watch-Plattformen angewendet werden soll.Converter
, vom Typ IValueConverter, der auf eine IValueConverter-Implementierung festgelegt werden kann.ConverterParameter
, vom Typ object
, der auf einen Wert festgelegt werden kann, der an die IValueConverter-Implementierung übergeben werden soll.Hinweis
Im XAML-Parser kann die Klasse OnIdiomExtension zu OnIdiom
abgekürzt werden.
Die Eigenschaft Default
ist die Inhaltseigenschaft von OnIdiomExtension. Daher können Sie bei XAML-Markup-Ausdrücken, die mit geschweiften Klammern ausgedrückt werden, den Default=
-Teil des Ausdrucks entfernen, wenn er das erste Argument ist.
Wichtig
Der XAML-Parser erwartet, dass für Eigenschaften, die die Markuperweiterung OnIdiom
verwenden, Werte des richtigen Typs bereitgestellt werden. Wenn eine Typkonvertierung erforderlich ist, versucht die OnIdiom
-Markuperweiterung, diese mit den von .NET MAUI bereitgestellten Standardkonvertern durchzuführen. Es gibt jedoch einige Typkonvertierungen, die nicht von den Standardkonvertern durchgeführt werden können. In diesen Fällen sollte die Converter
-Eigenschaft auf eine IValueConverter-Implementierung gesetzt werden.
Das folgende XAML-Beispiel zeigt, wie die Markuperweiterung OnIdiom
verwendet werden kann:
<BoxView Color="{OnIdiom Yellow, Phone=Red, Tablet=Green, Desktop=Blue}"
WidthRequest="{OnIdiom 100, Phone=200, Tablet=300, Desktop=400}"
HeightRequest="{OnIdiom 100, Phone=200, Tablet=300, Desktop=400}"
HorizontalOptions="Center" />
In diesem Beispiel verwenden alle drei OnIdiom
-Ausdrücke die abgekürzte Version des OnIdiomExtension-Klassennamens. Die drei OnIdiom
-Markuperweiterungen setzen die Color
-, WidthRequest- und HeightRequest-Eigenschaften von BoxView auf unterschiedliche Werte für die Idiome Telefon, Tablet und Desktop. Die Markuperweiterungen bieten auch Standardwerte für diese Eigenschaften bei den Idiomen, die nicht angegeben sind, wobei der Default=
-Teil des Ausdrucks entfällt.
Feedback zu .NET MAUI
.NET MAUI ist ein Open Source-Projekt. Wählen Sie einen Link aus, um Feedback zu geben:
Training
Modul
Erstellen Sie eine Benutzeroberfläche in einer .NET MAUI-Anwendung mithilfe von XAML - Training
Lernen Sie, wie Sie eine Benutzeroberfläche für eine .NET MAUI-Anwendung mit XAML entwerfen.