XAML Live Preview: захват и редактирование пользовательского интерфейса настольного приложения

С помощью XAML Live Preview вы можете записать пользовательский интерфейс классического приложения и перенести его в закрепленное окно в Visual Studio, что упрощает использование горячей перезагрузки XAML для изменения приложения, а затем просматривать эти изменения в режиме реального времени при их внесении.

Анимация, показывающая предварительный просмотр XAML в реальном времени в действии.

Окно "Предварительный просмотр XAML в реальном времени"

Окно динамического просмотра XAML доступно во время отладки. Чтобы открыть его, перейдите в раздел Отладка>Windows>XAML Live Preview.

Начиная с Visual Studio 2022 версии 17.14, предварительная версия XAML Live и горячая перезагрузка XAML доступны во время разработки в приложениях .NET MAUI, а не только во время сеанса отладки. Устройства и эмуляторы Android также поддерживаются.

Снимок экрана: параметр

Или нажмите кнопку "Показать в режиме реального просмотра XAML" на панели инструментов приложения.

Снимок экрана: параметр

Снимок экрана: параметр

Прокрутка и масштабирование

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

  • Колесико мыши, как вертикальное, так и горизонтальное (если мышь поддерживает ее).
  • Сенсорная панель с прокруткой двумя пальцами, как по вертикали, так и по горизонтали.
  • Нажатие клавиши Ctrl в сочетании с перетаскиванием мыши.

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

  • Кнопки увеличения и уменьшения в левом нижнем углу.
  • Сочетание клавиш Ctrl+плюс (+) или Ctrl+минус (-), если вы предпочитаете использовать клавиатуру.
  • Нажатие клавиши Ctrl в сочетании с прокруткой колесика мыши или жест увеличения с помощью сенсорной панели. Дополнительный бонус за использование мыши заключается в поддержании области управления.

Анимация действий прокрутки и масштабирования в xaml Live Preview.

Выбор элемента

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

Анимация действия выбора элемента в XAML Live Preview.

Выбор элемента управляется двумя двумя кнопками панели инструментов (слева направо).

Снимок экрана: кнопки панели инструментов

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

  • Отображение сведений об элементе во время выбора — это кнопка переключателя, которая управляет отображением сведений о размере, цвете и шрифте элемента под мышью.
  • Show Just My XAML — это кнопка переключателя, которая управляет элементами, которые нужно выделить: все или только те элементы с исходным XAML, доступным в решении. Это поведение аналогично тому, что в динамическом визуальном дереве.

Выбор элемента управляется первыми четырьмя кнопками панели инструментов (слева направо).

Снимок экрана: кнопки панели инструментов

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

  • Выбор элемента запускает действие выбора элемента; Другими словами, он выделяет элементы при перемещении содержимого приложения в XAML Live Preview. Когда вы щелкаете по элементу, он выделяется в интерактивном визуальном дереве. Он также переходит к источнику, если включен выбранный элемент предварительной версии и доступен исходный XAML. Это поведение аналогично тому, что в динамическом визуальном дереве.
  • Отображение сведений об элементе во время выбора — это кнопка переключателя, которая управляет отображением сведений о размере, цвете и шрифте элемента под мышью.
  • Просто My XAML — это кнопка переключателя, которая управляет элементами, которые нужно выделить: все или только те элементы с исходным XAML, доступным в решении. Это поведение аналогично тому, что в динамическом визуальном дереве.
  • Предварительный просмотр выбранного элемента — это кнопка переключателя, которая управляет навигацией по исходному XAML при выборе элемента. Он отключен по умолчанию. Это поведение аналогично тому, что в динамическом визуальном дереве.

Правителей

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

И анимация линейок в движении.

Вторая группа кнопок панели инструментов управляет линейками, как показано ниже (слева направо):

Снимок экрана второй группы кнопок на панели инструментов линейки в XAML Live Preview.

  • Выберите цвет линейки. Изменяет цвет линеек.
  • Добавьте вертикальную линейку. Добавляет одну вертикальную линейку. Если щелкнуть эту кнопку несколько раз подряд, будут размещены новые линейки, чтобы они не перекрывали существующие линейки.
  • Добавьте горизонтальную линейку. Добавляет одну горизонтальную линейку, аналогичную вертикальной линейке.
  • Удалите все линейки. Удаляет все линейки одновременно.
  • Переключить видимость линейки. Показывает или скрывает все линейки одним щелчком мыши.

Снимок экрана второй группы кнопок на панели инструментов линейки в XAML Live Preview.

  • Добавьте вертикальную линейку. Добавляет одну вертикальную линейку. Если щелкнуть эту кнопку несколько раз подряд, будут размещены новые линейки, чтобы они не перекрывали существующие линейки.
  • Добавьте горизонтальную линейку. Добавляет одну горизонтальную линейку, аналогичную вертикальной линейке.
  • Удалите все линейки. Удаляет все линейки одновременно.
  • Выберите цвет линейки. Изменяет цвет линеек.
  • Переключить видимость линейки. Показывает или скрывает все линейки одним щелчком мыши.

Линейки поддерживают удобное использование с клавиатурой. Вы можете перемещаться между ними с помощью клавиши Tab. Клавиши со стрелками можно использовать для перемещения линеек по одному пикселю, или нажимать Ctrl вместе с клавишами со стрелками, чтобы перемещать их на 10 единиц приложения за раз. Ключ Del удаляет выбранную в данный момент линейку. Вы также можете удалить линейку с помощью мыши, нажав кнопку "Удалить линейку" рядом с меткой.

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

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

Приложения с несколькими окнами

Если в приложении несколько окон, можно выбрать окно для отображения с помощью поля со списком "Окно". Кроме того, нажмите кнопку "Показать в режиме реального просмотра XAML" на панели инструментов приложения, которая находится в окне предварительного просмотра.

Анимация функции приложения с несколькими окнами в XAML Live Preview.

Поддерживаемые платформы

Первоначальный выпуск Visual Studio 2022 поддерживает следующие платформы и сценарии отладки.

Платформа Выбор элементов и подсказка информации Правителей
WPF (Windows Presentation Foundation) Да Да
UWP (Универсальная платформа Windows) Да Да
Рабочий стол WinUI3 Да Да
.NET MAUI Да Да
Xamarin 5.0+ (Эмулятор Android) нет Да (px*)

Замечание

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

Ограничения

Xaml Live Preview работает путем записи снимка экрана приложения несколько раз в секунду и использует доступные API, такие как PrintWindow. Это зависит от следующих ограничений:

  • Если часть окна приложения отключена, то эта часть, скорее всего, не отображает изменения горячей перезагрузки XAML.
  • Окно может отказаться от записи снимка экрана ( и стать недоступным для XAML Live Preview) с помощью SetWindowDisplayAffinity с WDA_EXCLUDEFROMCAPTURE или DwmSetWindowAttribute с DWMWA_CLOAK.

Дальнейшие шаги

Узнайте больше о горячей перезагрузке XAML, которая тесно связана с динамической предварительной версией XAML.

Связанный контент

Заметки о выпуске Visual Studio 2022

  • Last updated on