Обзор визуального слоя

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

Типы в Microsoft.UI.Composition формируют реализацию визуального слоя в Windows App SDK/WinUI 3.

Важные моменты:

• Знакомые API WinRT
• Спроектирован для более динамичного пользовательского интерфейса и более богатых взаимодействий
• Основные понятия, согласованные с инструментами проектирования
• Линейная масштабируемость без внезапных скал производительности

Ваши приложения WinUI и Windows App SDK уже используют визуальный слой через один из фреймворков пользовательского интерфейса. Вы также можете воспользоваться преимуществами визуального слоя непосредственно для пользовательской отрисовки, эффектов и анимаций с очень небольшими усилиями.

Что такое визуальный слой?

Основными функциями визуального слоя являются:

1. Содержимое: легкий композитинг пользовательского рисованного содержимого
2. Эффекты: Система эффектов пользовательского интерфейса в режиме реального времени, которые можно анимировать, связывать и настраивать.
3. Анимации: экспрессивные, не зависящие от платформы анимации, работающие независимо от потока пользовательского интерфейса.

Content

Содержимое размещается, преобразуется и становится доступным для использования системой анимации и эффектов с помощью визуальных элементов. В основе иерархии классов находится класс Visual, облегчённый потоково-гибкий прокси-сервер в процессе приложения для визуального состояния в композиторе. Подклассы Visual включают ContainerVisual, чтобы дочерние элементы могли создавать деревья визуальных элементов, и SpriteVisual, которые включают содержимое и могут быть созданы с использованием сплошных цветов, вручную нарисованного содержимого или визуальных эффектов. Эти типы визуальных элементов вместе составляют структуру визуального дерева для 2D пользовательского интерфейса и задних, наиболее видимых XAML FrameworkElements.

Для получения дополнительной информации см. обзор Composition Visual.

Эффекты

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

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

Дополнительные сведения см. в обзоре эффектов композиции .

Анимации

Система анимации в слое визуализации позволяет перемещать визуальные элементы, анимировать эффекты и управлять трансформациями, клипами и другими свойствами. Это не зависящая от платформы система, разработанная с нуля с учетом производительности. Он выполняется независимо от потока пользовательского интерфейса, чтобы обеспечить плавность и масштабируемость. Хотя он позволяет использовать знакомые анимации KeyFrame для изменения свойств с течением времени, он также позволяет настраивать математические связи между различными свойствами. Это включает входные данные пользователей, позволяя напрямую создавать плавные хореографические взаимодействия.

Для получения более подробной информации, см. обзор композиций анимации.

Работа с WinUI XAML

Вы можете получить доступ к Visual, созданному платформой XAML, и поддержать видимый FrameworkElement, используя класс ElementCompositionPreview в Microsoft.UI.Xaml.Hosting. Обратите внимание, что визуальные элементы, созданные для вас с помощью фреймворка, имеют некоторые ограничения на настройку. Это связано с тем, что фреймворк управляет смещениями, преобразованиями и сроками действия. Однако вы можете создать собственные визуальные элементы и присоединить их к существующему элементу WinUI с помощью ElementCompositionPreview или добавить их в существующий ContainerVisual в любой части структуры визуального дерева.

Дополнительные сведения см. в обзоре использования визуального слоя с XAML .

Работа с настольным приложением

С помощью визуального слоя можно улучшить внешний вид, интерфейс и функциональные возможности классических приложений Win32, созданных с помощью пакета SDK для приложений Windows, а также классических приложений WPF, Windows Forms и C++ Win32. Вы можете перенести острова содержимого для использования визуального слоя и сохранить остальную часть пользовательского интерфейса в существующей платформе. Это означает, что вы можете вносить значительные обновления и усовершенствования в пользовательский интерфейс приложения без необходимости вносить значительные изменения в существующую базу кода.

Дополнительные сведения см. в разделе Использование визуального уровня в настольных приложениях.

Различия от UWP

Пространство имен Microsoft.UI.Composition предоставляет доступ к функциям, почти идентичным визуальному уровню UWP (Windows.UI.Composition), в наиболее часто используемых сценариях. Но существуют исключения и различия.

Получение экземпляра Compositor

В настольных приложениях (приложение WinUI является настольным приложением), Window.Current — null. Поэтому вы не можете получить экземпляр Compositor из Window.Current.Compositor. В приложениях WinUI рекомендуется вызывать ElementCompositionPreview.GetElementVisual(UIElement), чтобы получить композиционный визуальный элемент, а Compositor — из свойства Compositor этого визуального элемента. В случаях, когда у вас нет доступа к UIElement (например, если вы создаете CompositionBrush в библиотеке классов), можно вызвать CompositionTarget.GetCompositorForCurrentThread.

Внешнее содержимое

Композитор Microsoft.UI.Composition работает полностью в приложении Windows App SDK и имеет доступ только к пикселям, которые он нарисовал. Это означает, что любое внешнее содержимое (содержимое, которое не было нарисовано компостором), неизвестно компостатору, что создает определенные ограничения.

Примером внешнего содержимого является MediaPlayerElement (Microsoft.UI.Xaml.Controls). Стек мультимедиа Windows предоставляет XAML непрозрачный дескриптор цепочки обмена мультимедиа. XAML передает этот дескриптор композитору, который, в свою очередь, передает его Windows (через Windows.UI.Composition) для отображения. Поскольку композитор не может видеть ни одного из пикселей в цепочке мультимедиа-буферов, он не может использовать их в составе общей отрисовки окна. Вместо этого он предоставляет цепочку обмена медиа-данными Windows для отрисовки под отрисовкой композитора, с отверстием, вырезанным из отрисовки композитора, чтобы позволить цепочке обмена медиа-данными под ним быть видимой.

В пакете SDK для приложений Windows или WinUI все api создают внешнее содержимое:

• MediaPlayerElement
• SwapChainPanel
• WebView2
• MicaBackdrop и DesktopAcrylicBackdrop, а также базовые MicaController и DesktopAcrylicController, которые они используют.

Модель обработки внешнего содержимого создает следующие ограничения:

• Содержимое композитора не может находиться за внешним содержимым. Например, невозможно предоставить webView2 прозрачный фон, чтобы увидеть кнопки XAML или изображения за ним. Единственными вещами, которые могут находиться за внешним содержимым, являются другое внешнее содержимое и фон окна. По этой причине мы не рекомендуем использовать прозрачность для внешнего содержимого и отключаем её.
• Невозможно, чтобы композитор использовал образец данных из внешнего содержимого. Например, AcrylicBrush не может выбирать и размывать пиксели из MediaPlayerElement. AcrylicBrush будет выполнять выборку из изображения композитора, которое является прозрачным черным для внешних областей контента. Аналогично, AcrylicBrush перед MicaBackdrop или DesktopAcrylicBackdrop не может видеть какие-либо цвета, которые эти фоны будут рисовать; вместо этого, кисть будет размывать прозрачный черный.
• Другой сценарий называется инвертированием назначения, который используется для инвертирования пикселей перед текстовым курсором в элементах управления текстовым полем. Это инвертирование также берет образцы с поверхности композитора, и процесс будет затронут, если текстовое поле не имеет непрозрачного фона, отображаемого композитором.
• Поскольку WinUI SwapChainPanel создает внешнее содержимое, оно не поддерживает прозрачность. Кроме того, он не поддерживает применение AcrylicBrush и других эффектов, которые используют CompositionBackdropBrush перед ним.

Образцы

Проект примеров пакета SDK для приложений Для Windows содержит полный набор примеров композиции, демонстрирующих использование API Microsoft.UI.Composition для создания расширенных визуальных возможностей. Эти примеры охватывают широкий спектр сценариев — от базового макета и преобразования до расширенных эффектов, освещения, теней и обработки входных данных с использованием InteractionTracker, таких как обновление путем вытягивания и параллаксная прокрутка. Независимо от того, начинаете ли вы работу с визуальным слоем или ищете шаблоны для применения в собственном приложении, эти примеры являются практической ссылкой на то, как соединяются стандартные блоки.

Ознакомьтесь с примерами на GitHub: WindowsAppSDK-Samples / SceneGraph.

Связанные темы

• Справочник по API Microsoft.UI.Composition
• Использование визуального слоя в классических приложениях