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


Xamarin.Forms динамическое визуальное дерево

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

Требования

  • Используйте Xamarin.Forms версию 5.0 или более поздней версии.
  • Включено только Горячая перезагрузка изменений (оно включено по умолчанию).

Использование

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

  • Windows: по умолчанию она отображается в левой части интегрированной среды разработки. Если он не отображается, используйте отладочное > дерево Визуального дерева Windows > Live, чтобы отобразить его.
  • Mac: по умолчанию он отображается в правой среде разработки. Если он не отображается, используйте представление дерева визуального элемента Windows > Live для просмотра>.

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

Панель инструментов динамического визуального дерева

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

Примечание.

Visual Studio для Mac в настоящее время не поддерживает Только функция My XAML.

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

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

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

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