Панель инструментов

Перемещаемые панели инструментов

Если вам в приложении потребуется лишь пара-тройка кнопок в панели инструментов, то проще воспользоваться первым вариантом. Но если вы делаете серьезное приложение и желаете, чтобы у него была профессиональная панель инструментов, то лучше воспользоваться перемещаемой панелью, как у программ из MS Office. Такие панели можно двигать, можно отрывать их от формы и делать из них отдельное окно. Впрочем, давайте сразу же напишем пример программы с такой панелью.

Создайте новое приложение, установите на форму компонент ControlBar с вкладки Additional. Это простой компонент, работает как панель, но он позволяет панелям инструментов перемещаться внутри себя по желанию пользователя. Свойство Align установите в Top, а свойство AutoSize – в True. Тогда компонент будет автоматически растягиваться или сужаться, когда вы будете двигать панели инструментов внутри него.

Теперь перейдите на вкладку Win32, и найдите там компонент ToolBar. Это и есть панель инструментов, установите ее поверх ControlBar. Как видите, ControlBar сразу принял нужную высоту. Если вы снимете выделение с этого компонента, то увидите, что он имеет оборку сверху. Обычно на программах такой оборки нет, поэтому снимем ее. Свойство EdgeBorders компонента раскрывается, и показывает, какие оборки есть. Установите ebTop в False. Теперь наша панель инструментов имеет профессиональный вид, только кнопочек ей недостает. Желательно и тут установить свойство AutoSize в True.

Начнем добавлять кнопки. Щелкните правой кнопкой мыши по панели инструментов и выберите команду NewButton. Появилась новая кнопка. Команда NewSeparator в этом меню создает разделители между кнопками. Удалить кнопку или разделитель просто – выделяете ее и нажимаете <Delete>.

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

Теперь установим на форму компонент ImageList и загрузим те же три картинки: dooropen.bmp, led2on.bmp и led2off.bmp.

Теперь выделите панель инструментов, и в свойстве Images выберите наш ImageList. Картинки из списка автоматически загрузились в кнопки. Если вам не понравилось распределение этих картинок, можете изменить их, изменяя свойство ImageIndex. Первая картинка там имеет индекс 0, вторая – 1, и так далее. Таким образом, вы можете присваивать кнопкам различные картинки из списка.

Давайте рассмотрим некоторые полезные свойства кнопки на панели инструментов. Сама кнопка называется ToolButton, но такого компонента на палитре инструментов нет, ее можно загрузить, только щелкнув по панели инструментов правой кнопкой мыши и выбрав команду NewButton. Кнопка по своим свойствам схожа с кнопкой SpeedButton. Рассмотрим их подробно.

AllowAllUp. Если установлено в True, то кнопка синхронизирует свое состояние с другими кнопками группы – в любой момент может быть нажата только одна кнопка группы. Это свойство работает только в том случае, если свойство Grouped (группировка) у кнопки также установлено в True. Выделите две последних кнопки и установите у него оба этих свойства в True.

Caption. Содержит надпись на кнопке, которая будет выходить вместе с изображением, если у самой панели инструментов свойство ShowCaptions установить в True. У первой кнопки в этом свойстве напишите "Выход", у второй – "Активна", а у третьей "Неактивна". Что там будет активно или нет, не имеет значения, сейчас мы просто учимся работать с панелью инструментов. Теперь выделите саму панель инструментов, и установите свойство ShowCaptions в True. Как видите, кнопки стали большими, и вместе с изображением на них выходит также и текст. В некоторых приложениях вы можете встретить такие панели инструментов. Снова верните это свойство в False. Чтобы вернуть кнопкам первоначальный размер, выделите первую кнопку и измените ее размеры. Установите свойства Height и Width равным 23.

Down. Как и прежде, это свойство отвечает за состояние кнопки – нажата она или нет. Чтобы повторить предыдущий пример, установите у первой кнопки Down в True.

ImageIndex. С этим свойством мы уже разбирались, оно отвечает за картинку, которая изображена на кнопке.

Style. Стиль кнопки. Пожалуй, самое интересное свойство. Если вы скомпилируете пример, то увидите, что при нажатии на кнопку, она возвращается в отжатое состояние. А как быть, если нам, как в прошлом примере, требуется, чтобы всегда была нажата только одна кнопка из группы? Мы уже сгруппировали две последние кнопки и указали им синхронизировать состояние с другими кнопками группы. Теперь снова выделите их, а в свойстве Style выберите tbsCheck. Этот стиль позволяет кнопке оставаться в нажатом состоянии. Чтобы отжать ее, нужно будет снова щелкнуть по кнопке. Если же кнопки сгруппированы, как в нашем примере, то нажатие на другую кнопку отожмет первую.

Сама панель инструментов также имеет ряд интересных свойств, которые требуется знать. Выделите ее, и посмотрите на Инспектор Объектов. Такие свойства, как Align, Height и Width мы разбирать не будем, так как знакомы с ними по другим компонентам.

AutoSize. Если True, то панель автоматически выравнивает высоту, учитывая высоту кнопок.

ButtonHeight. Определяет высоту кнопок, создаваемых на этой панели.

ButtonWidth. Определяет ширину кнопок на этой панели. Чтобы кнопки были квадратными, оставляйте эти свойства равными друг другу.

Caption. Название панели инструментов, которое будет видно, если снять панель инструментов с места и сделать из нее отдельное окно. Укажите в этом свойстве "Файл".

Flat. Если равно True, то кнопки выглядят современно, без выпуклостей.

List. Работает, если ShowCaptions установлен в True. Если равно True, то изображение прижмется к левой границе, а текст – к правой. Иначе изображение будет сверху, а текст – снизу кнопки.

ShowCaptions. Разрешает или запрещает показ текста на кнопках.

Кроме того, мы знаем, что кнопки могут иметь разные состояния, и быть активными или неактивными (это зависит от свойства Enabled ). Обычная кнопка в неактивном состоянии имеет рисунок серого тона. Кнопки имеют три варианта изображения – обычное, неактивное, и когда над кнопкой располагается указатель мыши. В один контейнер ImageList невозможно загрузить изображения различных состояний кнопок. Если вы желаете использовать все три состояния, то вам придется устанавливать три контейнера ImageList для изображений. В каждый контейнер вы добавляете картинку своего состояния, важно, чтобы эти картинки имели одинаковый индекс, то есть, чтобы они соответствовали друг другу по очередности в списке. Далее, вы устанавливаете:

Images. Здесь вы указываете контейнер с обычным изображением кнопки, у нас это ImageList1.

DisabledImages. Здесь вы указываете контейнер с изображениями недоступных кнопок.

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

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

DragKind. Пожалуй, наиболее интересное свойство панели инструментов. Оно может иметь два варианта – dkDrag (по умолчанию), и dkDock. Если установлено dkDrag, то панель можно будет перемещать только внутри ControlBar. Для этого нужно указателем мыши ухватиться за вертикальную черточку в левой части панели и перемещать ее. А вот если установить в этом свойстве dkDock, то панель инструментов можно будет снять с ControlBar, установить ее внутри окна программы или даже за ее пределами. Попробуйте это сделать.

Теперь еще один интересный пример панели инструментов. Кнопки на этой панели можно связывать с главным или всплывающим меню! То есть, если у вас есть главное меню, и там есть команда "Выход", которую вы уже запрограммировали, то нет нужды писать этот же код у кнопки, достаточно связать ее с компонентом главного меню.

У нас нет кода обработчика события кнопки "Выход". Если есть – удалите. Установите на форму главное меню. Укажите там раздел "Файл" и подразделы "Открыть", "-" и "Выход". Свяжите меню с нашим ImageList, и пункту "Выход" присвойте картинку dooropen.bmp. Теперь создайте обработчик события для этого пункта и пропишите там

Close;

Сохраните проект, скомпилируйте его и посмотрите, как он работает. Теперь выделите кнопку "Выход" на панели инструментов, и в свойстве MenuItem выберите пункт меню, с которым нужно ассоциировать кнопку (у меня это N4). Если вы все сделали правильно, то при работе программы, если пользователь выберет команду "Выход" в меню или нажмет кнопку "Выход" на панели инструментов, выполнится один и тот же код.

Точно также кнопки можно связать с всплывающим меню, за это отвечает свойство PopupMenu, в котором вы можете выбрать всплывающее меню. Свойство DropDownMenu связывает кнопку с вспомогательным меню, если оно есть.

Мы изучили способы организации профессиональной панели инструментов, теперь ваши программы будут выглядеть более солидно.