Использование современных тем

Пользователи приложений на основе модели с современным обновленным интерфейсом для приложений на основе модели могут использовать обновленные стили, соответствующие системе дизайна Microsoft Fluent 2. Поскольку современный обновленный интерфейс основывается на новой системе тем, классические темы не учитываются, однако создатели могут изменять цвета, используемые в заголовке приложений, для пользователей, у которых включен современный обновленный интерфейс. Из этой статьи вы узнаете о переопределениях стилей, доступных в современном обновленном виде, и о том, как внедрить из в своей организации.

Примечание

Современные темы в настоящее время поддерживают только настройку заголовка приложения. Другие настройки, такие как настройка элемента управления "поток бизнес-процесса", недоступны.

Изменение цветов заголовка приложения

Если в приложении включен современный обновленный интерфейс, создатели приложения могут изменять цвета, используемые в заголовке приложения, в соответствии с фирменной символикой своих организаций. Для этого нужно инкапсулировать желаемые цвета в ресурс XML, задать параметр приложения, чтобы указать на этот веб-ресурс, а затем проверить, соответствуют ли изменения цвета ожиданиям.

Примечание

Эта функциональность доступна в сборке 9.2.23094 и выше.

Обзор ресурса XML, используемого для задания цветов заголовка приложения

Первым шагом к изменению стилей заголовка приложения является создание XML-файла с выбранными цветами. Позже вы создадите веб-ресурс XML с одним или несколькими из следующих атрибутов, определенных внутри тега AppHeaderColors.

  • Background — цвет фона заголовка приложения. Этот элемент должен быть определен, чтобы какие-либо изменения вступили в силу.
  • Foreground — цвет текста заголовка приложения. Если этот параметр не задан, система пытается вычислить подходящий цвет, который будет достаточно контрастным по отношению к указанному цветом фона.
  • BackgroundHover – цвет фона кнопок в заголовке приложения при наведении на них курсора. Если значение не указано, система вычисляет цвет на основе цвета фона.
  • ForegroundHover – цвет текста кнопок в заголовке приложения при наведении на них курсора. Если значение не указано, система пытается вычислить подходящий цвет, который будет достаточно контрастным по отношению к цвету backgroundHover.
  • BackgroundPressed – цвет фона кнопок в заголовке приложения при их нажатии. Логика определения цвета по умолчанию такая же, как и для BackgroundHover.
  • ForegroundPressed – цвет текста кнопок в заголовке приложения при их нажатии. Логика определения цвета по умолчанию такая же, как и для foregroundHover.
  • BackgroundSelected – цвет фона кнопок в заголовке приложения при их выборе. Логика определения цвета по умолчанию такая же, как и для BackgroundHover.
  • ForegroundSelected – цвет текста кнопок в заголовке приложения при их выборе. Логика определения цвета по умолчанию такая же, как и для BackgroundHover.

Пример XML для современной темы

Например, в этом XML-коде для заголовка приложения задан зеленый цвет фона с белым текстом и более темные цвета фона для различных состояний взаимодействия с кнопками. Для оптимального удобства использования мы рекомендуем указывать разные значения цвета для каждого состояния.

<AppHeaderColors 
  background="#12783F"
  foreground="#FFFFFF" 
  backgroundHover="#165A31" 
  foregroundHover="#FFFFFF"
  backgroundPressed="#0F1C12"
  foregroundPressed="#FFFFFF"
  backgroundSelected="#153D23" 
  foregroundSelected="#FFFFFF"
/>

Создание веб-ресурса

  1. С помощью текстового редактора или редактора XML сохраните XML-код, используемый для создания веб-ресурса. Пример XML для современной темы
  2. Выполните вход в Power Apps.
  3. Выберите Решения на левой панели навигации, а затем выберите Создать решение.
  4. Выберите Создать > Еще > Веб-ресурс.
  5. В области свойств "Создание веб-ресурса" введите следующие значения:
    • Отображаемое имя: введите отображаемое имя, например XML, для современных тем.
    • Имя. Введите уникальное имя для веб-ресурса.
    • Тип: Данные (XML)
  6. Выберите Выбрать файл, найдите и выберите ранее созданный XML-файл с темой.
  7. Выберите Сохранить. Для публикации этой настройки выполните действия, описанные в следующем разделе.

Применение пользовательских цветов заголовка приложения к приложениям в среде

После того как вы выбрали цвета и создали веб-ресурс, выполните следующие действия, чтобы включить эти стили заголовка приложения для всех приложений в вашей среде, для которых включен «Новый интерфейс».

  1. В решении, которое вы использовали для создания веб-ресурса, выберите Добавить существующий > Еще > Параметр.
  2. Введите Переопределить в поле Поиск, выберите Переопределить цвет заголовка приложения, выберите Далее, а затем выберите Добавить.
  3. В решении выберите Переопределить цвет заголовка приложения, а затем выберите Изменить на панели команд.
  4. На правой панели свойств Редактирование переопределения цвета заголовка приложения выберите Настройка значения среды и введите уникальное имя веб-ресурса, который вы создали ранее.
  5. Выберите Сохранить.
  6. На панели команд выберите Опубликовать все настройки. (Эта команда появляется, когда в решении не выбраны никакие компоненты.)

С цветами из примера выше после обновления или запуска приложения заголовок приложения должен выглядеть так.
Зеленый заголовок приложения в приложении на основе модели

Проверка новых цветов заголовка приложения

После публикации новых цветов заголовка приложения необходимо проверить визуальные элементы заголовка приложения, включая все состояния кнопок, чтобы убедиться, что все отображается так, как вы рассчитывали, и что контрастность достаточна для поддержки специальных возможностей. Необходимо проверить следующее:

  • Для заголовка приложения в состоянии покоя и для каждого состояния взаимодействия кнопок отображаются желаемые цвета.
  • Контрастность между цветами переднего плана и фона для состояния покоя и каждого состояния взаимодействия кнопок составляет не менее 4,5:1.

См. также

Современный обновленный интерфейс

Примечание

Каковы ваши предпочтения в отношении языка документации? Пройдите краткий опрос (обратите внимание, что этот опрос представлен на английском языке).

Опрос займет около семи минут. Личные данные не собираются (заявление о конфиденциальности).