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

Использование визуального уровня в классических приложениях

  • Статья

Теперь API среды выполнения Windows можно использовать в классических приложениях, созданных не на платформе UWP, чтобы улучшить внешний вид и функции этих приложений (WPF, Windows Forms и C++ Win32) и воспользоваться новыми компонентами пользовательского интерфейса Windows, которые доступны только через UWP.

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

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

Короткое видео: пользовательский интерфейс, созданный с помощью визуального уровня

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

Создание визуально привлекательного пользовательского интерфейса в любом приложении Windows

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

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

Возможности визуального уровня

Кисти

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

Яйцо, созданное с помощью Material Creator

Яйцо, созданное с помощью демонстрационного приложения Material Creator.

Произведенный эффект

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

Источники света и материал

Источники света и материал, демонстрируемые в коллекции примеров пользовательского интерфейса Windows.

Анимации

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

Короткое видео: еще один пользовательский интерфейс, созданный с помощью визуального уровня

Движение, демонстрируемое в коллекции примеров пользовательского интерфейса Windows.

Сохранение существующей базы кода и поэтапное внедрение

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

Примеры и руководства

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

Win32

Windows Forms

WPF

Ограничения

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

  • Цепочки эффектов используют Win2D для описания эффектов. Пакет NuGet Win2D не поддерживается в классических приложениях, поэтому его потребуется перекомпилировать из исходного кода.
  • Чтобы выполнить проверку нажатия, необходимо выполнить вычисления границ путем самостоятельного обхода визуального дерева. Это не отличается от визуального уровня в UWP, за исключением случаев, когда отсутствует элемент XAML, к которому можно легко выполнить привязку для проверки нажатия.
  • В визуальном уровне нет примитива для отрисовки текста.
  • При совместном использовании двух различных технологий пользовательского интерфейса, таких как WPF и визуальный уровень, каждая из них отвечает за отрисовку собственных пикселей на экране. У них не может быть общих пикселей. В результате содержимое визуального уровня всегда отображается поверх другого содержимого пользовательского интерфейса. (Это называется проблемой воздушного пространства .) Возможно, потребуется выполнить дополнительное программирование и тестирование, чтобы содержимое визуального слоя изменялось с помощью пользовательского интерфейса узла и не occlude другого содержимого.
  • Для содержимого, размещенного в классическом приложении, размер или масштаб относительно DPI не изменяется автоматически. Могут потребоваться дополнительные действия, чтобы ваше содержимое учитывало изменения DPI. (Дополнительные сведения можно получить в руководствах по конкретным платформам.)

Дополнительные ресурсы

Справочник по API