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

投稿者:: Chikako Yonezawa

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

    はじめに

Delphi/C++Builder/RAD Studio XE2 でサポートされた FireMonkey では、各コンポーネントのルック アンド フィールは、スタイルとして定義し、そのスタイルをコンポーネントに割り当てるという方法を採用しています。FireMonkey では、アプリケーションに別のスタイルを適用するだけで、アプリケーション全体のルック アンド フィールを簡単に変更できます。

Hide image
Click to see full-sized image

Hide image
Click to see full-sized image

Hide image
Click to see full-sized image

Hide image
Click to see full-sized image

FireMonkey の各コンポーネントはデフォルトのスタイルを持っており、このデフォルトのスタイルを変更し、新たな効果を追加することができます。

デフォルトスタイルの変更は、設計時および実行時に行うことが可能です。ここでは FireMonkey アプリケーションの設計時に、デフォルトのスタイルを変更する方法について簡単なサンプルを作り説明します。

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

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

Hide image
Click to see full-sized image

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

Hide image
Click to see full-sized image

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

Hide image
Click to see full-sized image

  1. これは、この記事の最初で触れたように各コンポーネントのルック アンド フィールは、スタイルとして定義し、そのスタイルをコンポーネントに割り当てるという方法を採用しており、このように色を変える、形状を変更する、効果を追加するなどを行う場合は、デフォルトのスタイルを変更したり、カスタムスタイルを作成し、それを適用するという方法で行います。設計画面上で、Panel1 を選択し、マウスの右ボタンを押してポップアップメニューを表示し、表示されたメニューの中から「デフォルトスタイルの編集」を選択します。

Hide image

  1. 画面がスタイルエディタに切り替わります。スタイルエディタの右側のリストをみると、TPanel のデフォルトスタイル (PanelStyle) は TRectangle コンポーネントのみで構成されていることが解ります。

Hide image
Click to see full-sized image

  1. では実際に色を変えてみましょう。リスト側の PanelStyle の部分をマウスで選択すると、オブジェクトインスペクタが、この TRectangle コンポーネントに切り替わります。色を単純に変更するのは、Fill プロパティを展開し、Fill.Color プロパティの値を変更するだけです。

Hide image
Click to see full-sized image

  1. この例では、Teal 色を選択しています。スタイルエディタの真ん中に表示されている四角の部分に選択した Teal 色が反映されます。

Hide image
Click to see full-sized image

  1. [適用して閉じる] のボタンをクリックして設計画面に戻ると、Panel に色が適用されているのを確認できます。

Hide image
Click to see full-sized image

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

Hide image
Click to see full-sized image

別の例をお見せします。

  1. ツールパレットより TEdit をフォームに張り付けます。
  2. 先程と同様に TEdit を選択し、マウスの右ボタンをクリックし、「デフォルトスタイルの編集」を選択して、スタイルエディタに切り替えます。リスト側をみると TEdit のデフォルトスタイルである EditStyle の左側に▲の印があり、これをマウスでクリックすると展開された内容が表示されます。

Hide image

  1. 先程の PanelStyle は TRectangle コンポーネントだけで構成されていましたが、この EditStyle は複数のコンポーネントで構成されています。EditStyleには、もともと TGlowEffect コンポーネントが含まれており、このコンポーネントの効果により、フォーカスが当たると、薄くブルーの表示が Editの枠の外に行われていますが、これをもう少し目立つ色に変えてみましょう。

Hide image

  1. このリストの TGlowEffect をマウスで選択し、オブジェクトインスペクタ上の表示を確認します。

Hide image

  1. この TGlowEffect では効果の GlowColor プロパティ に青っぽい色が指定されており、影の透明度(0~1)を表す Opacity プロパティが 0.9、影に適用されるボカシの量(0~9)である Softness プロパティが 0.2 で設定されています。さらに Trigger プロパティにフォーカスがあったときのみ効果が表示されるように IsForcused=true が設定されています。これを GlowColor プロパティを Green に、Softness プロパティを 1 に変更し、[適用して閉じる] ボタンを押して、設計画面に戻ります。

Hide image

  1. [F9] を押してアプリケーションを実行し、Edit にフォーカスを与えると変更した内容が反映されたことが解ります。

Hide image

  1. また、もうひとつ TEdit コンポーネントをフォームに張り付け、同様に実行すると、追加した Edit コンポーネントにも効果が適用されていることを確認できます。

Hide image

この Edit のデフォルトスタイルを、もう少し変更します。

  1. 設計画面に戻り、フォーム上を見ると左上に StyleBookコンポーネントが張られています。これは最初にデフォルトスタイルを変更した際、その内容を保存するために TStyleBook コンポーネントが自動的に生成され、フォーム上に配置されるためです。この StyleBook コンポーネントをマウスでダブルクリックしても、スタイルエディタに切り替わります。

Hide image

  1. 先程と同様にリスト部分の EditStyle を展開し、TGlowEffect の右側にある×部分をクリックします。

Hide image

  1. 一旦リストが閉じるので、再度展開すると TGlowEffect が削除されています。

Hide image

  1. 次に、ツールパレットから TInnerGlowEffect をマウスでドラッグし、リスト上の EditStyle にドロップします。このようにリスト上での操作で、カスタムスタイルにコンポーネントを追加・削除することができます。

Hide image
Click to see full-sized image

  1. リスト上の InnerGlowEffect1 を選択し、オブジェクトインスペクタ上で Enabled, GlowColor, Trigger プロパティの内容を以下の図のように変更し、[適用して閉じる] をクリックして設計画面に戻ります。

Hide image

  1. [F9]ボタンを押し、アプリケーションを実行させると、新しく設定した効果が有効になります。

Hide image

    まとめ

この記事ではデフォルトスタイルを設計時に変更する方法を説明しました。

設計時のスタイルの変更はコードを1行も記述することなく行うことができ、変更したデフォルトスタイルは同じコンポーネントに自動的に引き継がれるので、コンポーネントを新しく作成するという手間をかけることは無くなり開発効率も向上します。また、FireMonkey では多数の効果を与えるコンポーネントが用意されているので、リッチな外観のアプリケーションも簡単に作成することができます。



次からのサーバー応答:: ETNASC03