Общие сведения о конструкторах WPF и Silverlight

Конструктор WPF и Silverlight представляет поддержку визуальной разработки для создания приложений WPF и Silverlight. Можно создавать пользовательские интерфейсы для приложений, перетаскивая элементы управления с панели элементов и устанавливая свойства в окне Свойства. Также непосредственно можно изменять код XAML в редакторе XAML. На следующей иллюстрации показан конструктор WPF и Silverlight с некоторыми его окнами, поддерживающими такую возможность.

При первом запуске конструктора WPF и Silverlight окна "Источники данных" и "Структура документа" свернуты в левой части окна Visual Studio. Если отобразить и закрепить эти вкладки слева, получится предыдущее представление, удобное для работы с рабочей областью конструирования.

В этом разделе содержатся следующие подразделы.

• Представление конструктора

• Представление XAML

• Окно свойств

• Окно "Источники данных"

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

• Построение многофункциональных интерактивных пользовательских интерфейсов

• Совместная работа с использованием средства Expression Blend

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

Конструктор предоставляет рабочую область конструирования для построения приложений и элементов управления WPF и Silverlight. В нем отображается текущее состояние кода в представлении XAML. При изменении элементов управления на поверхности разработки, представление XAML обновляется для отражения изменений. Представление конструктора предоставляет множество возможностей для упорядочения элементов управления в окне или на странице приложения WPF. Некоторые функции представления конструктора показаны на приведенном ниже рисунке.

Масштаб

Элемент управления Zoom позволяет управлять размером рабочей области конструирования. Можно изменять масштаб с 10% до значения 20x. Настройки масштаба сохранены в SUO-файле решения.

Сдвиг

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

По размеру представления

Используйте кнопку "По размеру представления" для увеличения размера рабочей области до размера экрана в конструкторе. Это полезно после сильного уменьшения или увеличения.

Границы сетки

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

Линии сетки

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

Индикаторы линий сетки

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

Маркер перемещения

Отображаемый в левом верхнем углу выбранного элемента управления панели маркер перемещения позволяет перемещать панель. Щелкните маркер перемещения и перетащите элемент управления в нужное место поверхности разработки. Дополнительные сведения см. в разделе Практическое руководство. Выбор и перемещение элементов в область конструктора.

Маркеры изменения размеров

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

Линии полей

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

Заглушки полей

Когда толщина полей выбранного элемента управления равна 0, для него отображается заглушка границы. Щелкните заглушку границы, чтобы установить ширину поля до соответствующей границы контейнера. Дополнительные сведения см. в разделе Практическое руководство. Установка полей для элемента управления в конструкторе WPF.

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

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

Панель информации

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

Шкала изменения размера

При перемещении указателя мыши по границе сетки элемента управления Grid, имеющего не менее двух столбцов или строк, с внешней стороны границы отображается шкала изменения размера. Шкала изменения размера позволяет задать для столбцов и строк Grid параметры "fixed", "star" и "Auto sizing". Дополнительные сведения см. в разделе Практическое руководство. Изменение размера строк и столбцов в элементе управления Grid.

Тег Root Sizing

Тег root sizing отображается в правом нижнем углу окна в конструкторе при выборе этого окна. Тег root sizing позволяет переключать свойство "root size" окна между значениями "auto" и "fixed". Дополнительные сведения см. в разделе Атрибуты времени разработки.

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

Язык XAML предоставляет декларативный, основанный на XML словарь для определения пользовательского интерфейса приложения. Конструктор WPF и Silverlight предоставляет представление XAML и синхронизированное с ним представление конструктора для отображения XAML-разметки приложения. Представление XAML включает IntelliSense, автоформатирование, подсветку синтаксиса и перемещение по тегам. Некоторые возможности представления XAML показаны на приведенном ниже рисунке.

Панель представления с разделением

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

IntelliSense расширения разметки

В дополнение к стандартной языковой функции IntelliSense представление XAML поддерживает IntelliSense для расширений разметки. При вводе открывающей фигурной скобки ({) в представлении XAML функция IntelliSense отображает доступные расширения разметки. При выборе расширения разметки в списке IntelliSense отображает доступные атрибуты. Дополнительные сведения см. в разделе Пошаговое руководство. Изменение XAML в конструкторе WPF.

Навигатор по тегам

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

Масштаб

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

Окно свойств

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

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

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

Построитель привязки данных

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

Редактор полей

Редактор полей позволяет увидеть параметры каждого поля и то, как это влияет на местоположение элемента управления. С помощью редактора полей можно также изменить поля одного или нескольких элементов управления. Дополнительные сведения см. в разделе Практическое руководство. Установка полей для элемента управления в конструкторе WPF.

Средство выбора ресурсов

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

Редактор кистей

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

Окно "Источники данных"

Быстро интегрировать данные в приложение WPF можно с помощью Окно "Источники данных". При установке подключения к данным можно перетаскивать таблицы данных в рабочую область конструирования, в результате чего будут автоматически генерироваться бизнес-логика и привязки к данным. Можно осуществлять привязку к объекту, набору данных ADO.NET, модели EDM или к службе. Дополнительные сведения см. в разделе Привязка элементов управления WPF к данным в Visual Studio.

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

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

Дополнительные сведения см. в разделе Навигация по иерархии элементов документа WPF.

Построение многофункциональных интерактивных пользовательских интерфейсов

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

Когда пользователь выполняет какое-либо действие с окном Window или одним из его элементов управления, это действие создает событие. Приложение реагирует на эти события и обрабатывает их при возникновении. Дополнительные сведения см. в разделе Практическое руководство. Создание простого обработчика событий.

WFP включает широкий набор элементов управления, которые можно добавлять к окну: элементы управления, в которых отображаются текстовые поля, кнопки, раскрывающиеся списки, переключатели и даже веб-страницы. Список всех элементов управления, которые можно использовать в окне, см. в разделе Библиотека элементов управления. Если существующий элемент управления не удовлетворяет конкретным потребностям, WPF поддерживает создание собственных пользовательских элементов управления при помощи классов UserControl и Control.

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

Наконец, если необходимо создать собственные настраиваемые элементы пользовательского интерфейса, пространства имен System.Windows.Media и System.Windows.Shapes содержат большой выбор классов для отображения линий, окружностей и других фигур непосредственно в самом окне.

Справка по созданию окон и элементов управления

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

Описание	Раздел справки
Создание нового приложения WPF с помощью Visual Studio.	Практическое руководство. Создание нового проекта приложения WPF
Использование в окне элементов управления.	Практическое руководство. Выбор и перемещение элементов в область конструктора
Создание обработчиков событий для элементов управления.	Практическое руководство. Создание простого обработчика событий
Обработка событий из окна и элементов управления окна.	Практическое руководство. Использование вложенных событий
Перемещение по макету WPF или Silverlight.	Навигация по иерархии элементов документа WPF
Создание динамических макетов.	Макеты в конструкторе WPF
Создание пользовательских элементов управления WPF.	Практическое руководство. Создание проекта библиотеки элементов UserControl в WPF
Создание привязок к данным.	Привязка данных в конструкторе WPF

Совместная работа с использованием средства Expression Blend

WPF обеспечивает строгое разделение содержимого и представления, которое позволяет разработчикам программного обеспечения и графическим дизайнерам совместно работать над внешним видом и поведением приложения. Конструктор WPF и Silverlight оптимизирован для разработчиков программного обеспечения, а Expression Blend оптимизирован для графических дизайнеров. Дополнительные сведения см. в разделе Совместная работа с использованием средства Expression Blend.

См. также

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

Конструктор WPF для разработчиков Windows Forms

Совместная работа с использованием средства Expression Blend

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

Конструктор WPF

Библиотека элементов управления

XAML в WPF

Журнал изменений

Дата	Журнал	Причина
Март 2011	Обновлены сведения об окне "Свойства" и редакторе полей.	Улучшение информации.