Якщо вам в додатку буде потрібно лише пару-трійку кнопок в панелі інструментів, то простіше скористатися першим варіантом. Але якщо ви робите серйозну програму і бажаєте, щоб у нього була професійна панель інструментів, то краще скористатися переміщуваної панеллю, як у програм з MS Office. Такі панелі можна рухати, можна відривати їх від форми і робити з них окреме вікно. Втім, давайте відразу ж напишемо приклад програми з такою панеллю.
Створіть новий додаток, встановіть на форму компонент ControlBar з вкладки Additional. Це простий компонент, працює як панель, але він дозволяє панелям інструментів переміщатися всередині себе за бажанням користувача. Властивість Align встановіть в Top, а властивість AutoSize - в True. Тоді компонент буде автоматично розтягуватися або звужуватися, коли ви будете рухати панелі інструментів всередині нього.
Тепер перейдіть на вкладку Win32, і знайдіть там компонент ToolBar. Це і є панель інструментів, встановіть її поверх ControlBar. Як бачите, ControlBar відразу прийняв потрібну висоту. Якщо ви знімете виділення з цього компонента, то побачите, що він має оборку зверху. Зазвичай на програмах такої оборки немає, тому знімемо її. Властивість EdgeBorders компонента розкривається, і показує, які оборки є. Встановіть ebTop в False. Тепер наша панель інструментів має професійний вид, тільки кнопочок їй бракує. Бажано і тут встановити властивість AutoSize в True.
Почнемо додавати кнопки. Клацніть правою кнопкою миші по панелі інструментів і виберіть команду NewButton. З'явилася нова кнопка. Команда NewSeparator в цьому меню створює роздільники між кнопками. Видалити кнопку або роздільник просто - виділяєте її і натискаєте
Давайте створимо таку ж панель, як в попередньому випадку. Після першої кнопки вставте сепаратор, потім ще дві кнопки. Знову таки, ці кнопки опуклі, а в сучасних додатках вони виглядають більш плоскими. Виділіть саму панель, і властивість 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. Тепер створіть обробник події для цього пункту і пропишіть там
Збережіть проект, скомпілюйте його і подивіться, як він працює. Тепер виділіть кнопку "Вихід" на панелі інструментів, і у властивості MenuItem виберіть пункт меню, з яким потрібно асоціювати кнопку (у мене це N4). Якщо ви все зробили правильно, то при роботі програми, якщо користувач вибере команду "Вихід" в меню або натисне кнопку "Вихід" на панелі інструментів, виконається один і той же код.
Точно також кнопки можна пов'язати з спливаючих меню, за це відповідає властивість PopupMenu, в якому ви можете вибрати спливаюче меню. Властивість DropDownMenu пов'язує кнопку з допоміжним меню, якщо воно є.
Ми вивчили способи організації професійної панелі інструментів, тепер ваші програми будуть виглядати більш солідно.