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

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

  • Статья

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

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

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

При оптимизации пользовательского интерфейса приложения для определенных платформ и идиом устройств вы создаете адаптивный пользовательский интерфейс. Основной подход к созданию адаптивного пользовательского интерфейса в .NET MAUI включает использование классов OnPlatform<T> и OnIdiom<T>. Альтернативный подход — использовать расширения разметки XAML OnPlatform и OnIdiom. Однако эти расширения разметки не являются безопасными. Дополнительные сведения о расширениях разметки см. в разделе Настройка внешнего вида пользовательского интерфейса с помощью расширений разметки.

Заметка

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

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

Классы OnPlatform<T> и On позволяют настраивать внешний вид пользовательского интерфейса на основе платформы:

<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> является универсальным классом и поэтому необходимо указать аргумент универсального типа, в данном случае Thickness, который является типом свойства Padding. Это достигается с помощью атрибута XAML x:TypeArguments. Класс OnPlatform<T> определяет свойство Default, которое можно задать для значения, которое будет применяться ко всем платформам:

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

В этом примере свойство Padding имеет разные значения в iOS и Android, а другие платформы задают значение по умолчанию.

Класс OnPlatform<T> также определяет свойство Platforms, которое является IList объектов On. Каждый объект On может задать свойство Platform и Value для определения значения Thickness для конкретной платформы. Кроме того, свойство On.Platform имеет тип IList<string>, поэтому можно включить несколько платформ с разделителями-запятыми, если значения одинаковы:

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

Предоставление неверного Platform значения не приведет к ошибке. Вместо этого ваш XAML будет выполняться без применения значения, специфического для платформы.

Заметка

Если свойство Value объекта On не может быть представлено одной строкой, можно определить для него элементы свойств.

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

Класс OnIdiom<T> позволяет настраивать внешний вид пользовательского интерфейса на основе идиома устройства, на котором работает приложение:

<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>
        </OnPlatform>
    </ContentPage.Margin>
    ...
</ContentPage>

OnIdiom<T> является универсальным классом и поэтому необходимо указать аргумент универсального типа, в данном случае Thickness, который является типом свойства Margin. Это достигается с помощью атрибута XAML x:TypeArguments. Класс OnIdiom<T> определяет свойство Default, которое можно задать для значения, которое будет применяться ко всем платформам:

<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>
        </OnPlatform>
    </ContentPage.Margin>
    ...
</ContentPage>

В этом примере свойство Margin имеет определенное значение в идиомах рабочего стола, а другие идиомы задаются значением по умолчанию.

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

Внешний вид пользовательского интерфейса также можно настроить с помощью расширений разметки OnPlatform и OnIdiom. Однако эти расширения разметки не являются безопасными.

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

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

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

  • Defaultтипа object, которое вы устанавливаете как значение по умолчанию для применения к свойствам, представляющим платформы.
  • Androidтипа object, которому вы устанавливаете значение для применения на Android.
  • iOS, тип object, которому вы установили значение, чтобы оно применялось для iOS.
  • MacCatalystтипа object, которому вы задали значение для применения на Mac Catalyst.
  • Tizenтипа object, установленный на значение, которое будет применено на платформе Tizen.
  • WinUIтипа object, которому вы назначаете значение для применения в WinUI.
  • Converterтипа IValueConverter, который можно задать для реализации IValueConverter.
  • Элемент ConverterParameterтипа object, который можно установить в значение для передачи в реализацию IValueConverter.

Заметка

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

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

Важный

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

В следующем примере XAML показано, как использовать расширение разметки 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 устанавливают свойства Color, WidthRequestи HeightRequest объекта BoxView на разные значения в iOS и Android. Расширения разметки также предоставляют значения по умолчанию для этих свойств на платформах, которые не указаны, удаляя часть Default= в выражении.

Предупреждение

Расширение разметки OnPlatform не является безопасным для обрезки и не следует использовать с полной обрезкой или NativeAOT. Вместо этого следует использовать класс OnPlatform<T> для настройки внешнего вида пользовательского интерфейса на основе платформы. Дополнительные сведения см. в разделе Настройка внешнего вида пользовательского интерфейса на основе платформы, Обрезка приложения .NET MAUI и Собственное развертывание AOT.

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

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

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

  • Defaultтипа object, которому присваивается значение по умолчанию для применения к свойствам, представляющим идиомы устройств.
  • Phoneтипа object, которое вы устанавливаете на значение для применения к телефонам.
  • Tabletтипа object, которому вы назначаете значение для применения к планшетам. Это свойство не является эксклюзивным для платформ Android и iOS.
  • Desktopтипа object, значение которого вы устанавливаете для применения на настольных платформах. Обратите внимание, что некоторые ноутбуки могут быть классифицированы с помощью свойства Tablet.
  • TVтипа object, которому вы назначили значение, применяется на телевизионных платформах.
  • Watchтипа object, которое вы устанавливаете для применения значения на платформах watch.
  • Converter, типа IValueConverter, который можно настроить для реализации IValueConverter.
  • ConverterParameterтипа object, которое можно задать для передачи в реализацию 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 задают значения свойств Color, WidthRequestи HeightRequest для BoxView в режимах телефона, планшета и настольного компьютера. Расширения разметки также предоставляют значения по умолчанию для этих свойств в выражениях, которые не указаны, удаляя часть выражения Default=.

Предупреждение

Расширение разметки OnIdiom не является безопасным для обрезки и не следует использовать с полной обрезкой или NativeAOT. Вместо этого следует использовать класс OnIdiom<T> для настройки внешнего вида пользовательского интерфейса на основе идиомы устройства, на котором запущено приложение. Дополнительные сведения см. в статье Настройка внешнего вида пользовательского интерфейса на основе идиом устройства, Оптимизация приложения .NET MAUI и Развертывание с использованием Native AOT.