Размещение компонентов на форме

Перенос компонентов со страниц библиотеки на форму

 

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

Если нужно разместить несколько компонентов одного типа, то нажав и удерживая клавишу Shift, выделите компонент на странице. Отпустив Shift, щелкайте в нужных местах формы. Для прерывания размещения нажмите кнопку-указатель со стрелкой.

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

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

Родители компонентов – Parent

 

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

Оконный компонент – форма, панель и т.д., включающий в себя как контейнер другие компоненты, выступает по отношению к ним как родительский компонент. У каждого компонента есть родитель. Им может быть форма или другой оконный компонент. В процессе выполнения приложения родителя того или иного компонента можно узнать по его свойству Parent. Это свойство можно читать и изменять только во время выполнения, в Инспекторе Объектов его нет.

Компонент может наследовать многие свойства своего родителя. Для всех визуальных компонентов в Инспекторе Объектов есть такие свойства, как ParentFont и ParentShowHint, для оконных компонентов есть еще свойство ParentCtl3D. Эти свойства указывают (если их значения установлены в true), что дочерний компонент наследует от родительского соответственно атрибуты шрифта, показ ярлычков, атрибуты своего оформления. Кроме того, значения свойств Left и Top, которые имеются в Инспекторе Объектов для любого визуального компонента и которые определяют положение левого верхнего угла компонента, измеряются в системе координат родительского компонента. Поэтому при перемещении родительского компонента будут синхронно перемещаться и все его дочерние компоненты.

Свойство Anchors определяет привязку дочерних компонентов к границам родительского компонента. Это свойство может обеспечивать изменение местоположения и размеров дочернего компонента при изменении границ родительского компонента.

К важным свойствам, связывающим дочерние компоненты с родительским, относятся Visible (видимый) и Enabled (доступный). Если в процессе выполнения приложения сделать в родительском компоненте Visible равным false, то станет невидимым не только родительский, но и все его дочерние компоненты. Аналогично, если в процессе выполнения приложения сделать в родительском компоненте Enabled равным false, то станут недоступными все его дочерние компоненты. А это означает, что пользователь не сможет нажимать кнопки и производить любые другие действия в пределах данного родительского компонента. Таким образом, понятие родительского компонента имеет большое практическое значение.

Владельцы компонентов – Owner

 

Свойство Owner – владелец данного компонента устанавливается в момент создания компонента в процессе выполнения приложения. Владелец компонента – это тот компонент, при уничтожении которого (освобождении занимаемой им памяти) уничтожается и данный компонент.

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

Все дочерние компоненты в оконном элементе располагаются в так называемой Z-последовательности. Для перекрывающихся компонентов (располагающихся друг на друге) Z-последовательность определяет, какой из них будет виден. Виден тот, который расположен в этой последовательности выше.

Обычно последовательность компонентов соответствует той, в которой они помещались на форму. Однако неоконные компоненты типа меток всегда лежат в Z-последовательности ниже любых оконных компонентов типа панелей и кнопок.

 

 

«Многослойное» размещение компонентов на форме

 

Если компонент перенесен не на форму, а на панель, то эта панель становится для него родительской, и переместить его за пределы панели становится невозможным. Переместить компонент на другую панель или непосредственно на форму можно через буфер обмена Clipboard. Выделите курсором переносимый компонент и вырежьте его в Clipboard командой Правка | Вырезать или «горячими» клавишами Ctrl-X. Затем щелкните на форме или на той панели, куда хотите перенести компонент, и выполните команду Правка | Вставить, дублируемую «горячими» клавишами Ctrl-V. Компонент перенесется из Clipboard на новое место и обретет нового родителя – панель или форму.

«Многослойное» размещение компонентов на форме получается, когда панели помещаются друг на друга. Будут ли при этом накрытые компоненты видны или нет, определяется их местом в Z-последовательности. Метки заведомо будут невидимы, поскольку они располагаются в Z-последователь-ности всегда ниже оконных компонентов, к которым принадлежат панели. Видимостью оконных компонентов – панелей, кнопок, окон редактирования можно управлять командами меню Правка | Придвинуть к фронту (перемещает на самый верх) и Правка | Отправить назад (перемещает на самый низ). Эти команды можно выполнить и проще: щелкнув правой кнопкой мыши и выбрав их в пункте Управление из всплывающего меню.

 

Задание 1. Поместите на форму три панели: две из них непосредственно на форме, а третью – на одной из предыдущих. Разместите на форме и на панелях различные метки, кнопки и окна редактирования. Перемещайте компоненты по панелям, а сами панели – по форме, выполняйте команды Правка | Придвинуть к фронту и Правка | Отправить назад и наблюдайте при этом видимость различных компонентов.

 

 

Поиск «пропавших» компонентов

 

Приведем причины, по которым не удается найти помещенный на форму компонент. Пусть используется метка Label с установленным в true свойством AutoSize (автоматическое изменение размера по размерам надписи). Если стереть значение надписи Caption, то горизонтальный размер метки уменьшается до нуля и ее не будет видно на форме, пока во время выполнения приложения значение Caption не изменится. Компонент может «пропасть» также, если он накрыт другим компонентом, расположенным выше в Z-последовательности. Не исключен такой выбор цветов, при котором компонент сливается с фоном.

Есть два способа поиска «пропавших» элементов. Первый – выбрать его имя в выпадающем списке, расположенном вверху окна Инспектора Объектов. Этот список содержит все компоненты, размещенные на форме. Если выбрать в нем нужный компонент, то на форме вокруг него появится рамка с маркерами, видимая даже в случае, если компонент накрыт сверху какой-нибудь панелью или другим компонентом. При этом в Инспекторе Объектов станут видны страницы свойств и событий найденного компонента. Этого достаточно, чтобы задать для компонента значения свойств или задать обработчики событий. Если же необходимо все-таки добраться до компонента, то нужно или временно куда-то сдвинуть закрывающие его компоненты, или выполнить для них команду Правка | Отправить назад, которая сдвинет их в низ Z-последовательности. Второй способ – выделить его вершину в окне Дерева Объектов (см. ниже).

Обычная задача: как, ничего не сдвигая, добраться до нижних панелей, если на них лежат другие панели, или как добраться до формы, если она вся накрыта панелями. Эту задачу можно решить проще, чем описано выше. Выделяют верхнюю панель и нажимают клавишу Esc. В окне Инспектора Объектов откроются страницы, связанные с нижележащей панелью. Нажмите Esc еще раз и откроются страницы следующего слоя и т.д. до тех пор, пока не откроются страницы формы. Если же есть только один слой панели, то страницы формы откроются при первом нажатии Esc.

 

Окно Дерева Объектов

 

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

 

Задание 2. На форме разместите панели Panel1 и Panel3. На панели Panel1 разместите компоненты Edit1, Label1, а также Panel2, содержащую компоненты Button1 и Button2. Панель Panel3 содержит компоненты Edit2 и Label2. Убедитесь, что все наглядно отображено в Дереве Объектов.

Работа с Деревом Объектов. Если выделить какую-то вершину в дереве, соответствующий компонент выделится на форме, а в Инспекторе Объектов откроются его страницы свойств и событий. Так легко находится «потерявшийся» на форме компонент. Можно переносить компоненты из одного родительского контейнера в другой, просто перетаскивая в Дереве Объектов соответствующую вершину в другую родительскую вершину, например на другую панель. Компонент на форме при этом переместится в поле нового родителя.

Страница диаграмм Редактора Кода

 

Для представления связей между компонентами в виде диаграммы окно Дерева Объектов используется совместно со страницей Диаграмма Редактора Кода. Откройте эту страницу. В окне Имя назовите строящуюся диаграмму, например «Компоновка Form1». В окне Описание можно поместить текстовое описание диаграммы, например: «Диаграмма описывает компоновку компонентов на форме Form1: соотношение родительских и дочерних компонентов».

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

Сначала основное поле диаграммы будет пустым. Чтобы занести в него компоненты, надо переместить мышью их вершины из окна Дерева Объектов. Между изображениями перемещенных компонентов автоматически появятся стрелки, описывающие связи между ними. Остается только расположить их так, чтобы диаграмма была наглядной. При этом можно перемещать и компоненты, и стрелки связей между ними, буксируя их мышью. Если потянуть одну из средних точек стрелки, стрелка изогнется. Так можно сделать линию стрелки кусочно-линейной, огибая ею какие-то препятствия.

Щелкнув на изображении какого-то компонента или стрелки правой кнопкой мыши, вызывают контекстное меню, в котором устанавливают цвет фона изображения или стрелки (раздел Цвет). Разделы От начала и С конца нужны, если изображения на диаграмме накладываются друг на друга полностью или частично. В этом случае первая команда выдвигает выделенное изображение на первый план, а вторая – перемещает на задний план.

Левая быстрая кнопка с надписью «A B C» позволяет создать на диаграмме блок, в котором можно написать произвольный поясняющий текст (Задание 2).

Вторая слева кнопка Allude connector позволяет нанести на диаграмму связи, не возникающие автоматически. Например, если кнопка Button1 обрабатывает текст в окне Edit2, а кнопка Button2 обрабатывает текст окна Edit1, можно провести между этими программно связанными компонентами соединения. Для этого надо нажать кнопку Allude connector, затем нажать левую кнопку мыши на изображении того компонента, от которого нужно провести стрелку, а затем, не отпуская кнопку, провести линию к изображению другого компонента. Тогда соединительная линия в виде стрелки появится на экране. Можно щелкнуть на ней правой кнопкой и выбрать из контекстного меню один из разделов, определяющих начертание стрелки: Запуск с – изображение начала стрелки и Конец с – изображение ее конца, Цвет – цвет начала и конца стрелки, Цвет заливки – цвет линии.

Работа с группой компонентов

 

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

 

1. Перемещать компоненты группы одновременно, потянув курсором за один из выделенных компонентов; при этом взаимное расположение компонентов в группе не изменяется.

2. Задавать в Инспекторе Объектов общие для всей группы свойства. При выделении группы на странице свойств в Инспекторе Объектов будут видны только их общие свойства.

3. Задать общий для всех компонентов группы обработчик какого-то события.

4. Скопировать всю группу в буфер обмена Clipboard командой Правка | Копировать или «горячими» клавишами Ctrl-C. После этого можно всю группу перенести на новую форму из Clipboard командой Правка | Вставить или «горячими» клавишами Ctrl-V. Это простой способ переносить фрагменты с одной формы на другую. Так же можно переносить группы компонентов с одной панели на другую.

5. Выравнивать компоненты группы по размеру и взаимному расположению.

 

Задание 3. Разместить на форме метку Label и ниже, друг под другом, три окна редактирования с разными размерами – Edit1, Edit2 и Edit3. Выделить произвольную группу двумя способами. Выполнить доступные для группы операции (п.1, п.2, п.4).

Выравнивание компонентов по размеру и положению

 

При размещении компонентов на форме обычно трудно получить аккуратный вид окна, симметричное расположение компонентов, одинаковый размер их по горизонтали и вертикали. Для ре шения этих задач используют команды Правка | Выровнять – выравнивание размещения, Правка | Размер – выравнивание размеров и Правка | Масштаб – масштабирование. Те же команды проще выбрать не из меню Правка, а из раздела Позиция контекстного меню, которое всплывает, если щелкнуть правой кнопкой мыши на одном из компонентов группы (если щелкнуть в стороне, то выделение группы снимется).

При выполнении команды выравнивания размеров откроется окно Размер, левая часть которого устанавливает ширину, а правая – высоту компонентов. Можно выбрать варианты: Без изменения – не изменять, По наименьшему – уменьшить до размера минимального из компонентов группы, По наибольшему – увеличить до размера максимального из компонентов группы, Ширина (Высота) – задать в окне рядом с этой радиокнопкой ширину(высоту) компонента в пикселах.

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

При выполнении команды выравнивания размещения откроется окно Выравнивание, левая часть которого устанавливает выравнивание компонентов по горизонтали. Можно выбрать варианты: Без изменений – не изменять, Левая сторона – выровнять компоненты по их левым сторонам (т.е. левые стороны компонентов будут расположены друг под другом), Центр – выровнять компоненты по их центрам, Правая сторона – выровнять компоненты по их правым сторонам, По месту – разместить с равными интервалами между компонентами, Центр окна – расположить в центре окна.

Правая часть окна устанавливает выравнивание компонентов по вертикали. Варианты аналогичны: Без изменений – не изменять, Верх – вы-ровнять компоненты по их верхним сторонам, Центр – по их центрам, Низ – по их нижним сторонам, По месту – разместить с равными интервалами по вертикали между компонентами, Центр окна – расположить в центре окна.

Примечания

 

При выравнивании по границам компонентов (Левая сторона, Правая сторона, Верх, Низ, Центр) на месте остается самый левый (выравнивание по горизонтали) или самый нижний (выравнивание по вертикали) компонент, а местоположение остальных подгоняется под него.

В режиме По месту крайние компоненты (левый и правый при выравнивании по горизонтали и верхний и нижний при выравнивании по вертикали) не перемещаются. Получающиеся интервалы определяются положением этих крайних компонентов и числом промежуточных. Следовательно, выравнивание интервалов можно применять после размещения крайних элементов. Если компоненты имеют разные размеры, то они могут даже наложиться друг на друга. Поэтому выравнивание по расстояниям имеет смысл только для компонентов равных размеров.

Режим Центр окна – расположить в центре окна – означает, что в центре окна расположится центр выделенной группы, а относительные сдвиги компонентов сохранятся неизменными. Если компоненты расположены на панели, то подразумевается центр этой панели.

Задание 4. На форме (см. задание 3) выполнить выравнивание размеров окон редактирования. Затем все компоненты формы – метку и три окна редактирования – разместить по горизонтали в центре экрана с одинаковыми вертикальными расстояниями между окнами редактирования.

 

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

Выполнить команду Вид | Выравнивание палитры. Появится окно Выровнять. Верхний ряд кнопок относится к выравниванию по горизонтали, нижний – по вертикали.

 

Задание 5. Разместить на форме три панели, разместить на каждой из них по 3-4 различных компонента и выровнять с помощью палитры выравнивания панели и компоненты на панелях.

 

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

Фиксация компонентов

 

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