Материал мики

Мика является непрозрачным, динамическим материалом, который включает темы и фон рабочего стола для оформления фона долговременных окон, таких как приложения и параметры. Вы можете применить Mica к фону приложения, чтобы радовать пользователей и создавать визуальную иерархию, повышая производительность, увеличивая ясность о том, какое окно находится в фокусе. Mica специально разработан для повышения производительности приложений, так как создает образец рисунка рабочего стола только один раз для создания визуализации.

изображение героя

Мика в светлой теме
Мика в светлой теме

Мика в темной теме
Мика в темной теме

Мика Alt — это разновидность Mica, с более насыщенным оттенком цвета фона рабочего стола пользователя. Вы можете применить Mica Alt к фону приложения, чтобы обеспечить более глубокую визуальную иерархию, чем Мика, особенно при создании приложения с вкладками заголовка. Mica Alt доступен для приложений, использующих Windows App SDK 1.1 или более поздней версии, при работе с Windows 11 версии 22000 или более поздней.

Эти изображения показывают разницу между «Мика» и «Мика Alt» в строке заголовка с вкладками. Первое изображение использует Mica, а второе — Mica Alt.

Снимок экрана: Мика в строке заголовка с вкладками.

Снимок экрана: Mica Alt в строке заголовка с вкладками.

Когда следует использовать Mica или Mica Alt

Мика и Мика Alt — это материалы, которые располагаются на фоне вашего приложения, позади всего другого содержимого. Каждый материал непрозрачн и включает тему пользователя и обои на рабочем столе, чтобы создать его высокоперсонализированный внешний вид. Когда пользователь перемещает окно по экрану, материал Mica динамически адаптируется для создания полнофункциональных визуализаций с помощью фонового рисунка под приложением. Кроме того, этот материал помогает пользователям сосредоточиться на текущей задаче, возвращаясь к нейтральному цвету, когда приложение неактивно.

Рекомендуется применить Mica или Mica Alt в качестве базового слоя приложения и определить приоритет видимости в области заголовков. В разделе «Слоения и Возвышения» и в разделе «Слоения приложений с Mica» этой статьи см. дополнительные инструкции по слоям.

Удобство использования и адаптируемость

Материалы Mica автоматически адаптируют свой внешний вид для широкого спектра устройств и условий. Они предназначены для повышения производительности, так как они фиксируют фоновые обои только один раз, чтобы создать их визуализации.

В режиме высокой контрастности пользователи продолжают видеть знакомый цвет фона по своему выбору вместо Mica или Mica Alt. Кроме того, Mica-материалы будут отображаться как сплошной цвет резерва (SolidBackgroundFillColorBase для Mica, SolidBackgroundFillColorBaseAlt для Mica Alt), когда:

  • Пользователь отключает прозрачность в параметрах > персонализации > цвета.
  • Режим экономии батареи активируется.
  • Приложение выполняется на низком оборудовании.
  • Окно приложения на рабочем столе деактивируется.
  • Версия Windows ниже 22000.

Многослойность приложений с Mica

Стандартный уровень содержимого шаблона
Стандартный уровень содержимого

Слой содержимого шаблона карточки
уровня содержимого шаблона карточки

Мика идеально подходит в качестве базового слоя в иерархии вашего приложения из-за его неактивных и активных состояний и тонкой персонализации. Чтобы следовать двухуровневой системе слоев и повышения уровня , мы рекомендуем применить Mica в качестве базового слоя приложения и добавить дополнительный слой содержимого, который находится на вершине базового слоя. Слой содержимого должен прикрыть материал за ним, Мика, используя LayerFillColorDefaultBrush, низкопрозрачный сплошной цвет в качестве его фона. Рекомендуемые шаблоны слоя содержимого:

  • Стандартный шаблон: непрерывный фон для больших областей, которым требуется отдельная иерархическая дифференциация от базового слоя. Это LayerFillColorDefaultBrush должно применяться к фонам контейнеров для элементов поверхности приложения WinUI 3 (например, Grid, StackPanels, Frames и т. д.).
  • Шаблон карточки: сегментированные карточки для приложений, разработанных с несколькими разделами и неразрывными компонентами пользовательского интерфейса. Для определения пользовательского интерфейса карточки с помощью LayerFillColorDefaultBrush, смотрите руководство слоистости и возвышения.

Чтобы придать окну вашего приложения бесшовный внешний вид, Mica должна быть видна в строке заголовка, если вы решите применить материал к вашему приложению. Вы можете отобразить Мику в строке заголовка, расширив приложение в не клиентскую область и создав прозрачную настраиваемую строку заголовка. Дополнительные сведения см. в строке заголовка.

В следующих примерах показаны распространенные реализации стратегии слоев в NavigationView , где Mica отображается в области заголовков.

  • Стандартный шаблон в left NavigationView.
  • Стандартный шаблон в Top NavigationView.
  • Шаблон карточки в панели навигации слева.

Стандартный шаблон в навигационном представлении слева

По умолчанию NavigationView в левом режиме включает слой содержимого в его области содержимого. В этом примере Mica расширяется на область панели заголовка и создает пользовательскую строку заголовка.

Представление навигации в стандартном шаблоне с настраиваемой строкой заголовка в левом режиме

Стандартный шаблон в Top NavigationView

По умолчанию NavigationView в верхнем режиме включает слой содержимого в его области содержимого. В этом примере Mica расширяется на область панели заголовка и создает пользовательскую строку заголовка.

NavigationView в стандартном шаблоне с настраиваемой строкой заголовка в верхнем режиме

Шаблон карточки в левой панели навигации

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

NavigationView в стандартном шаблоне с настраиваемой строкой заголовка в левом режиме

Слои приложений с Mica Alt

Мика Alt является альтернативным вариантом Mica в качестве базового слоя в иерархии вашего приложения, обладая теми же функциями, как неактивные и активные состояния и ненавязчивая персонализация. Мы рекомендуем применить Mica ALT в качестве базового слоя приложения, если вам требуется контраст между элементами строки заголовка и областями команд приложения (например, навигация, меню).

Распространенный сценарий использования Mica Alt — это при создании приложения с помощью панели заголовка с вкладками. Чтобы следовать инструкциям по Слоям и высотам, мы рекомендуем применять Mica Alt в качестве базового слоя приложения, добавить командный слой, расположенный поверх базового слоя, и, наконец, добавить дополнительный слой содержимого, который находится поверх командного уровня. Командующий слой должен улавливать материал позади него, "Мика Alt", используя LayerOnMicaBaseAltFillColorDefaultBrush, низкопрозрачный сплошной цвет в качестве фона. Слой содержимого должен охватывать слои под ним, используя LayerFillColorDefaultBrush, другой сплошной цвет с низкой непрозрачностью. Система слоев выглядит следующим образом:

  • Мика Alt: базовый слой.
  • Уровень команд. Требуется отдельная иерархическая дифференцировка от базового слоя. LayerOnMicaBaseAltFillColorDefaultBrush должен применяться к командным областям поверхностей вашего приложения WinUI (например, в MenuBar, навигационной структуре и т. д.).
  • Слой содержимого: непрерывный фон для больших областей, которым требуется отдельная иерархическая дифференциация от уровня команд. Должен применяться к фонам контейнеров вашего приложения WinUI (например, Сетки, StackPanels, Фреймы и т. д.).

Чтобы обеспечить простой внешний вид окна приложения, Mica Alt должна отображаться в заголовке окна, если вы решили применить материал к вашему приложению. Вы можете отобразить Mica Alt в строке заголовка, расширив приложение в не клиентскую область и создав прозрачную пользовательскую строку заголовка.

Рекомендации

  • Установите фон прозрачным для всех слоев, где вы хотите, чтобы эффект Mica был виден.
  • Не применяйте материал фона более одного раза в приложении.
  • Не применяйте материал фона к элементу пользовательского интерфейса. Материал фона не будет отображаться на самом элементе. Он будет отображаться только в том случае, если все слои между элементом пользовательского интерфейса и окном заданы как прозрачные.

Примеры

Значок коллекции WinUI 3 Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из Microsoft Store или просмотрите исходный код GitHub.

Как использовать Mica

Сведения об использовании Mica в приложении WinUI см. в статье Применение материалов Mica или Acrylic в настольных приложениях для Windows 11.

Чтобы использовать Mica в приложении Win32, см. Применение Mica в классических приложениях Win32 для Windows 11.