Auf Englisch lesen

Freigeben über


Anpassen des Erscheinungsbilds der Benutzeroberfläche an die Plattform und das Geräte-Idiom

Beispiel durchsuchen.Durchsuchen Sie das Beispiel

.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

  • den Platz so effektiv wie möglich zu nutzen. Wenn Sie eine App so entwerfen, dass sie auf einem mobilen Gerät gut aussieht, kann sie auch auf einem Desktop-Gerät verwendet werden, aber es wird höchstwahrscheinlich etwas Platz verschwendet. Sie können Ihre App so anpassen, dass mehr Inhalte angezeigt werden, wenn der Bildschirm eine bestimmte Größe überschreitet. So kann beispielsweise eine Shopping-App auf einem mobilen Gerät jeweils nur einen Artikel anzeigen, auf einem Desktop-Gerät jedoch mehrere. Indem Sie mehr Inhalte auf dem Bildschirm platzieren, können Sie außerdem den Umfang der Navigation verringern, die der/die Benutzer*in durchführen muss.
  • Profitieren von Gerätefunktionen Bestimmte Geräte verfügen mit größerer Wahrscheinlichkeit über bestimmte Fähigkeiten. So ist es zum Beispiel wahrscheinlicher, dass mobile Geräte über einen Ortungssensor und eine Kamera verfügen, während bei Desktop-Geräten beides nicht vorhanden ist. Ihre App kann erkennen, welche Funktionen verfügbar sind, und Steuerelemente aktivieren, die diese nutzen.
  • Optimieren für Eingabe Sie können Ihre UI-Elemente neu anordnen, um sie für bestimmte Eingabearten zu optimieren. Wenn Sie z. B. Navigationselemente am unteren Rand der App platzieren, sind sie für mobile Benutzer*innen leichter zu erreichen. Desktopbenutzer*innen erwarten jedoch häufig, dass die Navigationselemente im oberen Bereich der App zu finden sind.

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.

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, 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.
  • MacCatalystvom Typ object, den Sie auf einen Wert festlegen, der auf Mac Catalyst angewendet werden soll.
  • Tizenvom 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.

Anpassen des Erscheinungsbildes der Benutzeroberfläche an die jeweilige Geräteidentität

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.