Поделиться через

Настройка внешнего вида пользовательского интерфейса на основе идиомы платформы и устройства

  • Статья

Просмотрите пример. Обзор примера

Приложения многоплатформенного пользовательского интерфейса приложений .NET (.NET MAUI) могут настраивать пользовательский интерфейс для определенных платформ и устройств. Это позволяет приложению выполнять указанные ниже действия.

  • Сделайте наиболее эффективным использование пространства. Если вы разрабатываете приложение, чтобы выглядеть хорошо на мобильном устройстве, приложение по-прежнему будет использоваться на настольном устройстве, но, скорее всего, будет некоторое пустое место. Вы можете настроить приложение, чтобы отобразить больше содержимого, если экран превышает определенный размер. Например, приложение для покупок может отображать один элемент одновременно на мобильном устройстве, но может отображать несколько элементов на настольном устройстве. Кроме того, поместив на экран больше содержимого, можно уменьшить объем навигации, которую необходимо выполнить пользователям.
  • Воспользуйтесь преимуществами возможностей устройств. Некоторые устройства, скорее всего, обладают определенными возможностями. Например, мобильные устройства, скорее всего, имеют датчик расположения и камеру, в то время как настольные устройства могут не иметь. Ваше приложение может определить, какие возможности доступны и включить элементы управления, которые используют их.
  • Оптимизируйте входные данные. Вы можете изменить порядок элементов пользовательского интерфейса для оптимизации для определенных типов входных данных. Например, если вы размещаете элементы навигации в нижней части приложения, они будут проще для мобильных пользователей для доступа. Но классические пользователи часто ожидают видеть элементы навигации в верхней части приложения.

При оптимизации пользовательского интерфейса приложения для определенных платформ и идиом устройств вы создаете адаптивный пользовательский интерфейс. Основные подходы к созданию адаптивного пользовательского интерфейса в .NET MAUI включают использование OnPlatform расширения разметки и OnIdiom расширения разметки.

Примечание.

Существует категория триггеров, известных как триггеры состояния, которые можно использовать для настройки внешнего вида пользовательского интерфейса в определенных сценариях, таких как при изменении ориентации устройства. Дополнительные сведения см. в разделе "Триггер состояния".

Настройка внешнего вида пользовательского интерфейса на основе платформы

Расширение разметки OnPlatform позволяет настраивать внешний вид пользовательского интерфейса для каждой платформы. Он предоставляет те же функции, что OnPlatform<T> и On классы, но с более кратким представлением.

Расширение разметки OnPlatform поддерживается классом OnPlatformExtension, определяющим следующие свойства:

  • DefaultobjectТип , который вы задаете значение по умолчанию для применения к свойствам, представляющим платформы.
  • AndroidobjectТип , который вы задали значение, которое будет применяться в Android.
  • iOSobjectТип , который вы задали значение, которое будет применяться к iOS.
  • MacCatalystobjectТип , который вы задали значение, которое будет применено к Mac Catalyst.
  • TizenobjectТип , который вы задали значение, которое будет применяться на платформе Tizen.
  • WinUIobjectТип , который вы устанавливаете значение, которое будет применяться к WinUI.
  • ConverterIValueConverterтипа, который можно задать для IValueConverter реализации.
  • ConverterParameterobjectТипа, который можно задать для передачи в реализацию IValueConverter значение.

Примечание.

Средство синтаксического анализа XAML позволяет сократить класс OnPlatformExtension как OnPlatform.

Свойство Default является свойством содержимого OnPlatformExtension. Поэтому для выражений разметки XAML, выраженных с фигурными скобками, можно исключить Default= часть выражения, если это первый аргумент. Default Если свойство не задано, оно по умолчанию соответствует BindableProperty.DefaultValue значению свойства, если расширение разметки предназначено для BindableProperty.

Внимание

Средство синтаксического анализа XAML ожидает, что значения правильного типа будут предоставлены свойствам, используюющим OnPlatform расширение разметки. Если требуется преобразование типов, OnPlatform расширение разметки попытается выполнить его с помощью преобразователей по умолчанию, предоставляемых .NET MAUI. Однако существуют некоторые преобразования типов, которые не могут выполняться преобразователями по умолчанию, и в этих случаях Converter свойство должно быть установлено в реализацию IValueConverter .

На странице демонстрации OnPlatform показано, как использовать расширение разметки OnPlatform :

<BoxView Color="{OnPlatform Yellow, iOS=Red, Android=Green}"
         WidthRequest="{OnPlatform 250, iOS=200, Android=300}"
         HeightRequest="{OnPlatform 250, iOS=200, Android=300}"
         HorizontalOptions="Center" />

В этом примере все три OnPlatform выражения используют сокращенную версию OnPlatformExtension имени класса. OnPlatform Три расширения разметки задают HeightRequest xref:Microsoft.Maui.Graphics.ColorWidthRequestсвойства и свойства различных значений BoxView в iOS и Android. Расширения разметки также предоставляют значения по умолчанию для этих свойств на платформах, которые не указаны, при устранении Default= части выражения.

Настройка внешнего вида пользовательского интерфейса на основе идиомы устройства

Расширение OnIdiom разметки позволяет настраивать внешний вид пользовательского интерфейса на основе идиомы устройства, на котором запущено приложение. Он поддерживается классом OnIdiomExtension , который определяет следующие свойства:

  • DefaultobjectТип , который вы задаете значение по умолчанию для применения к свойствам, представляющим идиомы устройства.
  • Phone, тип object, который вы задали значение, которое будет применяться на телефонах.
  • TabletobjectТип , который вы задаете значение, которое будет применяться на планшетах. Это свойство не является эксклюзивным для платформ Android и iOS.
  • Desktopobjectтип, который вы устанавливаете для применения значения на настольных платформах. Обратите внимание, что некоторые ноутбуки могут классифицироваться с помощью Tablet свойства.
  • TVobjectтип, который вы устанавливаете для применения значения на телевизионных платформах.
  • WatchobjectТип , который вы устанавливаете значение, которое будет применяться на платформах Watch.
  • ConverterIValueConverterтипа, который можно задать для IValueConverter реализации.
  • ConverterParameterobjectТипа, который можно задать для передачи в реализацию IValueConverter значение.

Примечание.

Средство синтаксического анализа XAML позволяет сократить класс OnIdiomExtension как OnIdiom.

Свойство Default является свойством содержимого OnIdiomExtension. Поэтому для выражений разметки XAML, выраженных с фигурными скобками, можно исключить Default= часть выражения, если это первый аргумент.

Внимание

Средство синтаксического анализа XAML ожидает, что значения правильного типа будут предоставлены свойствам, используюющим OnIdiom расширение разметки. Если требуется преобразование типов, OnIdiom расширение разметки попытается выполнить его с помощью преобразователей по умолчанию, предоставляемых .NET MAUI. Однако существуют некоторые преобразования типов, которые не могут выполняться преобразователями по умолчанию, и в этих случаях Converter свойство должно быть установлено в реализацию IValueConverter .

В следующем примере XAML показано, как использовать расширение разметки OnIdiom :

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

В этом примере все три OnIdiom выражения используют сокращенную версию OnIdiomExtension имени класса. OnIdiom Три расширения разметки задают HeightRequest ColorWidthRequestи свойства BoxView различных значений на телефоне, планшете и настольных идиомах. Расширения разметки также предоставляют значения по умолчанию для этих свойств в идиомах, которые не указаны, при этом устраняя Default= часть выражения.