Средства разработки среды выполнения XAML для WinUI 3

Visual Studio включает набор средств выполнения, которые позволяют разрабатывать, выполнять итерацию и проверять XAML WinUI 3 во время работы приложения. При совместном использовании они обеспечивают быстрый цикл редактирования, перезагрузки и проверки, в котором вы видите свой настоящий пользовательский интерфейс — реальные стили, реальные шаблоны данных, реальные анимации, — а не статическое приближение.

Note

Конструктор Visual Studio XAML Designer (вкладка "Конструктор" с поддержкой перетаскивания) в настоящее время не поддерживает проекты WinUI 3. Если вы открыли .xaml файл и видите только редактор XML, установка не нарушена, конструктор недоступен для WinUI 3. Запрос на добавление функции отслеживается в Сообщество разработчиков: Добавить поддержку конструктора XAML для настольных приложений WinUI 3. Дополнительные сведения о инженерных усилиях см. в обсуждении WindowsAppSDK #4710.

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

Что вы будете использовать

инструмент Что делает Как открыть его
XAML-горячая перезагрузка Отправка изменений XAML в работающее приложение без перезапуска Автоматическое изменение любого .xaml файла при отладке
Динамическое визуальное дерево Отображает дерево элементов среды выполнения и позволяет выбирать элементы в приложении. Отладка>Окна>Динамическое визуальное дерево
Обозреватель динамических свойств Отображает и позволяет изменять каждое свойство выбранного элемента во время выполнения. Отладка>>Обозреватель свойств Windows Live
Предварительный просмотр XAML в реальном времени Отрисовывает запущенное приложение внутри Visual Studio, чтобы можно было проверить без переключения окон Отладка>> Windows XAML Live Preview

Tip

Закрепите Динамическое визуальное дерево и Обозреватель динамических свойств рядом. Вместе они дают подробное представление для проверки, в котором отображаются фактические значения во время выполнения.

Prerequisites

  • Visual Studio 2022 версии 17.0 или более поздней версии (XAML Горячая перезагрузка и динамическое визуальное дерево включены).
  • Проект WinUI 3 с помощью Windows App SDK. Чтобы создать проект WinUI 3, см. статью "Создание и запуск проекта WinUI 3 ".
  • Проект должен использовать .NET 6 или более поздней версии (C#) или использовать C++/WinRT.

Шаг 1. Запуск приложения в отладчике

Нажмите F5 (или Отладка>Начать отладку). XAML Горячая перезагрузка активируется автоматически при присоединении отладчика.

Панель инструментов XAML Горячая перезагрузка появляется во внутриприложенном наложении. Если этот параметр не отображается, убедитесь, что параметр включен:

  1. Перейдите к разделу Средства>Параметры>Отладка>XAML Горячая перезагрузка.
  2. Убедитесь, что установлен флажок Включить XAML Горячая перезагрузка.

Important

Для Горячая перезагрузка XAML требуется отладчик. Выполнение без отладки (CTRL+F5) отключает Горячая перезагрузка, динамическое визуальное дерево и обозреватель динамических свойств.

Шаг 2. Изменение XAML и мгновенное просмотр изменений

При запуске приложения переключитесь на любой .xaml файл в редакторе и внесите изменения, например измените Background цвет или добавьте новый Button. Выполняющееся приложение обновляется в течение секунды или двух без перезапуска.

Что Горячая перезагрузка может и не может сделать

Горячая перезагрузка обрабатывает наиболее распространенные изменения:

  • Добавление, удаление или изменение порядка элементов
  • Изменение значений свойств (цвета, поля, текст, размеры)
  • Добавление или изменение стилей и словарей ресурсов
  • Изменение содержимого шаблона данных

Для некоторых изменений требуется перезагрузка:

  • Добавление новых классов, обработчиков событий в файле кода программной части или изменений x:Class
  • App.xaml Изменение объединенных словарей (иногда)
  • Изменение x:Bind выражений, ссылающихся на новые свойства

Если Горячая перезагрузка не удается применить изменение, на панели инструментов отображается уведомление. Просто перезапустите приложение, чтобы забрать эти изменения.

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

Шаг 3. Проверка визуального дерева и свойств

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

Выделяйте элементы визуально

  1. На панели инструментов Интерактивное визуальное дерево включите Выбрать элемент в запущенном приложении (кнопка с перекрестием).
  2. Щелкните любой элемент в работающем приложении— дерево переходит к элементу, а обозреватель динамических свойств отображает его свойства.

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

Изменение свойств во время выполнения

В обозревателе динамических свойств можно изменить значения свойств в режиме реального времени. Рассмотрим пример.

  • Измените значение Margin, чтобы настроить интервал и сразу увидеть результат.
  • Установите Visibility в значение Collapsed, чтобы проверить, что произойдёт, когда элемент скрыт.
  • Настройте Height или Width, чтобы проверить адаптивность макета.

Эти изменения среды выполнения не сохраняются обратно в XAML-файл — они являются для экспериментирования. Когда вы найдете нужные значения, введите их в .xaml файл (где Горячая перезагрузка выбирает их и делает их постоянными).

Шаг 4. Использование динамической предварительной версии XAML

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

Чтобы открыть его, выполните отладку>Windows>XAML Live Preview.

Это особенно полезно при использовании одного монитора, когда переключаться по Alt+Tab между приложением и Visual Studio неудобно.

Дополнительные сведения см. в Интерактивный предварительный просмотр XAML.

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

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

Настройка игровой площадки

  1. Щёлкните правой кнопкой мыши проект в Обозреватель решений и выберите Добавить>Создать элемент>Пустая страница (WinUI 3). Назовите его UIPlayground.xaml.

  2. В UIPlayground.xaml добавьте ScrollViewer с разделами для каждого элемента управления или шаблона, который вы хотите опробовать:

    <Page
    x:Class="MyApp.UIPlayground"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ScrollViewer Padding="24">
        <StackPanel Spacing="24">

            <!-- Section: Buttons -->
            <TextBlock Text="Buttons" Style="{StaticResource SubtitleTextBlockStyle}"/>
            <StackPanel Orientation="Horizontal" Spacing="8">
                <Button Content="Standard"/>
                <Button Content="Accent" Style="{StaticResource AccentButtonStyle}"/>
                <ToggleButton Content="Toggle"/>
                <HyperlinkButton Content="Link" NavigateUri="https://learn.microsoft.com"/>
            </StackPanel>

            <!-- Section: Text input -->
            <TextBlock Text="Text input" Style="{StaticResource SubtitleTextBlockStyle}"/>
            <TextBox PlaceholderText="Type here..." Width="300" HorizontalAlignment="Left"/>
            <PasswordBox PlaceholderText="Password" Width="300" HorizontalAlignment="Left"/>

            <!-- Add more sections as needed -->

        </StackPanel>
    </ScrollViewer>
</Page>

  3. Сделайте детскую площадку легкой для доступа. Во время разработки задайте ее в качестве начальной страницы в App.xaml.cs:

    // In App.xaml.cs, OnLaunched method — swap in for quick playground access:
// rootFrame.Navigate(typeof(UIPlayground));

    Или, если ваше приложение использует NavigationView, добавьте пункт меню, который отображается только в отладочных сборках. Например, в коде главного окна:

    // In your main window or shell page constructor, after InitializeComponent():
#if DEBUG
    NavView.MenuItems.Add(new NavigationViewItem
    {
        Content = "UI Playground",
        Tag = typeof(UIPlayground)
    });
#endif

    где NavView — это x:Name вашего элемента управления NavigationView.

Использование детской площадки

  1. Нажмите клавишу F5 , чтобы запустить приложение и перейдите на страницу игровой площадки.
  2. .xaml Откройте файл рядом с запущенным приложением (или используйте динамическую предварительную версию XAML).
  3. Добавление или изменение элементов управления в редакторе XAML— Горячая перезагрузка мгновенно отправляет изменения.
  4. Используйте Live Visual Tree, чтобы щелкать по отрисованным элементам управления и просматривать их фактические параметры макета в Live Property Explorer.
  5. Когда вас устраивает, как выглядит элемент управления, скопируйте XAML в свою страницу.

Этот подход обеспечивает цикл «внести изменения — перезагрузить — проверить», и поскольку при этом выполняется реальный код, вы видите настоящие шаблоны данных, настоящие стили и настоящие анимации.

Сравнение подходов на этапе разработки и во время выполнения

Вот как распространенные задачи проектирования интерфейса соотносятся с инструментами среды выполнения:

задачи Инструмент среды выполнения
Добавление элемента управления на страницу Введите элемент XAML — IntelliSense автоматически дополняет тег и обязательные свойства.
Предварительный просмотр элемента управления Посмотрите это в запущенном приложении в реальном времени с помощью Горячая перезагрузка
Выбор элемента для проверки Используйте Live Visual Tree> (перекрестие)
Просмотр или изменение свойств Использование обозревателя динамических свойств
Настройка размера или положения Измените Width, Height, Margin в XAML или в обозревателе свойств в реальном времени

Советы по эффективному рабочему процессу

  • Используйте приложение «Галерея WinUI 3». Установите его из Microsoft Store или создайте его из GitHub. В нем показаны все элементы управления WinUI 3 с интерактивными примерами и готовыми к копированию XAML. Думайте об этом как о визуальном каталоге, который можно просмотреть перед написанием XAML.
  • Откройте страницу игровой площадки. Относитесь к этому как к постоянно обновляемому руководству по стилю для вашего приложения.
  • Использование d:DesignHeight и d:DesignWidth. Даже без конструктора эти атрибуты помогают работе IntelliSense и обеспечивают одинаковый размер страниц при их открытии в редакторе.
  • Объединить с окном ошибок привязки XAML. Откройте его в Отладка>Окна>Ошибки привязки XAML, чтобы выявить ошибки привязки, которые конструктор никогда бы вам не показал.
  • Используйте набор средств сообщества. Набор средств сообщества Windows предоставляет элементы управления и вспомогательные средства, которые сокращают объем макета, который требуется вручную кодировать.

Связанные материалы

  • Last updated on