Freigeben über

Anpassen der UI-Darstellung basierend auf der Plattform und der Gerätesprache

  • Artikel

Browse sample. Durchsuchen Sie das Beispiel

Bei .NET Multi-Platform App UI (.NET MAUI)-Apps kann die Benutzeroberfläche für bestimmte Plattformen und Geräte angepasst werden. Dadurch wird Folgendes für die App ermöglicht:

  • Der Platz in der App-UI wird möglichst effizient genutzt. Wenn Sie eine App so entwerfen, dass sie auf einem mobilen Gerät gut aussieht, kann die App weiterhin auf einem Desktopgerät verwendet werden, aber dabei wird wahrscheinlich etwas Speicherplatz verschwendet. Sie können die App anpassen, damit mehr Inhalt angezeigt wird, wenn eine bestimmte Bildschirmgröße überschritten wird. Eine Shopping-App kann z. B. jeweils ein Element auf einem mobilen Gerät, aber mehrere Elemente auf einem Desktopgerät anzeigen. Durch das Platzieren von mehr Inhalt auf dem Bildschirm reduzieren Sie die durch den/die Benutzer*in erforderliche Navigation.
  • Sie profitieren von Gerätefunktionen. Bestimmte verfügen über bestimmte Funktionen. Laptops verfügen beispielsweise mit größerer Wahrscheinlichkeit über einen Positionssensor und eine Kamera, wohingegen ein PC möglicherweise beide nicht aufweist. Ihre App kann erkennen, welche Funktionen verfügbar sind und ermöglichen, dass Steuerelemente diese verwenden.
  • Optimierung von Eingaben. Sie können Ihre UI-Elemente neu anordnen, um sie für bestimmte Eingabetypen zu optimieren. Wenn Sie beispielsweise Navigationselemente am unteren Rand der App platzieren, sind sie für mobile Benutzer*innen einfacher zugänglich. Desktopbenutzer*innen erwarten jedoch häufig, dass Navigationselemente oben in der App angezeigt werden.

Wenn Sie die Benutzeroberfläche Ihrer App für bestimmte Bildschirmbreiten optimieren, spricht man vom Erstellen eines reaktionsfähigen Designs. Die wichtigsten Ansätze zum Erstellen einer reaktionsfähigen Benutzeroberfläche in .NET MAUI umfassen die Verwendung der OnPlatform-Markuperweiterung und der OnIdiom-Markuperweiterung.

Hinweis

Es gibt eine Kategorie von Triggern, die als Zustandstrigger bezeichnet werden, die verwendet werden können, um die UI-Darstellung in bestimmten Szenarien anzupassen, z. B. wenn sich die Ausrichtung eines Geräts ändert. Weitere Informationen finden Sie unter Zustandstrigger.

Anpassen der UI-Darstellung basierend auf der Plattform

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, aber mit einer präziseren 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 festgelegt haben, der auf die Eigenschaften angewendet werden soll, die Plattformen darstellen.
  • Android, vom Typ object, den Sie auf einen Wert festgelegt haben, 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 die 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 Default-Eigenschaft stellt die Inhaltseigenschaft der OnPlatformExtension-Klasse dar. Daher können Sie bei XAML-Markupausdrücken (die mit geschweiften Klammern ausgedrückt werden) den Default=-Teil des Ausdrucks entfernen, wenn es sich dabei um das erste Argument handelt. Wenn die Default-Eigenschaft nicht festgelegt ist, wird standardmäßig der BindableProperty.DefaultValue-Eigenschaftswert verwendet, vorausgesetzt, die Markuperweiterung richtet sich an eine BindableProperty.

Wichtig

Der XAML-Parser erwartet, dass Werte des richtigen Typs für Eigenschaften bereitgestellt werden, die die OnPlatform-Markuperweiterung verwenden. Wenn eine Typkonvertierung erforderlich ist, versucht die OnPlatform-Markuperweiterung, sie mithilfe der von .NET MAUI bereitgestellten Standardkonverter auszuführen. Es gibt jedoch einige Typkonvertierungen, die nicht von den Standardkonvertern ausgeführt werden können, und in diesen Fällen sollte die Converter-Eigenschaft auf eine IValueConverter-Implementierung festgelegt werden.

Die OnPlatform-Demoseite 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 drei OnPlatform-Markuperweiterungen legen die Eigenschaften xref:Microsoft.Maui.Graphics.Color, WidthRequest und HeightRequest der BoxView unter iOS und Android auf verschiedene Werte fest. Die Markuperweiterungen stellen auch Standardwerte für diese Eigenschaften auf den Plattformen bereit, die nicht angegeben sind, während der Default=-Teil des Ausdrucks wegfällt.

Anpassen der UI-Darstellung basierend auf der Gerätesprache

Mit der OnIdiom-Markuperweiterung können Sie die UI-Darstellung basierend auf der Sprache des Geräts anpassen, auf dem die App ausgeführt wird. Sie wird von der OnIdiomExtension-Klasse unterstützt, in der die folgenden Eigenschaften definiert werden:

  • Default, vom Typ object, den Sie auf einen Standardwert festgelegt haben, der auf die Eigenschaften angewendet werden soll, die Gerätesprachen darstellen.
  • Phone, vom Typ object, den Sie auf einen Wert festgelegt haben, der auf Smartphones angewendet werden soll.
  • Tablet, vom Typ object, den Sie auf einen Wert festlegen, der auf Tablets angewendet werden soll.
  • Desktop, vom Typ object, den Sie auf einen Wert festlegen, der auf Desktopplattformen angewendet werden soll.
  • TV, vom Typ object, den Sie auf einen Wert festlegen, der auf TV-Plattformen angewendet werden soll.
  • Watch, vom Typ object, den Sie auf einen Wert festlegen, 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 Default-Eigenschaft stellt die Inhaltseigenschaft der OnIdiomExtension-Klasse dar. Daher können Sie bei XAML-Markupausdrücken (die mit geschweiften Klammern ausgedrückt werden) den Default=-Teil des Ausdrucks entfernen, wenn es sich dabei um das erste Argument handelt.

Wichtig

Der XAML-Parser erwartet, dass Werte des richtigen Typs für Eigenschaften bereitgestellt werden, die die OnIdiom-Markuperweiterung verwenden. Wenn eine Typkonvertierung erforderlich ist, versucht die OnIdiom-Markuperweiterung, sie mithilfe der von .NET MAUI bereitgestellten Standardkonverter auszuführen. Es gibt jedoch einige Typkonvertierungen, die nicht von den Standardkonvertern ausgeführt werden können, und in diesen Fällen sollte die Converter-Eigenschaft auf eine IValueConverter-Implementierung festgelegt werden.

Im folgenden XAML-Beispiel wird gezeigt, wie die OnIdiom-Markuperweiterung verwendet wird:

<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 legen die Eigenschaften Color, WidthRequest und HeightRequest der BoxView auf Smartphones, Tablets und Desktopsprachen auf verschiedene Werte fest. Die Markuperweiterungen stellen auch Standardwerte für diese Eigenschaften in den Sprachen bereit, die nicht angegeben sind, während der Default=-Teil des Ausdrucks wegfällt.