アプリの外観を決める「スタイル」
カスタムスタイルの定義
コートとなるパネルの色を、黒にします。これにはスタイルを使います。一度定義したスタイルは、他のコンポーネントにも割り当てられます。スタイルを切り替えることで、作成したアプリケーションのルックアンドフィールを簡単に変更することができます。
では、スタイルを作成してみましょう。設計画面上でCourtパネルをマウスでクリックし、右ボタンを押して、表示されたポップアップメニューから［カスタムスタイルの編集］を選択します。
すると、スタイルデザイナが表示されます。スタイルデザイナを使えば、FireMonkeyスタイルの作成や編集、テストを簡単に実行できます。
それではCourt（TPanel）のスタイル編集開始です。スタイルデザイナ上では、図のようにCourtが選択されています。右側ツールパレットからTRectangleを中央のパネル上にドラッグ&ドロップします。
図4 スタイルデザイナ
配置したTRectangleのプロパティ設定を、以下のように設定します。
下パネルのプロパティ
| プロパティ | 値 |
|---|---|
| Fill.Color | Black |
すると、図のように黒色のパネルが確認できます。
図5 黒色のパネル
作成した黒い色のスタイルを他でも使用できるように、StyleNameプロパティを分かりやすい名前に変更しておきます。
| プロパティ | 値 |
|---|---|
| Name | BlackPanel |
スタイルエディタの［×］ボタンを押し、設計画面に戻ります。
作成したスタイルをCourtパネルに適用するには、Courtパネルを選択し、オブジェクトインスペクタのStyleLookupプロパティを変更します。
Court
| プロパティ | 値 |
|---|---|
| StyleLookup | CourtStyle1 |
