Ағылшын тілінде оқу

Бөлісу құралы:

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

  • Мақала

Конструктор XAML в Visual Studio и Blend для Visual Studio предоставляет визуальный интерфейс для разработки приложений на основе XAML, таких как WPF и UWP. Вы можете создавать пользовательские интерфейсы для приложений, перетаскивая элементы управления из окна панели элементов (окно "Ресурсы" в Blend для Visual Studio) и устанавливая свойства в окне "Свойства". Вы также можете редактировать XAML непосредственно в представлении XAML.

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

Ескерім

Конструктор XAML WinUI 3 / .NET MAUI не поддерживается в Visual Studio 2022. Чтобы просматривать и изменять интерфейсы XAML в WinUI 3 / .NET MAUI во время работы приложения, используйте функцию горячей перезагрузки XAML для WinUI 3 / .NET MAUI. Дополнительную информацию см. на странице XAML Hot Reload.

Ескерім

Xamarin.Forms не поддерживает конструктор XAML. Чтобы просмотреть пользовательские интерфейсы XAML Xamarin.Forms и изменить их во время работы приложения, используйте горячую перезагрузку XAML для Xamarin.Forms. Дополнительные сведения см. на странице XAML горячей перезагрузки для Xamarin.Forms.

Рабочая область конструктора XAML

Рабочая область в конструкторе XAML состоит из нескольких элементов визуального интерфейса. К ним относятся артборд , поверхность визуального дизайна, редактор XAML, окно структуры документа (окно Objects and Timeline в Blend для Visual Studio) и окно свойств. Чтобы открыть конструктор XAML, щелкните правой кнопкой мыши файл XAML в обозревателе решений и выберите конструктор представлений.

Конструктор XAML предоставляет представление XAML и синхронизированное дизайнерское представление отрендеренного XAML-кода вашего приложения. С помощью XAML-файла, открытого в Visual Studio или Blend для Visual Studio, вы можете переключаться между представлением конструктора и представлением XAML с помощью вкладок конструктора и XAML. Вы можете использовать кнопку Переключение панелей в конструкторе XAML, чтобы изменить, какое окно отображается сверху: либо артборд, либо редактор XAML.

Режим дизайна

В режиме дизайна окно, содержащее артборд, является активным окном, и его можно использовать в качестве основной рабочей области. Его можно использовать для визуального проектирования страницы в приложении, добавляя, рисуя или изменяя элементы. Дополнительные сведения см. в статье "Работа с элементами в XAML-конструкторе". На этом рисунке показан макет в режиме проектирования.

Представление дизайна конструктора XAMLDesign view of XAML DesignerDesign view of XAML Designer

Эти функции доступны на артборде:

Линии привязки

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

Сетчатые рельсы

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

элементы оформления сетки

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

Декораторы сетки используются для управления шириной и высотой строк и столбцов сетки. Вы можете добавить новый столбец или строку, щелкнув по рельсам сетки. При добавлении новой строки или столбца для панели сетки с двумя или несколькими столбцами или строками мини-панель инструментов отображается за пределами рельса, которая позволяет явно задать ширину и высоту. Мини-панель инструментов позволяет задать параметры размера строк и столбцов сетки.

декоратор сетки в конструкторе XAML

изменение размера дескрипторов

Ручки изменения размера отображаются на выбранных элементах управления и позволяют изменять их размер. При изменении размера элемента управления значения ширины и высоты обычно отображаются, чтобы помочь вам настроить размер элемента управления. Дополнительные сведения об управлении элементами в представлении Design см. в статье Работа с элементами в конструкторе XAML.

поля

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

элементы оформления полей

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

Элемент обрабатывает

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

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

Команды режима конструктора

Эти команды доступны на этой панели инструментов:

Zoom

Масштабирование позволяет изменять размер поверхности дизайна. Вы можете масштабировать от 12,5% до 800% или выбрать параметры Подогнать под выделение и Подогнать все.

Отображение/скрытие сетки привязки

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

Включить/выключить привязку к линиям сетки

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

Переключение фона артборда

Переключается между светлым и темным фоном.

Включить или отключить привязку к линиям привязки

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

Отключить код проекта

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

Вид XAML

В XAML виде окно, содержащее редактор XAML, является активным окном, а редактор XAML является вашим основным инструментом разработки. Язык разметки расширяемых приложений (XAML) предоставляет декларативный словарь на основе XML для указания пользовательского интерфейса приложения. Представление XAML включает IntelliSense, автоматическое форматирование, выделение синтаксиса и навигацию по тегам. На следующем рисунке показан режим XAML с открытым меню IntelliSense:

XAML представление

Окно структуры документа

Окно структуры документа в Visual Studio аналогично окну объектов и временной шкалы в Blend для Visual Studio. Структура документов помогает выполнять следующие задачи:

  • Просмотрите иерархическую структуру всех элементов на артборде.

  • Выберите элементы, чтобы их можно было изменить. Например, их можно перемещать в иерархии или задавать их свойства в окне "Свойства". Дополнительные сведения см. в статье "Работа с элементами в XAML-конструкторе".

  • Создание и изменение шаблонов элементов, которые являются элементами управления.

  • Создание анимаций (только Blend для Visual Studio).

Чтобы просмотреть окно "Структура документа" в Visual Studio, в строке меню выберите Просмотр>Другие окна>Структура документа. Чтобы просмотреть окно "Объекты и временная шкала" в Blend для Visual Studio, в строке меню выберите Вид>Структура документа.

окно структуры документа в Visual Studio

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

Показать и скрыть

Отображает или скрывает элементы рабочего поля. Отображается как символ глаза. Вы также можете нажать клавиши CTRL +CTRL H, чтобы скрыть элемент и SHIFT+CTRL+H, чтобы отобразить его.

блокировка и разблокировка

Элементы рабочей области блокируются или разблокируются. Не удается изменить заблокированные элементы. Появляется в виде символа замка при блокировке. Вы также можете нажать клавиши Ctrl+L, чтобы заблокировать элемент, и Shift+Ctrl+L, чтобы разблокировать его.

Возврат области видимости к pageRoot

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

Окно свойств

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

окно свойств

В верхней части окна "Свойства " предлагаются различные параметры:

  • Измените имя выбранного элемента в поле Name.
  • В левом верхнем углу есть значок, представляющий выбранный в данный момент элемент.
  • Чтобы упорядочить свойства по категориям или по алфавиту, нажмите Категория, Имяили Источник в списке Упорядочить по.
  • Чтобы просмотреть список событий элемента управления, нажмите кнопку События, которая отображается в виде символа молнии.
  • Чтобы найти свойство, начните вводить имя свойства в поле поиска. В окне свойства отображаются свойства, соответствующие вашему поиску по мере ввода.

Некоторые свойства позволяют задать дополнительные свойства, нажав кнопку со стрелкой вниз.

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

Дополнительные сведения об использовании свойств и обработке событий см. в введение в элементы управления и шаблоны.

Связанное содержимое