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

Конструктор XAML в Visual Studio 2012 предоставляет визуальный интерфейс для облегчения разработки приложений Магазина Windows, построенных с использованием XAML, WPF и Silverlight. Можно создавать пользовательские интерфейсы для приложений, перетаскивая элементы управления с панели элементов и устанавливая свойства в окне свойств. Также можно изменять код XAML непосредственно в представлении XAML.

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

Рабочая область конструктора XAML в Visual Studio состоит из нескольких элементов визуального интерфейса. Они включает монтажную панель, панель элементов, окно "Структура документа", обозреватель решений, окно свойств и редактор XAML. Чтобы открыть конструктор XAML, щелкните правой кнопкой мыши страницу XAML в обозревателе решений и выберите Конструктор представлений.

Создание представления

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

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

Ниже перечислены функции, доступные в монтажной панели.

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

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

• Графические элементы сетки
  Графический элемент панели Grid отображается как треугольник с прикрепленной вертикальной или горизонтальной линией на границе элемента Grid. При перетаскивании графического элемента панели Grid, ширина или высота смежных столбцов или строк изменяется по мере движения мыши.

  Графические элементы панели Grid используются для указания высоты и ширины столбцов и строк панели Grid. Можно добавить новый столбец или строку, щелкнув по границе панели Grid. При добавлении новой строки или столбца для панели Grid, в которой имеется несколько столбцов или строк, мини-панель инструментов отображается вне границы, которая позволяет задать ширину и высоту явным образом. Шкала изменения размера позволяет задать для столбцов и строк панели Grid фиксированный, пропорциональный и автоматический размер.

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

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

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

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

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

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

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

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

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

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

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

• Панель представления с разделением
  Панель представления с разделением отображается в верхней части представления XAML, когда редактор XAML находится в нижнем окне. Панель представления с разделением позволяет управлять относительными размерами представления конструктора и представления XAML. Также можно менять представления местами (с помощью кнопки Переставить панели ), указывать, горизонтально или вертикально расположить представления, и сворачивать любое представление.

• Масштабирование разметки
  Масштабирование разметки позволяет указать размер представления XAML. Можно изменять масштаб с 20% до 400%.

Окно устройства

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

В окне устройств доступны следующие параметры.

• Вид
  Задает ориентацию и макет приложения. Шаблоны проектов для приложений Магазина Windows, разработанных с использованием XAML (Grid, Split и Blank), могут определять и передавать представления, упомянутые выше. Каждая страница шаблонов предоставляет такие представления.

  • Альбомная. Полноэкранное представление (ширина x высота). Это представление по умолчанию.

  • Привязанная. Отображается, когда приложение привязано пользователем к одной из сторон экрана. Приложение расположено верткально на всех страницах. В этом представлении ширина приложения составляет 320 пикселей.

  • С заполнением. Отображается, когда пользователь привязывает два приложения к сторонам экрана. В этом представлении ширина приложения сужена до 322 пикселей.

  • Книжная. Полноэкранное представление (высота x ширина). В этом представлении значения ширины и высоты приложения поменяны местами.

  В зависимости от представления, заданного пользователем, некоторые представления могут быть заблокированы. Например, если задано разрешение экрана 1280 x 800, запрещены представления "С заполнением" и "Привязанная". Для контрактов могут быть недоступны некоторые визуальные состояния, описанные в следующем разделе.

• Визуальное состояние
  Задает текущее состояние в группе визуального состояния ApplicationViewState, которая отображается для редактирования текущего представления. Этот параметр будет заблокирован, если эти состояния не найдены в текущем документе. (Состояния определены по умолчанию и включены в шаблон "Основная страница" в Visual Studio.)

• Экран
  Определяет разрешение экрана устройства, для которого разрабатывается приложение.

• Тема
  Определяет тему приложения.

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

• Переопределить масштабирование
  Включает и отключает эмуляцию масштабирования документа в области конструктора. Это позволяет повысить процент масштабирования, используя один коэффициент. Установите флажок для включения эмуляции. Например, если процент масштабирования 100%, то документ в области конструктора масштабируется до 140%. Этот параметр заблокирован, если текущий процент масштабирования равен 180.

• Обрезать для отображения
  Задает режим отображения. Установите флажок для обрезки документа до размера экрана.

Окно "Структура документа"

Окно "Структура документа" в конструкторе XAML позволяет выполнять следующие задачи.

• Просмотр иерархической структуры всех элементов монтажной панели.

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

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

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

Параметры, доступные в окне "Структура документа".

• Структура документа
  В основном представлении в окне "Структура документа" отображается иерархия документа в структуре дерева. Можно использовать иерархическую природу структуры документа для просмотра документа на разных уровнях детализации и блокировки и сокрытия отдельных элементов или их групп.

• Показать/Скрыть
  Показывает или скрывает элементы монтажной панели, которые соответствуют элементам в структуре документа. Используйте кнопки Показать/Скрыть, на которых изображен символ глаза, или клавиши CTRL+H, чтобы скрыть элементы, и SHIFT+CTRL+H, чтобы их показать.

• Заблокировать/Разблокировать
  Блокирует или разблокирует элементы монтажной панели, которые соответствуют элементам в структуре документа. Заблокированные элементы нельзя изменить. Используйте кнопки Заблокировать/Разблокировать, на которых изображен символ замка, или клавиши CTRL+L для блокирования элементов и SHIFT+CTRL+L для разблокирования.

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

Окно "Свойства"

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

Наверху окна "Свойства" представлено несколько элементов управления. Можно изменить имя выбранного в данный момент элемента с помощью поля Имя. В верхнем левом углу расположен значок, представляющий выбранный в данный момент элемент. Чтобы упорядочить свойства по категориям или в алфавитном порядке, щелкните Категория, Имя или Источник в списке Упорядочить по. Чтобы просмотреть список событий для элемента управления, нажмите кнопку События, на которой изображен символ молнии. Чтобы найти свойство, начните вводить его имя в поле Поиск. В окне "Свойства" отображаются свойства, соответствующие вводимой строке поиска. Некоторые свойства позволяют задать дополнительные свойства, щелкнув кнопку со стрелкой вниз. Дополнительные сведения об использовании свойств и обработке событий см. в разделе Quickstart: adding controls and handling events

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

См. также

Задачи

Практическое руководство. Создание и применение ресурса

Практическое руководство. Привязка данных в конструкторе XAML

Основные понятия

Работа с элементами в конструкторе XAML

Другие ресурсы

How to set a gradient brush on a control

Resource dictionaries

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