Design View в App Designer предоставляет богатый набор средств макета для разработки современных профессиональных приложений. Она также предоставляет обширную библиотеку компонентов пользовательского интерфейса, что позволяет создавать различные интерактивные функции. Любые изменения, внесенные в представлении «Дизайн», автоматически отражаются в представлении «Код». Таким образом, вы можете настроить многие аспекты приложения без написания кода.
Чтобы добавить компонент в приложение, используйте один из следующих методов:
Перетащите компонент из библиотеки компонентов на холст.
Щелкните компонент в библиотеке компонентов, а затем наведите курсор на холст. Курсор изменится на перекрестие. Щелкните мышью, чтобы добавить компонент к холсту в размере по умолчанию, или щелкните и перетащите, чтобы задать размер компонента при его добавлении. Некоторые компоненты можно добавить только в размере по умолчанию.
Имя компонента появляется в обозревателе компонентов после его добавления на холст. Компоненты можно выбрать либо в холсте, либо в браузере компонентов. Выбор происходит в обоих местах одновременно.
Некоторые компоненты, такие как поля редактирования и ползунки, группируются с меткой при перетаскивании на холст. По умолчанию эти метки не отображаются в обозревателе компонентов, но их можно добавить в список, щелкнув правой кнопкой мыши в любом месте обозревателя компонентов и выбрав «Включить метки компонентов» в обозревателе компонентов. Если не требуется, чтобы компонент имел метку, его можно исключить, нажав и удерживая клавишу Ctrl при перетаскивании компонента на холст.
Если компонент имеет метку и текст метки изменяется, имя компонента в обозревателе компонентов изменяется в соответствии с этим текстом. Можно настроить имя компонента, дважды щелкнув его и введя новое имя.
Можно настроить внешний вид компонента, выбрав его, а затем отредактировав его свойства на вкладке «Инспектор» обозревателя компонентов. Например, на этой вкладке можно изменить выравнивание текста, отображаемого на кнопке.
Некоторые свойства управляют поведением компонента. Например, можно изменить диапазон значений, принимаемых числовым полем редактирования, изменив свойство «Пределы».
При запуске приложения поле редактирования принимает значения только в пределах этого диапазона.
Некоторые свойства можно редактировать непосредственно на холсте, дважды щелкнув компонент. Например, можно отредактировать метку кнопки, дважды щелкнув ее и введя нужный текст. Чтобы добавить несколько строк текста, удерживайте клавишу Shift и нажмите клавишу Enter.
В режиме конструктора можно упорядочить и изменить размер компонентов, перетаскивая их на холст, или использовать инструменты, доступные на вкладке «Холст» панели инструментов.
App Designer предоставляет подсказки по выравниванию, помогающие выравнивать компоненты при перетаскивании их на холсте. Оранжевые пунктирные линии, проходящие через центры нескольких компонентов, указывают на то, что их центры выровнены. Оранжевые сплошные линии на кромках указывают, что кромки выровнены. Перпендикулярные линии указывают на центрирование компонента в родительском контейнере.
Вместо перетаскивания компонентов на холст можно выровнять компоненты с помощью инструментов в разделе «Выравнивание» панели инструментов.
При использовании инструмента выравнивания выбранные компоненты выравниваются по опорному компоненту. Компонент привязки является последним выбранным компонентом и имеет более толстую границу выбора, чем другие компоненты. Чтобы выбрать другую привязку, удерживайте клавишу Ctrl или Shift и дважды щелкните нужный компонент (один раз для отмены выбора компонента и второй раз для повторного выбора). Например, на следующем рисунке метка «Параметры формата» является привязкой. Нажатие кнопки «Выровнять по левому
краю» выравнивает
левую кромку раскрывающегося списка и флажок по левому краю метки.
Можно управлять интервалом между соседними компонентами с помощью инструментов в разделе «Пространство» панели инструментов. Выберите группу из трех или более компонентов, а затем выберите параметр из раскрывающегося списка в разделе «Пространство» панели инструментов. Опция Равномерно распределяет помещение равномерно в пространстве, занимаемом компонентами. Опция 20 размещает компоненты на расстоянии 20 пикселей друг от друга. Если требуется настроить количество пикселов между компонентами, введите число в выпадающий список.
Затем нажмите «Применить по горизонтали
» или «Применить 
по вертикали». Например, выберите «Равномерно
», 
а затем нажмите «Применить по вертикали», чтобы распределить пространство по вертикальному
стеку компонентов.
Можно сгруппировать два или более компонентов, чтобы изменить их как одну единицу измерения. Например, можно сгруппировать набор компонентов после завершения их относительных положений, чтобы затем переместить их без изменения этой взаимосвязи.
Чтобы сгруппировать набор компонентов, выделите их на холсте, а затем выберите пункт Группирование > Группа в разделе Упорядочить на панели инструментов.
Инструмент группирования также предоставляет функциональные возможности для следующих общих задач:
Разгруппировать все компоненты в группе - выберите группу. Затем выберите Группирование > Разгруппировать.
Добавить компонент в группу - выберите компонент и группу. Затем выберите Группирование > Добавить в группу.
Удалить компонент из группы - выберите компонент. Затем выберите Группирование > Удалить из группы.
Переупорядочить компоненты можно с помощью инструмента «Переупорядочить» в представлении «Дизайн».
Например, создайте метку, а затем изображение. По умолчанию изображение отображается поверх метки. Обозреватель компонентов отображает компоненты в соответствии с порядком их укладки, при этом изображение сначала находится сверху, а вторая - на метке.
Чтобы переупорядочить компоненты таким образом, чтобы метка была поверх изображения, выберите изображение на холсте, а затем нажмите кнопку «Переупорядочить» на панели инструментов. Можно также щелкнуть изображение правой кнопкой мыши и выбрать инструмент «Изменить порядок». Отправьте изображение назад, выбрав Отправить назад.
Изображение теперь за этикеткой. При изменении порядка компонентов изменяется и порядок компонентов в браузере компонентов.
При перетаскивании компонента в контейнер, например панель, он становится синим, указывая, что компонент является дочерним элементом контейнера. Этот процесс помещения компонентов в контейнеры называется воспитанием детей.
Обозреватель компонентов отображает связь «родитель-потомок» путем отступа имени дочернего компонента в родительском контейнере.
Существует несколько способов создания контекстных меню в App Designer. Поскольку контекстные меню отображаются только при щелчке правой кнопкой мыши компонента в запущенном приложении, они не отображаются на рисунке в режиме конструктора. Это делает рабочий процесс для редактирования контекстных меню несколько иным, чем для других компонентов. В этих разделах описываются способы создания и редактирования контекстных меню.
Чтобы создать контекстное меню, перетащите его из библиотеки компонентов на рисунок пользовательского интерфейса или другой компонент. При этом контекстное меню назначается ContextMenu свойство этого компонента. При создании контекстного меню оно появляется в области на холсте под рисунком. В этой области контекстных меню можно просмотреть все созданные контекстные меню и указать, сколько компонентов назначено каждому из них. Например, на холсте может появиться один набор контекстных меню:
Если требуется создать контекстное меню без назначения его компоненту, перетащите его в область контекстных меню.
Можно также создать и назначить контекстное меню определенному компоненту, щелкнув его правой кнопкой мыши и выбрав «Контекстное меню» > «Добавить новое контекстное меню».
Все контекстные меню создаются как дочерние элементы рисунка пользовательского интерфейса и добавляются в обозреватель компонентов, даже если они не назначены компоненту.
Отредактируйте контекстное меню, дважды щелкнув его в области Контекстные меню или щелкнув его правой кнопкой мыши и выбрав опцию редактирования для имени меню. При этом контекстное меню переносится в область редактирования контекстных меню, где можно редактировать и добавлять пункты меню и подменю.
По завершении редактирования щелкните стрелку назад (<) для выхода из области редактирования.
Чтобы отсоединить контекстное меню от компонента, щелкните правой кнопкой мыши компонент и выберите «Контекстное меню» > «Отменить назначение контекстного меню».
Чтобы заменить контекстное меню, назначенное компоненту, другим, можно перетащить контекстное меню на компонент или щелкнуть правой кнопкой мыши на компоненте, выбрать «Контекстное меню» > «Заменить на» и выбрать одно из других созданных контекстных меню. Если создано только одно контекстное меню, параметр «Заменить на» не отображается.
Также можно выбрать компонент в обозревателе компонентов и выбрать «Интерактивность» на вкладке «Инспектор». Затем разверните раскрывающийся список ContextMenu и выберите другое контекстное меню для назначения компоненту.