FireMonkey: 設計時に新しいカスタムスタイルを作成する

投稿者:: Chikako Yonezawa

概要: この記事は、バージョン XE2 の時に作成した記事を 10.2 Tokyo 用に書き直したものです。

Delphi/C++Builder/RAD Studio の FireMonkey ではデフォルトのスタイルをカスタマイズしたり、新しくカスタムスタイルを作成することができます。

    はじめに

この記事は、予め

を読まれていることを前提にしています。

Delphi/C++Builder/RAD Studio でサポートされた FireMonkey では、各コンポーネントのルック アンド フィールは、スタイルとして定義し、そのスタイルをコンポーネントに割り当てるという方法を採用しています。
スタイルは、デフォルトのスタイルをカスタマイズすることも、また、新しくカスタムスタイルを作成して適用することもできます。

まずベースとなるサンプルアプリケーションを作成し、

  • 単一のコンポーネントによるカスタムスタイルの作成
  • 複数のコンポーネントからなるカスタムスタイルの作成

の基本的な作成手順を説明します。

    サンプルアプリケーションの作成

  1. IDE のメニューより [ファイル|新規作成|マルチデバイスアプリケーション - Delphi] または [ファイル|新規作成|マルチデバイスアプリケーション - C++Builder] を選択します。

     
  2. 「マルチデバイスアプリケーション」の画面が開くので、「空のアプリケーション」を選択して [OK] ボタンをクリックします。

     
  3. ツールパレットからフォーム上に TStyleBook コンポーネントを配置します。

    単一のコンポーネントによるカスタムスタイルの作成

デフォルトスタイルを利用するのではなく、カスタムスタイルを新規に作成するには、スタイルエディタ上で新しくスタイルを作成します。
まず、「FireMonkey: 設計時にカスタムスタイルを定義する 」 で作成した LightskybluePanel スタイルと同じような単一のコンポーネントによるスタイルを作成します。

  1. 設計画面上の StyleBook1 をダブルクリックします。スタイルエディタに切り替わります。

     
  2. ツールパレットから「Shapes」カテゴリ内の TRectangle コンポーネントをマウスでドラッグし、「構造」ペインの StyleContainer に対しドロップ (またはスタイルデザイナ上にドロップ) します。

     
  3. 新しく Rectangle1 というスタイルが作成されます。
  4. 「構造」ペイン上の Rectangle1 をクリックして選択し、オブジェクトインスペクタ上で、StyleName プロパティの値を Rectangle1 から PlumPanel に変更します。変更すると「構造」ペイン上のリスト上の名前も PlumPanel に変わります。


     
  5. オブジェクトインスペクタ上で、Fill プロパティを展開し、Fill.Color プロパティの値を変更します。ここでは Plum を選択します。


     
  6. [スタイルを適用] ボタンをクリックしてスタイルを保存します。

     
  7. Unit1 タブをクリックして設計画面に戻ります。TPanel をフォーム上に置きます。作成したスタイルをフォーム上のコンポーネントに適用するため、Form の StyleBook コンポーネントの値を StyleBook1 に設定します。

     
  8. オブジェクトインスペクタ上で、Panel コンポーネントの StyleLookup プロパティの値を PlumPanel に変更します。新しく作成したスタイルが適用されます。

このように、単一のコンポーネントによる新しいスタイルを作成するには

  • スタイルエディタで、StyleContainer に対し、コンポーネントを追加する
  • 追加したコンポーネントに対し、プロパティ等の値を変更してスタイルを作成する

という手順で行ないます。

    複数のコンポーネントからなるカスタムスタイルの作成

複数のコンポーネントからなるスタイルを定義する場合には「Layouts」カテゴリ内にあるレイアウトコンポーネントを使用します。
例えば TLayout は複数のグラフィック オブジェクトを同じ親の下にまとめる場合に使用し、TGridLayout は各セルのサイズが等しいグリッド内に子コントロールを整列させるようなスタイルを作成したい場合に使用します。
ここでは画像と文字を表示するスタイルを作成します。

  1. ツールパレットから「Layouts」カテゴリ内の TLayout コンポーネントをマウスでドラッグし、「構造」ペインの StyleContainer に対しドロップします。(スタイルデザイナ上にドロップしてもかまわないのですが、ここれは別のスタイルを作るため、あえて「構造」ペイン側にドロップします)