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

Expression Blend --- Графические интерфейсы --- Построение пользовательского интерфейса

Теперь, когда у вас сложилось представление о назначении диспетчеров компоновки, модели содержимого элементов управления и модели содержимого многокомпонентных элементов управления, перейдем к рассмотрению примера нового проекта, чтобы продемонстрировать применение на практике различных средств Expression Blend IDE для построения пользовательского интерфейса приложения. В данном примере речь пойдет о проекте приложения на платформе WPF, но многие из представленных далее способов вполне применимы и в проектах приложений на платформе Silverlight. Итак, создайте новый проект приложения WPF, присвоив ему имя WpfControlsApp.

Построение системы компоновки с вкладками

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

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

Найдя компонент TabControl, выберите его на панели Tools и перетащите экземпляр данного элемента управления на исходную сетку (объект типа Grid), чтобы он занял большую ее часть. По умолчанию в элементе управления типа TabControl определяются два исходных элемента (объекты типа TabItem), каждый из которых представляет в нем отдельную вкладку. Кроме того, эти элементы располагаются в верхней части пространства, принадлежащего элементу управления типа TabControl.

Если хотите изменить расположение вкладок, то сделайте это с помощью свойства TabStripPlacement (Расположение панели вкладок), доступного в области Common Properties на панели Properties выбранного элемента управления типа TabControl, но не отдельных его элементов (т.е. объектов типа TabItem):

А теперь перейдите к панели Objects and Timeline и обратите внимание на то что каждый объект типа TabItem является порожденным, т.е. потомком родительского объекта типа TabControl. Но еще интереснее отметить то обстоятельство, что у каждого объекта типа TabItem имеется свой собственный диспетчер компоновки (в данном случае объект типа Grid). Более того, у каждого объекта типа TabItem имеется элемент Header (Заголовок), в котором можно задать текст или иное сложное содержимое для отдельной вкладки:

В целях рассматриваемого здесь примера добавьте еще одну вкладку в элемет управления типа TabControl. Для этого щелкните правой кнопкой мыши на узле TabControl непосредственно на панели Objects and Timeline и выберите команду Add TabItem (Добавить элемент вкладки) из всплывающего контекстного меню. После этого внесите в свойство Header каждого объекта типа TabItem изменения, например такие:

• Fun with Ink (Забавное рисование пером)

• Documents API (Прикладной интерфейс документов)

• Behaviors! (Виды поведения)

Стремясь внести изменения в текст заголовков, вы мало чего добьетесь, если попытаетесь выбрать элемент Header на панели Objects and Timeline, поскольку он является свойством объекта типа TabItem, а не выбираемым элементом. Воспользуйтесь лучше панелью Properties для изменения текста.

Следует особенно иметь в виду, что, выбирая любой объект типа TabItem на монтажном столе, вы тем самым активизируете соответствующую вкладку для правки, а после этого можете приступать к перетаскиванию элементов управления в корневой диспетчер компоновки. Разумеется, вы сможете добиться аналогичного результата, выбрав объект типа TabItem на панели Objects and Timeline. И наконец, введите в текстовом поле свойства Name имя myTabControl элемента управления типа TabControl, а в текстовом поле свойств Name объектов типа TabItem — имена tabInk, tabDocs и tabBehaviors соответственно.