FireMonkey: 設計時にカスタムスタイルを定義する

By: Chikako Yonezawa

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

    はじめに

この記事は予め「FireMonkey 設計時にデフォルトのスタイルを変更する」を読まれていることを前提にしています。

Delphi/C++Builder/RAD Studio でサポートされた FireMonkey では、各コンポーネントのルック アンド フィールは、スタイルとして定義し、そのスタイルをコンポーネントに割り当てるという方法を採用しています。

このスタイルは、デフォルトのスタイルをカスタマイズすることも、また、新しくカスタムスタイルを作成して適用することもできます。

    デフォルトのスタイルをカスタマイズする

まずは、FireMonkey アプリケーションの設計時にデフォルトのスタイルを変更し、それをカスタムスタイルとして登録し、登録したスタイルをコンポーネントに適用する方法を簡単なサンプルアプリケーションを例に説明します。

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

Hide image
Click to see full-sized image

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

Hide image
Click to see full-sized image

  1. 設計画面上で、Panel1 を選択し、マウスの右ボタンを押してポップアップメニューを表示し、表示されたメニューの中から「カスタムスタイルの編集」を選択します。

Hide image

  1. 画面がスタイルエディタに切り替わります。スタイルエディタの右側のリストで、PanelStyle (TPanelのデフォルトスタイル) を選択して、オブジェクトインスペクタ上で、Fill プロパティを展開し、Fill.Color プロパティの値を変更します。この例では Lightskyblue を選択しています。

Hide image
Click to see full-sized image

  1. オブジェクトインスペクタ上の StyleName プロパティの値を Panel1Style1 から LightskybluePanel に変更します。変更すると、スタイルエディタのリスト部分に表示されていた PanelStyle が、変更した LightskybluePanel に置き換わります。

Hide image
Click to see full-sized image

これでデフォルトのスタイルを変更した LightskybluePanel スタイルの完成です。[適用して閉じる] ボタンをクリックして設計画面に戻ります。

設計画面に戻っても、フォーム上のパネルの色は変化していません。フォーム上のパネルに作成したカスタムスタイルを適用させるには、設計画面上で適用したいコンポーネント (ここでは Panel) を選択し、オブジェクトインスペクタで、StyleLookup プロパティの値を LightskybluePanel に変更します。

StyleLookup プロパティの値を変更すると、Panel の色が変わります。

Hide image
Click to see full-sized image

また、プログラム中で、StyleLookup プロパティの値を変更して別のスタイルを適用することもできます。

  1. 今設定した StyleLookup プロパティの値をクリア (空白) します。Panel の色が元に戻ります。
  2. ツールパレットから、TButton をフォーム上に配置し、ダブルクリックして、OnClick イベントハンドラを生成します。
  3. 生成した OnClick イベントハンドラに、以下のコードを記述します。

Delphi

  Panel1.StyleLookup := 'LightskybluePanel';

C++Builder

  Panel1->StyleLookup = "LightskybluePanel";
  1. [F9]ボタンを押し、アプリケーションを実行し、ボタンをクリックすると、作成したカスタムスタイルが適用され、Panel の色が変化します。

Hide image
Click to see full-sized image

このように StyleLookup プロパティの値をプログラム内で設定することにより、動的にコンポーネントに適用されているスタイル効果を変更することができます。たとえば、アプリケーション内で、値の分岐で適用したい効果を変えたい場合などに有効です。

    新しくカスタムスタイルを作成する

デフォルトスタイルを利用するのではなく、カスタムスタイルを新規に作成するには、スタイルエディタ上で新しくスタイルを作成します。

  1. 上記で作成したアプリケーションが動作している場合は終了し、設計画面に戻ります。
  2. スタイルを修正したので、設計画面上に動的に TStyleBook コンポーネントが StyleBook1 という名前で生成されています。この StyleBook1 をマウスでダブルクリックすると、スタイルエディタに切り替わります。
  3. スタイルエディタのリスト上には、先程作成した LightskybluePanel スタイルがあります。まず、このスタイルと同じような、単一のコンポーネントによるスタイルを作成します。ツールパレットから「Shapes」カテゴリ内の TRectangle コンポーネントをマウスでドラッグし、スタイルエディタ上の「スタイルの作成」の点線枠内にドロップします。

Hide image

  1. 新しく newstyle1 というスタイルが作成されます。

Hide image

  1. オブジェクトインスペクタ上で、StyleName プロパティの値を newstyle1 から PlumPanel と変更します。変更すると、スタイルエディタのリスト側の名前も PlumPanel に変わります。

Hide image
Click to see full-sized image

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

これで完成です。[適用して閉じる] ボタンをクリックして設計画面に戻ります。

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

また StyleLookup プロパティの値をクリア (空白) にし、Button1 の OnClick イベントハンドラの LightskybluePanel の部分を PlumPanel に修正し、実行するとボタンを押した際に適用されるのを確認できます。

Hide image
Click to see full-sized image

次に、複数のコンポーネントからなるカスタムスタイルを作成します。

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

  1. スタイルエディタで、ツールパレットから「Layouts」カテゴリ内の TLayout コンポーネントをドラッグし、先程と同じようにスタイルエディタ上の「スタイルの作成」の点線内にドロップします。

Hide image

  1. スタイルエディタのリスト上に newstyle1 が追加されます。
  2. まずスタイルの名前を変更しておきます。オブジェクトインスペクタ上で、StyleName プロパティ の値を newstyle1 から ImageText に変更します。
  3. スタイルエディタ上に表示されている四角の枠の角をドラッグして適当な大きさに広げておきます。

Hide image
Click to see full-sized image

  1. ツールパレットから TImage をドラッグし、広げた枠の中、または、リスト上の ImageText上でドロップします。

Hide image
Click to see full-sized image

  1. リスト上で見ると、ImageText(TLayout)の子として Image1が設定されます。

Hide image
Click to see full-sized image

  1. スタイルエディタ上で配置した TImageコンポーネントを適切な位置と大きさを変更しておきます。

Hide image

  1. オブジェクトインスペクタ上に表示されているのが TImage であることを確認し、Bitmap プロパティに何か画像を設定します。

Hide image
Click to see full-sized image

  1. ツールパレットから TText をドラッグし、ImageText の範囲内、または、リスト上のリスト上の ImageText上でドロップします。
  2. TImage と同様に ImageText(TLayout)の子として Text1が設定されます。

Hide image

  1. スタイルエディタ上で配置した TTextコンポーネントを適切な位置と大きさを変更しておきます。
  2. オブジェクトインスペクタ上に表示されているのが TText であることを確認し、効果が解りやすいよう Text プロパティの値に"組み合わせ"と入力します。

Hide image
Click to see full-sized image

これで完成です。[適用して閉じる] ボタンをクリックして設計画面に戻ります。

まずは、設計画面上の Panel1 コンポーネントを選択して、オブジェクトインスペクタ上で StyleLookup プロパティの値を ImageText に変更します。新しく作成したスタイルが適用されます。

Hide image
Click to see full-sized image

また StyleLookup プロパティの値をクリア (空白) にし、Button1 の OnClick イベントハンドラの PlumPanel の部分を ImageText に修正し実行して、動的にスタイルが変化することを確認できます。

Hide image
Click to see full-sized image

    まとめ

この記事では、設計時にカスタムスタイルを作成し、作成したカスタムスタイルをコンポーネントに適用する方法を説明しました。

デフォルトスタイルの時と同様に、コードを1行も記述することなくカスタムスタイルを定義することができ、作成したスタイルは、プログラム内で動的に変更することにより別の効果をコンポーネントに与えることが可能です。

Server Response from: ETNASC03