Plattformspezifische Werte in XAML

Die visuelle Darstellung Ihrer App wird auf jeder Plattform anders sein. Je nach den von Ihnen verwendeten visuellen Elementen müssen Sie Ihre Benutzeroberfläche häufig für die einzelnen Plattformen anpassen. Mit .NET MAUI können Sie das Layout Ihrer App basierend auf diesen Geräteeigenschaften verwalten.

In dieser Lektion lernen Sie die Features von .NET MAUI kennen, mit denen Sie die Benutzeroberfläche für Ihre Apps entsprechend der Plattform optimieren können, auf der sie ausgeführt werden.

Verwenden der Klasse „Device“

Die Klasse DeviceInfo ist eine Hilfsprogrammklasse, die gerätespezifische Informationen für das Gerät bereitstellt, auf dem Ihre App ausgeführt wird. Diese Informationen werden über eine Reihe von Eigenschaften verfügbar gemacht. Die wichtigste Eigenschaft ist DeviceInfo.Platform. Diese gibt eine Zeichenfolge zurück, die den Typ des aktuell verwendeten Geräts angibt: Android, iOS, WinUI oder macOS.

Betrachten Sie das folgende Szenario als Beispiel dafür, wann Sie dieses Feature verwenden können. Das Standardverhalten in einer .NET MAUI-iOS-App besteht darin, dass Inhalte, die einer Seite hinzugefügt wurden, in die iOS-Statusleiste oben auf dem Bildschirm übernommen werden. Sie möchten dieses Verhalten ändern. Die einfachste Lösung besteht darin, den Inhalt auf der Seite nach unten zu verschieben. Die Notizenlösung, die Sie in der vorherigen Übung erstellt haben, behebt dieses Problem, indem sie die Eigenschaft Padding des Steuerelements VerticalStackLayout so festlegt, dass der Inhalt um 60 Punkt nach unten verschoben wird:

<VerticalStackLayout x:Name="MyStackLayout" Padding="30,60,30,30">
    ...
</VerticalStackLayout>

Die Krux dabei: Dieses Problem tritt nur unter iOS auf. Unter Android und WinUI führt eine solche Verschiebung der Inhalte zu einer Verschwendung von Bildschirmfläche am oberen Rand der Seite.

Sie können die Eigenschaft DeviceInfo.Platform abfragen, um dieses Anzeigeproblem zu lösen. Sie können dem Seitenkonstruktor Ihrer App den folgenden Code hinzufügen, um den Abstand am oberen Rand der Seite zu vergrößern, aber nur für iOS:

MyStackLayout.Padding = 
    DeviceInfo.Platform == DevicePlatform.iOS
        ? new Thickness(30, 60, 30, 30) // Shift down by 60 points on iOS only
        : new Thickness(30); // Set the default margin to be 30 points

Dieser Code funktioniert, befindet sich aber in der CodeBehind-Datei der Seite. Der Abstand ist ein benutzeroberflächenspezifischer Wert. Es ist wohl zweckmäßiger und bequemer, diesen Vorgang in XAML statt im CodeBehind auszuführen.

Verwenden der Markuperweiterung „OnPlatform“

.NET MAUI XAML stellt die Markuperweiterung OnPlatform bereit, mit der Sie die Runtimeplattform in Ihrem XAML-Code ermitteln können. Sie können diese Markuperweiterung in dem Teil Ihres XAML-Codes anwenden, der einen Eigenschaftswert festlegt. Für die Erweiterung müssen Sie den Typ der Eigenschaft zusammen mit einer Reihe von On Platform-Blöcken angeben, in denen Sie den Wert der Eigenschaft entsprechend der Plattform festlegen.

Sie können die Eigenschaft Padding wie folgt festlegen. Beachten Sie, dass der Typ der Padding-Eigenschaft Thickness lautet:

<VerticalStackLayout>
    <VerticalStackLayout.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="30,60,30,30" />
        </OnPlatform>
    </VerticalStackLayout.Padding>
    <!--XAML for other controls goes here -->
    ...
</VerticalStackLayout>

Bei anderen Plattformen als iOS bleibt der Abstand auf den Standardwert „0,0,0,0“ festgelegt. Für WinUI und Android können Sie den Abstand mit zusätzlichen OnPlatform-Blöcken auf 30 Punkt festlegen:

<VerticalStackLayout>
    <VerticalStackLayout.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="30,60,30,30" />
            <On Platform="Android" Value="30" />
            <On Platform="WinUI" Value="30" />
        </OnPlatform>
    </VerticalStackLayout.Padding>
    ...
</VerticalStackLayout>

Sie können dieselbe Technik auch auf andere Eigenschaften anwenden. Das folgende Beispiel ändert die Hintergrundfarbe des Stapellayouts auf einer Seite unter iOS zu Silber, unter Android zu Grün und unter Windows zu Gelb.

<VerticalStackLayout>
    ...
    <VerticalStackLayout.BackgroundColor>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="iOS" Value="Silver" />
            <On Platform="Android" Value="Green" />
            <On Platform="WinUI" Value="Yellow" />
        </OnPlatform>
    </VerticalStackLayout.BackgroundColor>
    ...
</VerticalStackLayout>

Diese Syntax ist recht ausführlich, für die Erweiterung OnPlatform gibt es aber eine reduzierte Syntax. Sie können das Beispiel, das den Abstand festlegt, wie folgt vereinfachen:

<VerticalStackLayout Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">
    <!--XAML for other controls goes here -->
</VerticalStackLayout>

Sie können einen Standardwert für eine Eigenschaft sowie plattformspezifische Werte angeben. In dieser Form wird der Typparameter aus der Eigenschaft abgeleitet, auf die das Attribut OnPlatform angewendet wird.

Um die Hintergrundfarbe festzulegen, können Sie dieses XAML-Fragment anstelle des zweiten Beispiels oben verwenden:

<VerticalStackLayout BackgroundColor="{OnPlatform WinUI=Yellow, iOS=Silver, Android=Green}">
    ...
</VerticalStackLayout>