FireMonkey: 設計時にデフォルトのスタイルを変更する

By: Chikako Yonezawa

Abstract: この記事は、バージョン XE2 の時に作成した記事を 10.2 Tokyo 用に書き直したものです。

Delphi/C++Builder/RAD Studio の FireMonkey のコンポーネントにはデフォルトスタイルが定義されています。
このスタイルを変更することで新たな効果を追加することが可能です。

    はじめに

Delphi/C++Builder/RAD Studio でサポートされている FireMonkey では、「各コンポーネントのルック アンド フィールは、スタイルとして定義し、そのスタイルをコンポーネントに割り当てる」という方法を採用しています。
アプリケーションに別のスタイルを適用するだけで、アプリケーション全体のルック アンド フィールを簡単に変更できます。
デフォルトスタイルの変更は、設計時および実行時に行うことが可能です。
この記事では FireMonkey アプリケーションの設計時に、デフォルトのスタイルを変更する方法について簡単なサンプルを作り説明します。

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

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

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

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

     

    デフォルトスタイルの変更

Panel コンポーネントは、アプリケーションのレイアウトを整えるのに便利なコンポーネントなので、比較的よく使用されます。しかし、FireMonkey の TPanel コンポーネントをオブジェクトインスペクタで確認すると、VCL コンポーネントの時に存在した Panel コンポーネントに色を設定するためのプロパティが存在しません。

 

これは、この記事の最初で触れたように各コンポーネントのルック アンド フィールは、スタイルとして定義し、そのスタイルをコンポーネントに割り当てるという方法を採用しており、このように色を変える、形状を変更する、効果を追加するなどを行う場合は、デフォルトのスタイルを変更したり、カスタムスタイルを作成し、それを適用するという方法で行います。

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

     
  2. 画面がスタイルエディタに切り替わります。左側の「構造」ペインと、オブジェクトインスペクタを見ると TPanel のデフォルトスタイル (PanelStyle) は TRectangle コンポーネントのみで構成されていることが解ります。

     
  3. では実際に色を変えてみましょう。「構造」ペイン内の PanelStyle の部分をマウスで選択すると、オブジェクトインスペクタが、この TRectangle コンポーネントに切り替わります。色を単純に変更するのは、Fill プロパティを展開し、Fill.Color プロパティの値を変更するだけです。この例では、Teal 色を選択しています。スタイルエディタの真ん中に表示されている四角の部分に選択した Teal 色が反映されます。

     
  4. [スタイルを適用]のボタンをクリックします。

     
  5. Unit1 タブをクリックして設計画面に戻ると、Panel に色が適用されているのを確認できます。

     
  6. そして、ツールパレットから、もう一つ TPanel をフォーム上に張り付けると、デフォルトスタイルが更新されているので、なにも設定することなく、すでに色のついた TPanel となります。


     

    デフォルトスタイルに効果を追加

スタイルに効果を追加する例をお見せします。

  1. ツールパレットより TEdit をフォームに張り付けます。