Панели общего назначения — компоненты Panel, GroupBox, Bevel, ScrollBox, Splitter

На рисунке ниже приведен пример, демонстрирующий вид таких панелей, как Panel, GroupBox, Bevel, ScrollBox. В левой части формы размещены компоненты Panel с различными значениями параметров. С этих компонентов мы и начнем рассмотрение панелей.

Пример панелей общего назначения

Панели Panel используются наиболее широко. С их помощью компонуются различные элементы интерфейса (кнопки, окна редактирования, списки), функционально связанные друг с другом. Такая функциональная связь должна поддерживаться и зрительной связью — объединением соответствующих элементов в рамках одной панели. Панели Panel могут также использоваться для организации инструментальных панелей, полос состояния и т.п., хотя для этих целей имеются и специализированные компоненты, которые будут рассмотрены позднее.

Одним из назначений панелей является также группирование таких управляющих элементов, как RadioButton — радиокнопки. Все радиокнопки, расположенные на панели, работают как согласованная группа: в любой момент может быть выбрана только одна из них. Аналогично согласованной группой работают и расположенные на панели быстрые кнопки SpeedButton, если они имеют одинаковое значение свойства GroupIndex. В то же время SpeedButton, расположенные на разных панелях или на панели и форме, не образуют связанной группы даже при одинаковом значении GroupIndex.

Внешний вид панели Panel определяется совокупностью параметров BevelInner — стиль внутренней части панели, BevelOuter — стиль внешней части панели, BevelWidth — ширина внешней части панели, BorderStyle — стиль бордюра, BorderWidth — ширина бордюра. Результат сочетания некоторых значений этих параметров показан на рис. Верхняя панель соответствует значениям параметров по умолчанию. Нижняя панель соответствует случаю, когда не определен стиль ни одной из областей панели (значения всех параметров равны None), В этом случае сама панель никак не выделяется на форме. Видна только надпись на ней (свойство Caption), если надпись задана, и, конечно, видны те компоненты, которые размещаются на панели.

Если вы строите приложение, в котором разрешаете пользователю изменять размер окна, надо позаботиться о том, чтобы синхронно с этим изменялись и размеры панелей. В зависимости от ситуации какие-то панели в приложении могут оказаться временно перегруженными отображаемыми данными, а другие в значительной степени пустыми. В этих случаях полезно предоставить пользователю возможность перемещать границы, разделяющие различные панели, изменяя их относительные размеры. Пример такой возможности вы можете увидеть в программе Windows «Проводник».

В библиотеке Delphi имеется специальный компонент — Splitter, который позволяет легко осуществить это. Рассмотрим это на примере. Пусть вы хотите иметь в приложении форму, содержащую три панели, которые располагаются так, как показано на рис. При изменении пользователем размеров окна панель Panel1 должна в любом случае занимать всю нижнюю часть окна, не увеличиваясь в высоту. Панель Panel2 должна занимать левую часть окна, изменяя при изменении размеров окна свою высоту, но не изменяя ширину. А панель Panel3 должна занимать всю оставшуюся часть окна. Кроме того мы хотим обеспечить пользователю возможность изменять положение границы между панелями Panel2 и Panel3, расширяя одну из этих панелей и соответственно сжимая другую.

Исходя из наших требований свойство Align надо установить у панели Panel1 в alBottom (выравнивание по нижнему краю окна), у панели Panel2 — в аlLeft (выравнивание по левому краю окна), у панели Panel3 — в alClient (выравнивание по всей оставшейся части клиентской области окна). А между Panel2 и Panel3 надо разместить Splitter — разделитель.

Панели с разделителем

Последовательность проектирования такой формы может быть следующей;

Разместите на форме панель Panel1 и задайте у нее Align = alBottom. Панель займет нижнюю часть окна.

Разместите на форме панель Panel2 и задайте у нее Align = alLeft. Панель займет левую часть окна.

Разместите на форме разделитель Splitter и задайте у него Align = alLeft (впрочем, это значение Align установлено по умолчанию). Разделитель прижмется к правой стороне панели Panel2, которая уже выровнена в ту же сторону. Разделитель всегда надо выравнивать только после выравнивания соответствующей панели, так как иначе он прижмется просто к краю формы.

После этого можно разместить на форме панель Panel3 и задать у нее Align = alClient. Разделитель окажется зажатым между Panel2 и Panel3.

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

Закройте приложение и посмотрите в Инспекторе объектов свойства компонента Splitter. Свойство ResizeStyle определяет поведение разделителя при перемещении его пользователем. По умолчанию это свойство равно rsPattern. Это означает (как вы могли видеть в эксперименте), что пока пользователь тянет курсором мыши границу, сам разделитель не перемещается и панели тоже остаются прежних размеров. Перемещается только шаблон линии, указывая место намечаемого перемещения границы. Лишь после того, как пользователь отпустит кнопку мыши, разделитель переместится и панели изменят свои размеры. Практически такая же картина наблюдается, если установить ResizeStyle = rsLine. При ResizeStyle = rsUpdate в процессе перетаскивания границы пользователем разделитель тоже перемещается и размеры панелей все время меняются. Это, может быть, удобно, если пользователь хочет установить размер панели таким, чтобы на ней была видна какая-то конкретная область. Но так как процесс перетаскивания в этом случае сопровождается постоянной перерисовкой панелей, наблюдается неприятное мерцание изображения. Так что этот режим можно рекомендовать только в очень редких случаях. Если установить ResizeStyle = rsNone, то в процессе перетаскивания границы не перемещается ни сама граница, ни изображающая ее линия. Вряд ли это удобно пользователю, так что я не могу представить случая, когда было бы выгодно использовать этот режим.

Свойство MinSize компонента Splitter устанавливает минимальный размер в пикселях обеих панелей, между которыми зажат разделитель. Задание такого минимального размера необходимо, чтобы при перемещениях границы панель не сжалась бы до нулевого размера или до такой величины, при которой на ней исчезли бы какие-то необходимые для работы элементы управления. К сожалению, как вы сами можете убедиться, экспериментируя с компонентом Splitter, свойство MinSize не всегда срабатывает верно. К тому же это свойство относится к обеим панелям, граница между которыми перемещается, а в ряде случаев желательно раздельно установить различные минимальные размеры одной и другой панели. Это проще (и надежнее) сделать, задав в панелях соответствующие значения свойства Constraints. Например, если вы в описанном выше тестовом приложении зададите в свойстве Constraints в панели Panel2 значение MinWidth = 50, а в панели Panel3 MinWidth = 100, то именно только до таких размеров в процессе выполнения приложения пользователь сможет изменять эти панели.

Компонент Splitter имеет событие OnMoved, которое наступает после конца перемещения границы. В обработчике этого события можно предусмотреть, если необходимо, упорядочение размещения компонентов на панелях, размеры которых изменились: переместить какие-то метки, изменить размеры компонентов и т.д.

Панель GroupBox не имеет таких широких возможностей задания различных стилей оформления, как Panel. Но она имеет встроенную рамку с надписью (см. рис.), которая обычно используется для выделения на форме группы функционально объединенных компонентов. Никаких особых свойств, отличных от уже рассмотренных, панель GroupBox не имеет.

Компонент Bevel формально не является панелью, он не может служить контейнером для компонентов. Например, с помощью Bevel нельзя сгруппировать радиокнопки. Однако, чисто зрительно компонент Bevel может использоваться как подобие панели. На рис. в правой нижней части окна представлены различные варианты оформления Bevel.

Стиль отображения Bevel определяется свойством Style, которое может принимать значения bsLowered — утопленный, и bsRaised — приподнятый. А контур компонента определяется свойством Shape, которое может принимать значения: bsBox — прямоугольник, bsFrame — рамка, bsSpacer — пунктирная рамка, bsTopLine, bsBottomLine, bsLeftLine, bsRightLine — соответственной верхняя, нижняя, левая и правая линии. В зависимости от значения Style линии могут быть утопленными или выступающими. Все перечисленные варианты приведены на рис.

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

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

Свойство BorderStyle определяет стиль рамки компонента ScrollBox. Свойство AutoScroll позволяет задать автоматическое появление необходимых полос прокрутки, если размер размещенных компонентов превышает размер области по горизонтали, вертикали или в обоих измерениях. Если по каким-то соображениям это нежелательно, вы можете сами управлять появлением горизонтальной и вертикальной полос с помощью свойств HorzScrollBar и VertScrollBar соответственно. Но в этом случае вы должны сами задавать ряд свойств полосы прокрутки и, прежде всего, Range — размер в пикселях прокручиваемой области. Значение перемещения при однократном нажатии пользователем кнопки прокрутки может рассчитываться компонентом автоматически исходя из размеров области и окна, если свойство полосы прокрутки Smooth установлено в true. В противном случае вы должны задать величину единичного перемещения в свойстве Increment.