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

Проверка визуального дерева приложения .NET MAUI

  • Статья

Многоплатформенный пользовательский интерфейс приложений .NET (.NET MAUI) Live Visual Tree — это функция Visual Studio, которая предоставляет представление элементов пользовательского интерфейса в работающем приложении .NET MAUI.

При запуске приложения .NET MAUI в конфигурации отладки с присоединенным отладчиком окно "Динамическое визуальное дерево" можно открыть, выбрав "Отладка > дерева visual Windows > Live" в строке меню Visual Studio:

Снимок экрана: окно

При условии, что Горячая перезагрузка включен, окно динамического визуального дерева отображает иерархию элементов пользовательского интерфейса приложения независимо от того, создан ли пользовательский интерфейс приложения с помощью XAML или C#. Однако вам придется отключить JIT-код XAML, чтобы отобразить иерархию элементов пользовательского интерфейса приложения для пользовательских интерфейсов, созданных с помощью C#.

Просто мой XAML

Представление элементов пользовательского интерфейса упрощено по умолчанию с помощью функции Just My XAML. В Visual Studio нажатие кнопки "Показать только мой XAML " отключает функцию и отображает все элементы пользовательского интерфейса в визуальном дереве:

Снимок экрана: все элементы пользовательского интерфейса в окне

Просто my XAML можно окончательно отключить, выбрав "Параметры > отладки > XAML" Горячая перезагрузка в строке меню Visual Studio. Затем в диалоговом окне "Параметры" убедитесь, что включение просто my XAML в динамическом визуальном дереве отключено:

Снимок экрана: кнопка Just My XAML, отключенная в окне

Поиск элемента пользовательского интерфейса

Структура пользовательского интерфейса XAML содержит много элементов, которые вам не нужны, и если у вас нет полного понимания исходного кода приложения, может возникнуть трудность при переходе по визуальному дереву, чтобы найти нужный элемент пользовательского интерфейса. Таким образом, в окне "Дерево визуального дерева в Windows Live" есть несколько подходов, которые позволяют использовать пользовательский интерфейс приложения для поиска элемента, который требуется проверить:

  • Выберите элемент в работающем приложении. Этот режим можно включить, щелкнув элемент Select в кнопке "Запуск приложения " на панели инструментов "Динамическое визуальное дерево ":

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

    Если этот режим включен, если вы можете выбрать элемент пользовательского интерфейса в приложении , окно "Динамическое визуальное дерево " автоматически обновляется, чтобы отобразить узел в дереве, соответствующем этому элементу.

  • Отображение графических элементов макета в работающем приложении. Этот режим можно включить, нажав кнопку "Макет отображения" в кнопке "Запуск приложения " на панели инструментов "Динамическое визуальное дерево ":

    Снимок экрана: элементы оформления макета отображения в кнопке

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

  • Предварительный просмотр выбора. Этот режим можно включить, нажав кнопку "Просмотреть выбранный элемент " на панели инструментов "Динамическое визуальное дерево ":

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

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