Wartości specyficzne dla platformy w języku XAML

Środowisko wizualne aplikacji będzie się różnić na każdej platformie. Często musisz dostosować interfejs użytkownika dla każdej platformy na podstawie używanych elementów wizualnych. Program .NET MAUI umożliwia zarządzanie układem aplikacji na podstawie tych właściwości urządzenia.

W tej lekcji dowiesz się więcej o funkcjach oferowanych przez program .NET MAUI, aby umożliwić dostosowanie interfejsu użytkownika aplikacji zgodnie z platformą, na której są uruchomione.

Korzystanie z klasy Device

Klasa DeviceInfo jest klasą narzędziową, która udostępnia informacje specyficzne dla urządzenia dla urządzenia, na którym jest uruchomiona aplikacja. Udostępnia te informacje za pośrednictwem zestawu właściwości. Najważniejszą właściwością jest DeviceInfo.Platform, która zwraca ciąg wskazujący typ używanego urządzenia: Android, , iOSWinUIlub macOS.

Rozważmy następujący scenariusz jako przykład użycia tej funkcji. Domyślne zachowanie aplikacji .NET MAUI dla systemu iOS polega na tym, że zawartość dodana do strony wkracza na pasku stanu systemu iOS w górnej części ekranu. Chcesz zmienić to zachowanie. Najprostszym rozwiązaniem jest przesunięcie zawartości w dół na stronie. Rozwiązanie Notatki utworzone w poprzednim ćwiczeniu rozwiązuje ten problem, ustawiając Padding właściwość VerticalStackLayout kontrolki, aby przenieść zawartość w dół o 60 punktów:

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

Problem polega na tym, że ten problem dotyczy tylko systemu iOS. Przesunięcie zawartości w dół o wiele w systemach Android i WinUI powoduje stratę nieruchomości ekranu w górnej części strony.

Możesz wysłać zapytanie do właściwości, DeviceInfo.Platform aby rozwiązać ten problem z wyświetlaniem. Możesz dodać następujący kod do konstruktora strony aplikacji, aby rozwinąć dopełnienie w górnej części strony, ale tylko dla systemu 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

Ten kod działa, ale znajduje się w pliku za pomocą kodu strony. Wypełnienie jest wartością specyficzną dla interfejsu użytkownika. Prawdopodobnie jest to bardziej odpowiednie i wygodne, aby zrobić to z kodu XAML zamiast w kodzie.

Korzystanie z rozszerzenia znaczników OnPlatform

Język XAML dla platformy .NET MAUI udostępnia OnPlatform rozszerzenie znaczników, które umożliwia wykrywanie platformy środowiska uruchomieniowego z poziomu kodu XAML. To rozszerzenie znaczników można zastosować w ramach kodu XAML, który ustawia wartość właściwości. Rozszerzenie wymaga podania typu właściwości wraz z serią bloków On Platform , w których ustawiono wartość właściwości zgodnie z platformą.

Możesz ustawić właściwość podobną Padding do tej. Zwróć uwagę, że typ Padding właściwości to Thickness:

<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>

W przypadku platform innych niż iOS wypełnienie pozostanie ustawione na domyślną wartość "0,0,0,0,0". W przypadku systemów WinUI i Android można ustawić dopełnienie na 30 punktów z dodatkowymi OnPlatform blokami:

<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>

Tę samą technikę można zastosować do innych właściwości. Poniższy przykład zmienia kolor tła układu stosu na stronie na Silver w systemie iOS, na Zielony w systemie Android i Żółty w systemie Windows.

<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>

Ta składnia jest nieco szczegółowa, ale istnieje ograniczona składnia dostępna dla OnPlatform rozszerzenia. Możesz uprościć przykład ustawiający dopełnienie w następujący sposób:

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

Można określić wartość domyślną właściwości wraz z dowolnymi wartościami specyficznymi dla platformy. W tym formularzu parametr typu jest wnioskowany z właściwości, do której OnPlatform jest stosowany atrybut.

Aby ustawić kolor tła, możesz użyć tego fragmentu XAML zamiast drugiego poprzedniego przykładu:

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