C++Builder 10.2 TokyoでレトロなラケットゲームをiOSで再構築してみる

アプリの外観を決める「スタイル」

カスタムスタイルの定義

　コートとなるパネルの色を、黒にします。これにはスタイルを使います。一度定義したスタイルは、他のコンポーネントにも割り当てられます。スタイルを切り替えることで、作成したアプリケーションのルックアンドフィールを簡単に変更することができます。

　では、スタイルを作成してみましょう。設計画面上でCourtパネルをマウスでクリックし、右ボタンを押して、表示されたポップアップメニューから［カスタムスタイルの編集］を選択します。

　すると、スタイルデザイナが表示されます。スタイルデザイナを使えば、FireMonkeyスタイルの作成や編集、テストを簡単に実行できます。

　それではCourt（TPanel）のスタイル編集開始です。スタイルデザイナ上では、図のようにCourtが選択されています。右側ツールパレットからTRectangleを中央のパネル上にドラッグ&ドロップします。

図4　スタイルデザイナ

　配置したTRectangleのプロパティ設定を、以下のように設定します。

下パネルのプロパティ

プロパティ	値
Fill.Color	Black

　すると、図のように黒色のパネルが確認できます。

図5　黒色のパネル

　作成した黒い色のスタイルを他でも使用できるように、StyleNameプロパティを分かりやすい名前に変更しておきます。

プロパティ	値
Name	BlackPanel

　スタイルエディタの［×］ボタンを押し、設計画面に戻ります。

　作成したスタイルをCourtパネルに適用するには、Courtパネルを選択し、オブジェクトインスペクタのStyleLookupプロパティを変更します。

Court

プロパティ	値
StyleLookup	CourtStyle1