VCL ライブラリに含まれる TCategoryButtonsコンポーネントは、ボタンをグループ（カテゴリ）ごとに整理して表示できる便利なコントロールです。
以下のような、Outlook のナビゲーションバーや、ツールのパレットのような UI を簡単に作成できます。
主な特徴
- カテゴリ管理: ボタンを
Categoriesという単位でグループ化し、それぞれに名前（Caption）を付けられます。 - 折りたたみ機能: 各カテゴリは展開・折りたたみが可能です。
- 柔軟なレイアウト: ボタンのサイズ、アイコンの有無、テキストの表示位置などを細かく設定できます。
基本的な構成要素
このコントロールは主に 2 つの階層で構成されています。
- Categories:
TButtonCategoriesコレクション。グループそのもの。 - Items:
TButtonItemコレクション。カテゴリ内にある個々のボタン。
基本的な使い方
「ファイル」->「新規作成」->「Windows VCL アプリケーション – C++Builder」で、空のプロジェクトを作成します。
使用するコンポーネントのDrop
TCategoryButtonsとTImageListコンポーネントをフォームにDropします。
TImageListへの画像の追加
TImageListへ画像を追加します。ImageList1をダブルクリックし、「追加」ボタンから画像を追加します。
ここでは、以前のバージョンの「Borland Shared\Images\Buttons\」内の画像を追加しています。
ButtonCategoriesの追加
CategoryButtons1(TCategoryButtons)を右クリックして表示されるポップアップメニューの「カテゴリエディタ」をクリックします。
「追加」ボタンをクリックしてButtonCategoriesを追加します。ここでは、２つのButtonCategoriesを追加しています。
「Caption」プロパティで、表示するカテゴリ名を設定します。
ボタンの追加
「TButtonCategories」のItemsピロパティの「…」か、Itemsを右クリックして表示されるポップアップメニューの「項目の追加」ボタンをクリックしてボタンを追加します。
ここでは、「テスト１カテゴリ」の３個、「テスト２カテゴリ」に５個のボタンを追加しました。
ボタンへのアイコンの設定
各ボタンにアイコンを設定してみましょう。先程、画像を追加した「ImageList1」を、「CategoryButtons1」の「Images」プロパティに設定します。
次に、画像を設定するボタン（Items）を選択後、そのImageIndexプロパティに「ImageList1」の画像番号を設定します。
boVettialCategoryCaptionsプロパティ
CategoryButtons1のButtonOptions内の「boVettialCategoryCaptions」プロパティを「False」に設定するとカテゴリ名が１行で表示され、その下にボタンが表示されるようになります。
boFullSizeプロパティ
CategoryButtons1のButtonOptions内の「boFullSize」 を 「True」 にするとボタンがカテゴリの横幅いっぱいに広がり、最近のアプリらしいサイドバーメニューのような外観になります。
その他のプロパティ
以下のプロパティで、動作時の色を設定ですます。
HotButtonColor | マウスオーバー時の色 |
SelectedButtonColor | 選択時の色 |
イベント処理
OnButtonClicked
CategoryButtons1コンポーネントの「OnButtonClicked」は、ボタンがクリックされた時に発生します。どのボタンが押されたかは引数の ButtonItem で判別します。
OnClickイベント
個々のボタンの「OnClick」イベントを使用することで、そのボタンが押されたときのイベント処理も可能です。
実行画面
以下、実行画面です。
プロジェクのソースコード
プロジェクのソースコードは、以下からD/Lできます。
