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

By: Chikako Yonezawa

Abstract: この記事は、バージョン XE2 の時に作成した記事を 10.2 Tokyo 用に書き直したものです。(カスタムスタイルの新規作成の箇所は別記事で作成します)

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

    はじめに

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

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

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

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

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

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

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

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

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

     
  2. 画面がスタイルエディタに切り替わります。「構造」ペインのリストで、Panel1Style1 (TPanelのデフォルトスタイル) を選択します。

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

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


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

     
  6. 設計画面に戻っても、フォーム上のパネルの色は変化していません。

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

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

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

  1. 今設定した StyleLookup プロパティの値をクリア (空白) します。Panel の色が元に戻ります。