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

Durchsuchen Sie das Beispiel

.NET Multi-Platform App UI (.NET MAUI)-Apps können ihre Benutzeroberfläche für bestimmte Plattformen und Geräte anpassen lassen. Dies ermöglicht Ihrer App Folgendes:

• Nutzen Sie den effektivsten Platz. 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 es gibt wahrscheinlich einige verschwendeten Speicherplatz. Sie können Ihre App so anpassen, dass mehr Inhalt angezeigt wird, wenn sich der Bildschirm über einer bestimmten Größe befindet. Eine Shopping-App kann z. B. jeweils ein Element auf einem mobilen Gerät anzeigen, aber mehrere Elemente auf einem Desktopgerät anzeigen. Darüber hinaus können Sie durch das Platzieren weiterer Inhalte auf dem Bildschirm die Menge der Navigation verringern, die Benutzer ausführen müssen.
• Nutzen Sie die Gerätefunktionen. Bestimmte Geräte verfügen wahrscheinlicher über bestimmte Funktionen. Mobile Geräte verfügen z. B. eher über einen Positionssensor und eine Kamera, während Desktopgeräte möglicherweise keines haben. Ihre App kann erkennen, welche Funktionen verfügbar sind, und Steuerelemente aktivieren, die sie verwenden.
• Eingaben optimieren. 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 einfacher zugänglich. Desktopbenutzer erwarten jedoch häufig, dass Navigationselemente oben in der App angezeigt werden.

Wenn Sie die Benutzeroberfläche Ihrer App für bestimmte Plattformen und Gerätediome optimieren, erstellen Sie eine reaktionsfähige Benutzeroberfläche. Der primäre Ansatz zum Erstellen einer reaktionsfähigen Benutzeroberfläche in .NET MAUI umfasst die Verwendung der Klassen OnPlatform<T> und OnIdiom<T>. Ein alternativer Ansatz besteht darin, die OnPlatformOnIdiom XAML-Markuperweiterungen zu verwenden. Diese Markuperweiterungen sind jedoch nicht trimmsicher. Weitere Informationen zu den Markuperweiterungen finden Sie unter Anpassen der Ui-Darstellung mit Markuperweiterungen.

Anpassen der UI-Darstellung basierend auf der Plattform

Klassen wie OnPlatform<T> und On ermöglichen es Ihnen, die Darstellung der Benutzeroberfläche jeweils pro Plattform anzupassen.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="0,20,0,0" />
            <On Platform="Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

OnPlatform<T> ist eine generische Klasse, daher müssen Sie das generische Typargument angeben, in diesem Fall, Thicknessdas der Typ der Padding Eigenschaft ist. Dies wird mit dem x:TypeArguments XAML-Attribut erreicht. Die OnPlatform<T> Klasse definiert eine Default Eigenschaft, die auf einen Wert festgelegt werden kann, der auf alle Plattformen angewendet wird:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" Default="20">
            <On Platform="iOS" Value="0,20,0,0" />
            <On Platform="Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

In diesem Beispiel wird die Padding Eigenschaft auf unterschiedliche Werte unter iOS und Android festgelegt, wobei die anderen Plattformen auf den Standardwert festgelegt werden.

Die OnPlatform<T> Klasse definiert auch eine Platforms Eigenschaft, die ein IList von On Objekten ist. Jedes On-Objekt kann die Platform- und Value-Eigenschaft festlegen, um den Thickness-Wert für eine bestimmte Plattform zu definieren. Darüber hinaus ist die On.Platform Eigenschaft vom Typ IList<string>, sodass Sie mehrere durch Kommas getrennte Plattformen einschließen können, wenn die Werte identisch sind:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" Default="20">
            <On Platform="iOS, Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

Die Angabe eines falschen Platform Werts führt nicht zu einem Fehler. Stattdessen wird Ihr XAML ausgeführt, ohne dass der plattformspezifische Wert angewendet wird.

Anpassen der Ui-Darstellung basierend auf dem Geräte-Idiom

Mit der OnIdiom<T> Klasse können Sie die Ui-Darstellung basierend auf dem Idiom des Geräts anpassen, auf dem die App ausgeführt wird:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Margin>
        <OnIdiom x:TypeArguments="Thickness">
            <OnIdiom.Phone>0,20,0,0</OnIdiom.Phone>
            <OnIdiom.Tablet>0,40,0,0</OnIdiom.Tablet>
            <OnIdiom.Desktop>0,60,0,0</OnIdiom.Desktop>
        </OnIdiom>
    </ContentPage.Margin>
    ...
</ContentPage>

OnIdiom<T> ist eine generische Klasse, daher müssen Sie das generische Typargument angeben, in diesem Fall, Thicknessdas der Typ der Margin Eigenschaft ist. Dies wird mit dem x:TypeArguments XAML-Attribut erreicht. Die OnIdiom<T> Klasse definiert eine Default Eigenschaft, die auf einen Wert festgelegt werden kann, der auf alle Plattformen angewendet wird:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Margin>
        <OnIdiom x:TypeArguments="Thickness" Default="20">
            <OnIdiom.Desktop>0,60,0,0</OnIdiom.Desktop>
        </OnIdiom>
    </ContentPage.Margin>
    ...
</ContentPage>

In diesem Beispiel wird die Margin Eigenschaft auf einen bestimmten Wert für Desktopdiome festgelegt, wobei die anderen Idiome auf den Standardwert festgelegt werden.

Anpassen der Ui-Darstellung mit Markuperweiterungen

Die Ui-Darstellung kann auch mit den OnPlatform Erweiterungen und OnIdiom Markuperweiterungen angepasst werden. Diese Markuperweiterungen sind jedoch nicht trimsicher.

Anpassen des UI-Aussehens mit einer markupspezifischen Erweiterung je nach Plattform

Mit der OnPlatform Markuperweiterung können Sie die Darstellung der Benutzeroberfläche auf Plattformbasis anpassen. Es bietet die gleiche Funktionalität wie die OnPlatform<T> und On klassen, aber mit einer präziseren Darstellung.

Die OnPlatform Markuperweiterung wird von der OnPlatformExtension Klasse unterstützt, die die folgenden Eigenschaften definiert:

• Default vom Typ object, dem Sie einen Standardwert zuweisen, der auf die Eigenschaften angewendet wird, 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.
• 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.

Die Default-Eigenschaft ist die Inhaltseigenschaft von OnPlatformExtension. Daher können Sie für XAML-Markupausdrücke, die mit geschweiften Klammern ausgedrückt werden, den Default= Teil des Ausdrucks entfernen, wenn es sich 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.

Das folgende XAML-Beispiel 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 Color, WidthRequest und HeightRequest Eigenschaften des BoxView auf verschiedene Werte auf iOS und Android 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 mit einer Markuperweiterung basierend auf dem Geräte-Idiom

Mit der OnIdiom Markuperweiterung können Sie die Ui-Darstellung basierend auf dem Idiom des Geräts anpassen, auf dem die App ausgeführt wird. Es bietet die gleiche Funktionalität wie die OnIdiom<T> Klasse, aber mit einer präziseren Darstellung.

Die OnIdiom Markuperweiterung wird von der OnIdiomExtension Klasse unterstützt, die die folgenden Eigenschaften definiert:

• Default vom Typ object, den Sie auf einen Standardwert festlegen, der auf die Eigenschaften angewendet wird, die Geräteidiome darstellen.
• Phone, vom Typ object, den Sie auf einen Wert festlegen, der auf Smartphones angewendet werden soll.
• Tablet, vom Typ object, den Sie auf einen Wert festlegen, der auf Tablets angewendet werden soll. Diese Eigenschaft ist nicht exklusiv für Android- und iOS-Plattformen.
• Desktop, vom Typ object, den Sie auf einen Wert festlegen, der auf Desktopplattformen 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 festlegen, der auf TV-Plattformen angewendet werden soll.
• Watch vom Typ object, den Sie für einen auf Watch-Plattformen anzuwendenden Wert festlegen.
• 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.

Die Default-Eigenschaft ist die Inhaltseigenschaft von OnIdiomExtension. Daher können Sie für XAML-Markupausdrücke, die mit geschweiften Klammern ausgedrückt werden, den Default= Teil des Ausdrucks entfernen, wenn es sich um das erste Argument handelt.

Das folgende XAML-Beispiel zeigt, 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 Color, WidthRequest und HeightRequest-Eigenschaften der BoxView auf verschiedene Werte in den Umgebungen Smartphone, Tablet und Desktop fest. Die Markuperweiterungen stellen auch Standardwerte für diese Eigenschaften auf den nicht-spezifizierten Idiomen bereit, während der Default= Teil des Ausdrucks eliminiert wird.