


 
 
 
 
 
 
 |
Delphi2010 分類ボタン(CategoryButtons) 2010/09/18 |
前回は[Additional]内の「ColorListBox」(カラーリストボックス)について見ましたので、今回は同じく[Additional]内の「CategoryButtons」(分類ボタン)について見てみます。分類ボタンは Delphi6 にはありません。
分類ボタンは、複数の分類化されたツールバーを1まとめにしたような感じのもので、それぞれに分類名を付けたりする事が出来るようです。分かるようで、何だかよく分かりませんので、取り合えず、配置してみます。1つ目ですので Nameプロパティは「CategoryButtons1」となります。
外観は、何だか凹んだパネルか、一見スクロールボックスかのように見えますが、上にコンポーネントを配置するタイプのものではなく、このコンポーネントのプロパティ内に含めていくようなタイプの様子です。<オブジェクトプロパティ>を見ると、よくあるパターンな Alignプロパティの指定、Colorプロパティ等の色指定、などあるようですが、取り合えず、Categoriesプロパティというものがあります。これを選択すると右端に[…]ボタンが表示され、それをクリックすると「カテゴリエディタ」が表示されます。<フォームデザイナ>での分類ボタン「CategoryButtons1」をダブルクリック、でも表示されますし、右クリックして表示されるポップアップメニューの「カテゴリエディタ」でも表示されます。

又は ダブルクリック 又は

↓
↓

カテゴリエディタ表示
左上のアイコンへマウスを移動すると「新規追加」と表示されますので、これをクリックします。
すると、分類項目が1つ増えます。CategoryButtons プロパティには親クラスの名前の「CategoryButtons1」が表示されています。
それでは、Caption プロパティを指定しておきます。分類タイトルを書きます。例として「ぶんるいタイトル1」と記入してみました。
<カテゴリエディタ>を閉じると・・・
と表示されているのが分かります。
これだけだと分かりにくいかもしれないので、もう1つ追加してみます。上記と同様に<カテゴリエディタ>で追加するのも良いですが、今度は、<構造>から追加してみます。「CategoryButtons1」内の「Categories」に合わせた状態で右クリックしポップアップメニュー「項目を追加」をします。
すると上記の「新規追加」同様に、分類項目が1つ増えます。
それでは、Caption プロパティを指定して分類タイトルを書きます。例として「ぶんるいタイトル2」と記入してみました。
それでは、分類項目の中にボタンを登録していってみます。
上記と同様にして、<カテゴリエディタ>を表示させ、分類項目を選択し(ここでは「ぶんるいタイトル1」の 0 - TButtonCategory を選択)、<オブジェクトプロパティ>で Itemsプロパティを選択し、右端の[…]ボタンをクリックします。
<カテゴリエディタ>が表示されます。左上のアイコンへマウスを移動すると「新規追加」と表示されますので、これをクリックします。

カテゴリエディタ表示
↓

ボタンが1つ追加されました。何も表示されていない状態なので、Captionプロパティにボタン上の文字を記入します。ここでは「A」と書いてみます。

↓

1つだけだとさびしいので、もう1つ作成します。Captionプロパティには「ABCDE」と書いてみます。
<カテゴリエディタ>を閉じてフォームの画面を見てみると…
という感じになっています。「ABCDE」が表示しきれず「A..」という省略表記になってしまいました。「CategoryButtons1」の ButtonWidthプロパティを「24」から「48」にしてみます。
ボタンの文字は表示されるようになりましたが・・・
全てのボタンの横幅が変わってしまうので、余り触らないほうがいいかもしれませんので、ボタン上の文字もほどほどにした方がいいのかも・・・
取り合えず、保存・コンパイル(再構築)・実行してみます。

↓ ボタンの上にマウスを移動すると

色が変わりますね
↓

↓ 左端の「>>」をクリックすると

ボタン内容が閉じられて分類タイトルが表示されます
最初にボタン内容が閉じられていて分類タイトルを表示させたい場合には、<カテゴリエディタ>を表示させて、ボタン分類「0 - TButtonCategory」の Collapsedプロパティを True にします。
何度も作業をしていると、<カテゴリエディタ>を動かすのが面倒になってきますが、そういう場合は<構造>を利用すると直接アクセスできますのでプロパティ指定変更の作業は楽になると思います。
さて、次は「ぶんるいタイトル2」の方を作業しますが、こちらには文字のボタンではなく、画像のボタンを使えるようにしてみます。そのためには、例によって例のごとく、イメージリストを利用します。[Win32]内の「ImageList」から配置します。

↓

取り合えず例として、前回の「テスト7」で作成したアイコンファイル4つを「テスト8」のフォルダにコピーして、それらを追加してみます。
<オブジェクトインスペクタ>にて「CategoryButtons1」の Imagesプロパティに「ImageList1」を指定します。
<構造>で「CategoryButtons1」内の「Categories」内の「1 - TButtonCategory」内の「Items」を選択して右クリックしポップアップメニュー「項目を追加」を行います。
上記では Captionプロパティを指定していましたが、ここでは、ImageIndexプロパティを指定します。イメージリスト「ImageList1」で登録してある画像/アイコンの番号を指定する訳です。まずは「0」を指定します。
同様にして、4つアイコンを追加しましたから、4つボタンを作りました。
それでは、保存・コンパイル(再構築)・実行してみます。
各ボタンをクリックした時には・・・というイベントハンドラは、各ボタンに OnClickイベントがありますので、そこでコーディングをすれば可能です。
<オブジェクトインスペクタ>にて「CategoryButtons1」の BackgroundGradientColorプロパティに色を指定すると背景色にグラデーションを行う事が出来るようになります。デフォルトの「clNone」を指定している場合はグラデーション表示は行われません。
また、BackgroundGradientDirectionプロパティで背景グラデーションの方向を指定出来ます。デフォルトは「gdHorizontal」(水平方向)ですが、「gdVertical」(垂直方向)にも出来ます。
各ボタン分類でグラデーションを行いたい場合は、それぞれの GradientColorプロパティで色を指定すれば可能です。デフォルトの「clNone」を指定している場合はグラデーション表示は行われません。
ボタン分類のグラデーションの方向は、<オブジェクトインスペクタ>にて「CategoryButtons1」の GradientDirectionプロパティで一括して指定できます。デフォルトは「gdHorizontal」(水平方向)で、「gdVertical」(垂直方向)に指定する事も可能です。
ですがまぁ、グラデーション表示は余りやりすぎず、ほどほどにしておいた方が無難かもしれません。
<オブジェクトインスペクタ>での「CategoryButtons1」の ButtonFlowプロパティは、ボタン分類のボタンの並びの方向を指定する事が出来ます。デフォルトは「cbfVertical」(縦方向)ですが、「cbfHorizontal」(横方向)にする事も可能です。

↓

↓ これで実行してみると

↓

色が… 隣をクリックすると戻りますが…
<オブジェクトインスペクタ>での「CategoryButtons1」では、このほか、
RegularButtonColor | 選択されていない通常の状態でのボタンの色を指定 |
HotButtonColor | ボタンにマウスカーソルを合わせたときのボタンの色 |
SelectedButtonColor | ユーザーがボタンを選択したときのボタンの色 |
があります。
また、実行時プロパティとして
CurrentCategory | 選択したTButtonCategoryオブジェクトの現在のカテゴリを返します。 |
SelectedItem | 選択されたボタンを返します。 |
FocusedItem | 現在フォーカスのあるボタンを指定します。 |
等があるようです。
メニュー、従来のツールバー、以外にも、こういったちょっと特殊なツールボタン風なコマンドボタンをアプリケーションに実装するというのも面白いかもしれません。
|
|
バッチファイル
BASIC
C言語のお勉強
拡張子な話
DOSプログラム
Delphi
>Delphi入門編
>Delphi2010
▲2010/09/17
2010/09/18
▼2010/09/19
シェアウェア
Script!World
データベース
|