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

Улучшение пользовательского интерфейса с помощью визуального слоя (пакет SDK для приложений Windows или WinUI 3)

  • Статья

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

Типы в Microsoft.UI.Composition формируют реализацию пакета SDK для приложений Windows или WinUI 3 визуального слоя. Это очень похоже на визуальный слой UWP, который реализуется в пространстве имен Windows.UI.Composition . Различия между двумя и отсутствующими функциями из пакета SDK для приложений Для Windows или Визуального слоя WinUI 3 подробно описаны ниже.

Различия от UWP

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

Пакет SDK для приложений Windows/WinUI 3 использует Microsoft.UI.Composition для описания дерева отдельных визуальных элементов. Затем эти визуальные элементы композитируются для создания полной отрисовки окна. Это очень похоже на работу Windows.UI.Composition (для приложений UWP). Но одно большое различие заключается в том, что состав microsoft.UI.Composition выполняется полностью в приложении пакета SDK для приложений для Приложений Windows. Он имеет доступ только к пикселям, которые он нарисовал. Это означает, что любое внешнее содержимое (содержимое, которое не было нарисовано компостором), неизвестно для компостора. Что создает определенные ограничения.

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

Схема отрисовки внешнего содержимого

Как правило, подход позволяет внешнему содержимому (например, цепочкам буферов) быть частью общей отрисовки окна; и он по-прежнему позволяет другим содержимому, нарисованным компостатором, перекрываться поверх внешнего содержимого, например, отрисовка XAML MediaTransportControls на вершине носителя. Но это не позволяет более расширенное взаимодействие эффектов с этим внешним содержимым. Это относится ко всем подходам, которые можно использовать для подключения цепочки буферов к представлению: либо через XAML (например, через SwapChainPanel), либо с помощью композиции (например, с помощью ICompositorInterop::CreateCompositionSurfaceForSwapChain).

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

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

  • Содержимое компостатора за внешним содержимым (т. е. за внешним уровнем или ниже внешних слоев) на схеме выше невозможно. Таким образом, например, невозможно предоставить webView2 прозрачный фон, чтобы увидеть кнопки XAML или изображения за ним. Единственными вещами, которые могут находиться за внешним содержимым, являются другие внешние содержимое и фон окна. Из-за этого мы не рекомендуем и отключаем прозрачность внешнего содержимого.
  • Невозможно использовать образец содержимого компостора из внешнего содержимого. Например, АкрилBrush не может выборки и размытия пикселей из MediaPlayerElement. АкрилБруш будет образцом на изображении компостора, который является прозрачным черным для внешних областей содержимого. Таким образом, что прозрачный черный будет то, что АкрилБуш размытия. Аналогичным образом, АкрилБруш перед MicaBackdrop или DesktopAcrylicBackdrop не может видеть какие-либо цвета, которые эти фоны будут рисовать, и вместо этого кисть будет размыть прозрачный черный.
  • Другой сценарий называется инвертированием назначения, который используется для ввода элементов управления текстовым полем для инвертирования пикселей, на которых находится курсор вставки текста. Это инвертировать аналогичные примеры из поверхности компостора, и оно будет влиять, если текстовое поле не имеет непрозрачного фона, нарисованного компостатором.
  • Так как WinUI 3 SwapChainPanel создает внешнее содержимое, оно не поддерживает прозрачность. Кроме того, он не поддерживает применение АкрилBrush и других эффектов, которые используют CompositionBackdropBrush перед ним. АкрилБруш и эти другие эффекты на основе CompositionBackdropBrush не могут образцы из SwapChainPanel.
  • В классических приложениях (приложение WinUI 3 — это классическое приложение), Window.Current — это null. Поэтому вы не можете получить экземпляр Compositor из Window.Current.Compositor. В приложениях XAML (как WinUI 3, так и UWP) рекомендуется вызывать ElementCompositionPreview.GetElementVisual(UIElement), чтобы получить визуальный элемент композиции и получить его Compositor из свойства Compositor визуального элемента. В случаях, когда у вас нет доступа к UIElement (например, при создании CompositionBrush в библиотеке классов), можно вызвать CompositionTarget.GetCompositorForCurrentThread.

Дополнительные сведения о визуальном слое см . в обзоре визуального слоя в документации по UWP. В большинстве случаев документация и примеры также применимы к Microsoft.UI.Composition.

Предварительные требования для использования Microsoft.UI.Composition

Чтобы использовать API Microsoft.UI.Composition в пакете SDK для приложений Windows или WinUI 3:

  1. Скачайте и установите последнюю версию пакета SDK для приложений Windows. Дополнительные сведения см. в статье "Начало разработки приложений Windows".
  2. Создайте проект, как описано в статье "Начало разработки приложений Windows" или следуйте инструкциям по использованию пакета SDK для приложений Windows в существующем проекте.

Дополнительные сведения о доступности Microsoft.UI.Composition в пакете SDK для приложений Windows/WinUI 3 см . в каналах выпуска.

Теперь мы обновили коллекцию примеров композиции Windows, чтобы получить зависимость от API композиции пакета SDK для приложений Windows. Посетите WindowsCompositionSamples , чтобы просмотреть API-интерфейсы Microsoft.UI.Composition в действии.

GIF приложения