Значения конкретной платформы в XAML

  • 5 мин

Визуальный интерфейс вашего приложения будет отличаться на каждой платформе. Часто необходимо настроить пользовательский интерфейс для каждой платформы в зависимости от используемых визуальных элементов. .NET MAUI позволяет управлять макетом приложения на основе этих свойств устройства.

В этом уроке вы изучите возможности, которые предоставляет .NET MAUI для тонкой настройки пользовательского интерфейса приложений с учетом платформы, на которой они работают.

Использование класса Device

Служебный класс DeviceInfo предоставляет сведения об устройстве, на котором выполняется приложение. Эта информация предоставляется в виде набора свойств. Наиболее важным является свойствоDeviceInfo.Platform, которое возвращает строку, указывающую тип устройства, используемого в данный момент: Android, , iOSWinUIили macOS.

Давайте рассмотрим пример сценария, в котором используется эта функция. Поведение приложения для iOS по умолчанию .NET MAUI заключается в том, что содержимое, добавленное на страницу, вторгается в строку состояния iOS в верхней части экрана. Вы хотите изменить это поведение. Простейшее решение — сместить содержимое страницы немного вниз. Созданное в предыдущем упражнении решение на базе Notes решает эту проблему, задавая для свойства Padding элемента управления VerticalStackLayout значение, смещающее все содержимое вниз на 60 пунктов:

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

Но сложность в том, что исходная проблема затрагивает только пользователей iOS. Сдвиг содержимого вниз так много на Android и WinUI приводит к потере экрана недвижимости в верхней части страницы.

Чтобы решить эту проблему, можно опрашивать свойство DeviceInfo.Platform. В конструктор страниц приложения можно добавить следующий код, чтобы развернуть заполнение в верхней части страницы, но только для 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

Примечание.

DevicePlatform.iOS — это структура DevicePlatform , возвращающая строковое значение iOS. Есть эквивалентные свойства и для других поддерживаемых платформ. Эти свойства следует использовать вместо сравнения с жестко закодированных строк; рекомендуется и в будущем это подтверждение кода, если некоторые из этих строковых значений изменяются в будущем.

Этот код работает, но он находится в файле программной части страницы. Заполнение — это значение, зависящее от пользовательского интерфейса. Возможно, его лучше и удобнее менять в XAML, а не в коде программной части.

Использование расширения разметки OnPlatform

.NET MAUI XAML предоставляет OnPlatform расширение разметки, которое позволяет обнаруживать платформу выполнения в коде XAML. Это расширение разметки можно применить в коде XAML, который задает значение свойства. Расширение требует предоставления типа свойства вместе с рядом On Platform блоков, в которых задано значение свойства в соответствии с платформой.

Примечание.

OnPlatform Расширение разметки является универсальным; он принимает параметр типа. TypeArguments Тип атрибута указывает, что используется правильный тип расширения.

Свойство Padding можно задать следующим образом. Обратите внимание, что свойство Padding имеет тип 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>

Для платформ, отличных iOS, заполнение будет сохранять значение по умолчанию "0,0,0,0". Для WinUI и Android можно задать заполнение до 30 точек с дополнительными OnPlatform блоками:

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

Этот же подход можно применить к другим свойствам. Следующий пример изменяет цвет фона макета стека на страницу Silver в iOS, зеленый на Android и желтый в 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>

Этот синтаксис довольно громоздок, но для расширения OnPlatform поддерживается и более краткая версия синтаксиса. Пример, который задает заполнение, можно упростить следующим образом:

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

Можно указать значение по умолчанию для свойства вместе с любыми значениями, зависящими от платформы. В этом формате параметр типа выводится из свойства, к которому применяется атрибут OnPlatform.

Чтобы задать цвет фона, можно использовать этот фрагмент XAML вместо второго предыдущего примера:

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

Проверка знаний

1.

Какое расширение разметки можно использовать в коде XAML для обнаружения платформы, на которой работает приложение?

2.

Каково назначение атрибута TypeArguments для расширения OnPlatform?