この記事は、エンバカデロのシニアセールスコンサルタントであるAl Mannarinoのブログの抄訳です

以前、Delphiの開発者から「FMX(FireMonkey)のTEditの背景色を変更するにはどうしたらよいか?」という質問がありました。多くの方がご承知のように、VCLのTEditでは、以下のようにTEditのColorプロパティを設定するだけで変更できます。

例えば、アプリケーション実行時に、Edit1.Color := clYellowを呼び出した後、Edit1の表示は下図のようになります。

しかし、FMXのTEditにはColorプロパティがないので、FMX TEditで同じことをするにはどうすればいいのでしょうか？

FMXのTEditでは、この方法を実現するためには、以下のような3つのオプションがあります。

1. FMXスタイルを使用して、StyledSettings、StyleLookup、StyleNameのプロパティを制御
2. FireMonkeyスタイルデザイナを使用して、コンポーネントのコピーを使用して新しいFMXスタイルを作成し、実行時に切り替える
3. FMXマルチデバイスフォームでEdit1を右クリックし、[カスタムスタイルの編集]を選択

ここでは、上記のオプションのうち3つ目の「カスタムスタイルの編集」を使った方法を見てみましょう。

FMXマルチデバイスフォームでTEditを選択し、右クリックして表示されるポップアップメニューの「カスタムスタイルの編集」を選択します。(下図を参照)

[カスタムスタイルの編集]を選択すると、下図のようにTEditのスタイルデザイナが開きます。

スタイルデザイナを開くと、下図のように構造ペイン内にFMXのEdit1に関する項目が表示されます。

上図で示す構造ペインは、FireMonkey（FMX）のコントロールは、サブコントロール、プリミティブシェイプ、ブラシ、装飾されたエフェクト等で構成しているツリー構造です。

これらの構成要素はスタイルとして定義され、スタイルブックに保存されます。スタイルの個々の要素は、内部的にリソースと呼ばれています。この用語にはいくつかの他の意味があるため、分かりやすくするために「スタイルリソース」という用語を使用しています。スタイルは、サブクラス化せずに多くのカスタマイズを提供します。

FMXのTEditのスタイルを好きなようにカスタマイズできます。

例えば、構造ペインで表示されるEdit1Style1のツリー内にbackground要素があります。TRectangleをTEditスタイル内に配置し、TRectangleのFill.Colorプロパティを使用して、FMXのTEditの背景色を変更できます。手順は、以下の通りです。

(1)構造ペインのEdit1Style1ツリー内のbackgroundを選択

(2)ツールパレットのカテゴリ[Shapes]内にあるTRectangleコンポーネントを選択し、スタイルデザイナのFMXフォームのEdit1の上にドラッグします。(下図を参照)

FireMonkeyでは、VCLとは異なり、コントロールの親子関係を自由に変更することができます。上記の例では、Rectangleはbackgroudに従属します。

(3) TRectangleをTEditの同じサイズへ合わせるようにサイズを調整します。(下図を参照)

(4) リソースオブジェクトとして検索できるようにTRectangleのStyleNameを変更する

構造ペインのRectangle1を選択し、オブジェクトインスペクタで、StyleNameプロパティを任意の名前に変更できます。

ここでは、例としてRectangle_backgroundという名前に変更します。(下図を参照)

TRectangleのStyleNameを任意の名前(ここでは、 “Rectangle_background “)に設定すると、FindStyleResourceメソッドを使用して、以下のコード例のように “Rectangle_background “という名前で指定されたスタイルをリソースオブジェクトとして見つけることができます。

(5) スタイルファイルを保存する

RAD Studioで標準提供されているFireMonkeyのスタイルファイルは、以下のパス内にStyleという拡張子で保存されています。

C:¥Program Files（x86)¥Embarcadero¥Studio¥<バージョン番号>¥Redist¥styles¥Fmx またはC:¥Users¥Public¥Documents¥Embarcadero¥Studio¥<バージョン番号>¥Styles

(バージョン番号には、10.4の場合は21.0、10.3の場合は20.0、10.2の場合は19.0等、RAD Studioの各バージョンに対応した番号が入ります。)

それでは、カスタマイズしたスタイルファイルを保存しましょう。

スタイルファイルの保存は、スタイルデザイナの[保存]アイコンをクリックします。(下図を参照)

保存するスタイルファイル名には任意の名前を指定できますが、ここではFMXEdit_Colorsという名前で以下のパスに保存します。(下図を参照)

C:¥Users¥Public¥Documents¥Embarcadero¥Studio¥21.0¥Styles (10.4の場合)

これで準備は完了です。

それでは、実際にFMXフォームで、さきほど保存したスタイルを使用してみましょう。

(1) オブジェクトインスペクタでFMXフォーム(Form1)のStyleNameプロパティにFMXEdit_Colorのスタイルを設定します。(下図を参照)

(2)フォーム上にTButtonを一つ配置します。(下図を参照)

(3) Button1をダブルクリックして、OnClickイベントハンドラを作成し、以下のコードを追加します。

(4)プロジェクトをビルドして、アプリケーションを実行する

(5) Button1をクリックすると、FMXのTEditは、下図のように黄色の背景色になります。(ただし、この実行サンプル例では、エディットボックスでテキスト文字の入力はできません)

ここでは、背景色を黄色、枠の色を赤色に設定しましたが、TRectangle.Fill.Colorプロパティ、TRectangle.Stroke.Colorプロパティを変更することで、それぞれ別の色に変更できます。詳しくはTRectangleのdocwikiを参照ください。

ご注意：FMXはマルチプラットフォームに対応していますが、プラットフォームごとにスタイルを作成する必要があります。 この例では、Windowsプラットフォーム向けのカスタマイズしたスタイルのみを作成しています。

他のプラットホームのスタイルをカスタマイズしたい場合は、下図のようにスタイルデザイナのプラットホームを追加するアイコンをクリックして新しいプラットホームを追加してください。

このように、FireMonkey(FMX)のすべてのコントロールは、TStyleBookをフォームにアタッチすることで実現しており、スタイルが読み込まれてフォームに適用されます。このスタイリングシステムによって様々なスタイルにカスタマイズすることができます。

今回ご紹介した例は非常にシンプルですが、是非 FireMonkeyスタイルを自由にカスタマイズしてみてください。

FireMonkeyの関連情報

• スタイルを使った FireMonkey アプリケーションのカスタマイズ
• FireMonkey スタイル デザイナ
• エンバカデロ MVPの細川氏によるビデオ「GWはFireMonkeyで遊んでみよう！」(35:00〜)
• FireMonkey (docwiki ja)
• Cross-platform development the FireMonkey way(英語)
• TMS mCL Software. – Set of components for true native macOS application development.
• FMX.Controls.Presentation.TPresentedControl.ControlType (docwiki ja)
• VCL vs. FireMonkey Pod-Cast(英語)
• FireMonkey プラットフォームに必要な準備(docwiki ja)