［ビットマップ スタイル デザイナ］

グラフィック ユーティリティ：インデックス への移動

［ツール｜ビットマップ スタイル デザイナ］

［ビットマップ スタイル デザイナ］では、以下のことが可能です。

• FireMonkey スタイル（.style ファイル）を作成、編集、テストする

• VCL スタイル（.vsf ファイル）を作成、編集、テストする
• VCL スタイル（.vsf ファイル）を FireMonkey スタイル（.style ファイル）として保存することで VCL スタイルを FireMonkey スタイルに変換する

メモ: 既存の FireMonkey スタイル（.style ファイル）を開くには、FireMonkey スタイル デザイナを使用する必要があります。

［ビットマップ スタイル デザイナ］では、スタイル テンプレートを操作するだけです。つまり、パラメータを使ってオブジェクト ツリーを操作します。スタイル テンプレートには、フレームワークに依存しない定数形式があります。デザイナに統合されたスタイル変換コンポーネントでは、このテンプレートから実際のスタイルを生成します。

スタイルが何を表すかの詳細は、以下を参照してください。

• VCL スタイルの概要

• スタイルを使った FireMonkey アプリケーションのカスタマイズ

［ビットマップ スタイル デザイナ］ウィンドウ

［ビットマップ スタイル デザイナ］ウィンドウ（オブジェクト ツリー、オブジェクト/スタイル ビューア、［インスペクタ］の各パネル）

［ビットマップ スタイル デザイナ］は編集用に開く 名称未設定.vsf ファイル（VCL スタイル ファイル）で開きます。

［ビットマップ スタイル デザイナ］には、2 つまたは 3 つのパネルが表示されます（現在開いているオブジェクト ノードによって異なる）。

• 左側のパネルには、常にオブジェクト ツリーが表示されます。
• ［Objects］ノードを開くと、デザイナには他の 2 つのパネルが表示されます。
  • オブジェクト/スタイル ビューア（中央のパネル）
  • ［インスペクタ］（右側のパネル）
• 他のいずれかのノード（［Images］、［Fonts］、［Colors］、［SysColors］）を開くと、ビューアのみ表示され、そのビューアが中央パネルと右側パネルの領域を占めます。

オブジェクト ツリー

デザイナの左側にあるオブジェクト ツリーのパネルには、スタイル内のカスタマイズ可能な要素が表示されます。

以下の表では、オブジェクト ツリー内のノードについて説明します。

ノード	説明
（上向き/下向きの矢印）	現在のサブツリーの中で選択したオブジェクトを上下に移動させるボタン。
（［オブジェクトの複製］/ ［オブジェクトの削除］）	以下を行うためのボタンです。 オブジェクトのツリー内で選択したトップ レベルのオブジェクトの複製を追加します。複製したコピーはツリーの末尾に置かれ、新しい名前が付けられます（<名前>_Copy）。 オブジェクトのツリーからオブジェクトを削除します。 Embarcadero が作成したオブジェクトの削除や名前の変更はできませんが、自分でオブジェクトを新しく追加したり削除することができます。
［Objects］（オブジェクト）	［Button］（ボタン）、［Edit］（編集ボックス）、［Form］（フォーム）などの、スタイルを設定できるユーザー インターフェイス コントロール。ツリー構造で表示されます。
［Images］（画像）	コントロールの外見を選択するのに使用される画像ファイル。画像はコントロールの部品や状態を表します。グラフィック編集ソフトウェアを使って、このような画像を作成できます。
［Fonts］（フォント）	コントロールのテキストに使用されるフォントの一覧。通常、コントロールの部品や状態が異なればテキストも異なります。たとえば、［RadioButtonTextPressed］は、ラジオ ボタンをクリックしたときのテキストの外見を定義します。
［Colors］（色）	現在のスタイルで使用されている基本色の一覧。色には次の 2 つのカテゴリがあります。 第 1 のカテゴリには、画像から直接レンダリングされるコントロール部品に使用される色が含まれています。この場合、色項目には、基となる画像の色にアクセスする手段が用意されています。たとえば、［Window］項目では、フォームの背景の色を指定します。なお、この色を変更してもコントロール部品のレンダリング方法には影響がなく、その色にプログラムでアクセスする方法にすぎないことに注意してください。 第 2 のカテゴリには、実行時にコードでレンダリングされるコントロール（［Panel］、［ListBox］、［Grid］など）に使用される色が含まれています。
［SysColors］（システム色）	アプリケーション スタイルでシステム色定数を使用する場合にそのスタイルを有効にするのに役立つシステム色の一覧。

スタイル ビューア

中央パネルのビューアは、オブジェクト ツリーで選択されたノードまたはサブノードが表示されます。

• ツリーでオブジェクトを選択した場合、ビューアにはその部品と状態に使用されるビットマップが表示されます。
• ［Fonts］、［Colors］、［SysColors］を選択した場合は、それぞれに対応する一覧が表示されます。
• 画像を選択すると、その画像ファイルと画像用ツールバーが表示されます。
• ビューアのタイトルには、表示されているエンティティまたはノードの名前が示されます。
  • オブジェクト ツリーでオブジェクトを選択したときのタイトルは［オブジェクト ビューア］です。
  • ［Images］を表示している場合にはファイルの名前が表示されます（デフォルトのファイル名は style.png）。
  • オブジェクト ツリーで［Fonts］、［Colors］、［SysColors］ノードを選択しているときのタイトルは、それぞれ［フォント］、［色］、［システム色］が使用されます。

［インスペクタ］パネル

［インスペクタ］は右側のパネルで、選択したオブジェクトの各プロパティが表示されます。［インスペクタ］が表示されるのは、［Objects］ツリー内のサブノードが選択されている場合だけです。

［インスペクタ］では、IDE の［オブジェクト インスペクタ］と同様の方法でプロパティの設定や調整ができます。

［ビットマップ スタイル デザイナ］のメニュー

［ビットマップ スタイル デザイナ］には、以下のメニューが含まれているメニュー バーがあります。

［ファイル］メニュー

項目	説明
［新規作成］	新しいスタイルを作成します。デフォルトでは、新しいスタイルは次のスタイルと同じ設定で作成されます。 VCL の場合： AquaLightSlate スタイル FireMonkey の場合： AquaLightSlate スタイル Metropolis UI スタイルの場合： MetropolisUIBlack スタイル
［開く...］	選択された .vsf スタイル ファイルをダイアログに開きます。
［上書き保存］	変更内容を現在のスタイルに保存します。
［名前を付けて保存...］	現在のスタイルを特定の場所に、あるいは別の名前で保存します。
［終了］	［ビットマップ スタイル デザイナ］を終了します。

［表示］メニュー

項目	説明
［オブジェクト インスペクタ］	オブジェクトが表示されている際に、右側のパネルに位置する［インスペクタ］パネルにフォーカスを移動します。
［オブジェクト ツリー］	オブジェクトが表示されている際に、中央のパネルに位置する［オブジェクト ビューア］パネルにフォーカスを移動します。

［画像］メニュー

項目	説明
［追加...］	［選択した画像］ダイアログが表示され、ビットマップのリストに画像を追加することができます。
［更新...］	選択された画像を、［画像の選択］ダイアログ ボックスで選択された画像に置き換えます。
［削除］	［Images］リストから画像を削除します。
［エクスポート...］	リスト内のすべての画像を指定のフォルダにエクスポートします。

［スタイル］メニュー

項目	説明
［テスト］	現在のスタイルに従ってスタイルが設定されたさまざまなコントロールを持つサンプル ダイアログを開きます。
［色の割り当て］	スタイルで使用されている画像に基づいて、［Colors］および［SysColors］の項目に適切な色を自動的に割り当てます。
［フォント名の割り当て］	すべてのオブジェクトのフォント名とフォント スタイルが自動的に現在のスタイルに設定されます。
［フォント サイズの割り当て］	すべてのオブジェクトのフォント サイズが自動的に現在のスタイルに設定されます。
［1.5 倍解像度グラフィック用オブジェクトの新規追加］ ［2.0 倍解像度グラフィック用オブジェクトの新規追加］ ［3.0 倍解像度グラフィック用オブジェクトの新規追加］	特定のいずれかの解像度（1.5 倍、2.0 倍、3.0 倍）のオブジェクトを現在のスタイルで追加します。 Bitmap プロパティと Margin プロパティは、設定した解像度用に自動的に調整されます。
［1.5 倍解像度グラフィック用オブジェクトの削除］ ［2.0 倍解像度グラフィック用オブジェクトの削除］ ［3.0 倍解像度グラフィック用オブジェクトの削除］	現在のスタイルでの特定のいずれかの解像度（1.5 倍、2.0 倍、3.0 倍）のオブジェクトを削除します。 Bitmap プロパティと Margin プロパティは、設定した解像度用に自動的に調整されます。

［ビットマップ スタイル デザイナ］のツールバー

［ビットマップ スタイル デザイナ］のツールバーを利用すると、よく使用するスタイル操作に手軽にアクセスできます。このトピックでは、［スタイルの新規作成］、［スタイルのテスト］、テキスト情報を持つオブジェクトについて、詳細を説明します。［スタイルを開く］と［スタイルを保存］は標準的な意味なので、ここでは説明しません。

［スタイルの新規作成］コマンド

［スタイルの新規作成］ボタン（）の下向き矢印をクリックすると、以下のオプションが現れます（以下の画像のように、デザイナの［ファイル｜新規作成］コマンドで新しいスタイルの一覧を開くこともできます）。

［スタイルの新規作成］コマンド：

項目	説明
VCL スタイル	従来の Windows アプリケーションのルック アンド フィールを持つ VCL スタイル（.vsf ファイル）が新規作成されます。このテンプレートには、アイコン付きツール ボタン、セグメント ボタンなどの追加の要素が含まれています。
Windows スタイル	従来の Windows アプリケーションのルック アンド フィールを持つスタイルが新規作成されます。このテンプレートには、アイコン付きツール ボタン、セグメント ボタンなどの追加の要素が含まれています。スタイルを FireMonkey スタイル（.style ファイル）または VCL スタイル（.vsf ファイル）として保存することができます。
MacOS スタイル	新しい FireMonkey スタイル（.style ファイル）を、macOS Yosemite アプリケーションのルック＆フィールで作成します。 このテンプレートには、アイコン付きツール ボタン、セグメント付きボタン、その他、追加要素が含まれています。
Metropolis UI スタイル	Windows 8 アプリケーションのルック アンド フィールを持つスタイルが新規作成されます。このオプションを選択すると、再生ボタン、ドキュメント ボタン、ビデオ ボタンなど、Metropolis UI アプリケーションに固有の拡張コントロールが含められます（いずれもカスタマイズ可能です）。詳細は、「Metropolis UI アプリケーションの開発」を参照。
iOS スタイル	iOS 向けにカスタマイズされた新しい FireMonkey スタイルを作成します。 テンプレートには、3.0 倍解像度グラフィック（iPhone 6 Plus デバイス用）とオブジェクトが含まれています。 テンプレートは、iOS 8 および iOS 9 用に機能します。 詳細は、「iOS モバイル アプリケーション開発」を参照してください。 Retina（高解像度）ディスプレイおよび iOS ターゲット プラットフォーム向けにカスタマイズされたスタイルを新規作成する詳細は、以下を参照。 ネイティブおよびカスタム FireMonkey スタイルの取り扱い iOS 向けスタイルの使用：多重解像度スタイル、Black スタイル、Transparent スタイル
Android L Light スタイル	Android 4（KitKat）ターゲット プラットフォーム向けにカスタマイズされたライト スタイルが新規作成されます。Android ライト スタイルは製品に同梱されていて、C:\Users\Public\Documents\Embarcadero\Studio\21.0\Styles にインストールされます。詳細は、「Android モバイル アプリケーション開発」を参照。
Android Dark スタイル	Android 4（KitKat）ターゲット プラットフォーム向けにカスタマイズされたダーク スタイルが新規作成されます。Android ダーク スタイルは製品に同梱されていて、C:\Users\Public\Documents\Embarcadero\Studio\21.0\Styles にインストールされます。詳細は、「Android モバイル アプリケーション開発」を参照。
Android L Light スタイル	Android 5（Lollipop）ターゲット プラットフォーム向けにカスタマイズされたライト スタイルが新規作成されます。Android L ライト スタイルは製品に同梱されていて、C:\Users\Public\Documents\Embarcadero\Studio\21.0\Styles にインストールされます。詳細は、「Android モバイル アプリケーション開発」を参照。
Android L Dark スタイル	Android 5（Lollipop）ターゲット プラットフォーム向けにカスタマイズされたダーク スタイルが新規作成されます。Android L ダーク スタイルは製品に同梱されていて、C:\Users\Public\Documents\Embarcadero\Studio\21.0\Styles にインストールされます。詳細は、「Android モバイル アプリケーション開発」を参照。
Blank Style for Windows	Windows プラットフォーム向けに空のスタイルが作成されます。カスタム グラフィックやオブジェクトを空のスタイルに追加して、FireMonkey スタイルとして保存することができます。その後で、TStyleBook でこのスタイルを使用することができます。
Blank Style for Mac	macOS Yosemite プラットフォーム向けに空のスタイルが作成されます。 カスタム グラフィックとオブジェクトを～のスタイルに追加して、それを FireMonkey スタイルとして保存することも可能です。 その後、そのスタイルを TStyleBook で使用することができます。
Blank Style for iOS	iOS プラットフォーム向けに空のスタイルが作成されます。カスタム グラフィックやオブジェクトを空のスタイルに追加して、FireMonkey スタイルとして保存することができます。その後で、TStyleBook でこのスタイルを使用することができます。
Blank Style for Android	Android プラットフォーム向けに空のスタイルが作成されます。カスタム グラフィックやオブジェクトを空のスタイルに追加して、FireMonkey スタイルとして保存することができます。その後で、TStyleBook でこのスタイルを使用することができます。

［スタイルを開く］コマンド

［ビットマップ スタイル デザイナ］で［スタイルを開く］ボタン（または［ファイル｜開く...］（Ctrl+O）を選択）をクリックして、編集するスタイルの場所に移動します。［ビットマップ スタイル デザイナ］を使用する場合、.vsf スタイルのみ開くことができます （ただし、.style ファイルを作成することができます）。

［スタイルを保存］コマンド

［ビットマップ スタイル デザイナ］で［スタイルを保存］ボタン（または［ファイル｜上書き保存］（Ctrl+S）、あるいは［ファイル｜名前を付けて保存...］）をクリックします。スタイルを .vsf ファイルまたは .style ファイルとして保存することができます。

［スタイルのテスト］コマンド

緑の［スタイルのテスト］ボタン（）をクリックするとスタイル ビューアが開き、テスト中のスタイルで UI 要素がどのように表示されるか（UI 要素が有効な場合や無効な場合に使用されるスタイルなど）を確認することができます。

スタイル ビューアには、次のように適切な種類のスタイルが表示されます。

• ［VCL スタイル ビューア］

• ［FMX スタイル ビューア］

• ［FMX Metropolis UI スタイル ビューア］

• ［モバイル スタイル ビューア］

［スタイルのテスト］コマンドには以下のオプションがあります。

［スタイルのテスト］コマンド：

項目	説明
［VCL スタイルのテスト］	作成中の VCL スタイルをテストすることができます。
［FireMonkey スタイルのテスト］	作成中の FireMonkey スタイルをテストすることができます。
［FireMonkey Metropolis UI スタイルのテスト］	作成中の FireMonkey Metropolis UI スタイルをテストすることができます。
［FireMonkey モバイル スタイルのテスト］	作成中の FireMonkey モバイル スタイルをテストすることができます。
［<スタイル> を <乗数倍> 解像度のグラフィックでテスト］	特定のスタイルを、スタイルの基本解像度の <乗数> 倍の解像度でテストすることができます。これらのエントリを使用すると、ピクセル密度の高いデバイス画面でスタイルがどのように表示されるかを確認できます。

Metropolis UI スタイルを構築している場合には、次のいずれかを選択してください。

• Metropolis UI スタイルで基本のコントロールがどう表示されるかを確認するには［FireMonkey スタイルのテスト］
• Metropolis UI に固有の新しいコントロールを確認するには［FireMonkey Metropolis UI スタイルのテスト］

［オブジェクト テンプレートの追加］ボタン

［オブジェクト テンプレートの追加］ボタンを使用して、スタイルにオブジェクト テンプレートを追加することができます。それぞれのオブジェクト テンプレートには、すぐに使用できる適切なオブジェクト構造が含まれています。オブジェクトの名前を変更し、必要なプロパティを割り当てるだけです。自動的に設定される Params フィールドには、作成されるスタイル中のスタイル オブジェクトを実際に作成する方法を示す、スタイル変換コンポーネントへの指示が含まれます。たとえば、Params フィールドが [CHANGEPRESSEDOPACITY] と設定されていると、スタイル変換コンポーネントは特別な TActiveLayout オブジェクトを使用します。

［オブジェクト テンプレートの追加］ボタンのいずれかをクリックすると、オブジェクト ツリーの末尾にオブジェクト テンプレートが追加され、汎用の名前が付けられます。たとえば、［ボタンの追加］をクリックしたときには StyleObject<n>_Button という名前になります。

［オブジェクト テンプレートの追加］コマンド：

ボタン	説明
［ボタンの追加］	現在のスタイルに汎用のボタンを追加します。
［テキスト付きボタンの追加］	現在のスタイルに汎用のテキスト付きボタンを追加します。
［グリフ付きボタンの追加］	現在のスタイルに汎用のグリフ付きボタンまたはアイコンを追加します。
［チェック ボックスの追加］	現在のスタイルにチェック ボックスを追加します。
［ラジオ ボタンの追加］	現在のスタイルにラジオ ボタンを追加します。
［ラベルの追加］	現在のスタイルにラベルを追加します。
［アクティブ ラベルの追加］	現在のスタイルにアクティブ ラベルを追加します。アクティブ ラベルには、フォントに関する追加の機能が備わっています。
［編集ボックスの追加］	現在のスタイルに編集フィールドを追加します。
［パネルの追加］	現在のスタイルにパネルを追加します。
［進行状況バーの追加］	現在のスタイルに進行状況バーを追加します。
［トラック バーの追加］	現在のスタイルにトラック バーを追加します。
［スイッチの追加］	現在のスタイルにスイッチを追加します。

テキスト情報を持つオブジェクト ボタン群

テキスト情報を持つオブジェクト ボタン群は、ツールバーの右側のセクションにあります。

これらのボタンでは次のタスクが実行されます。

ボタン	オブジェクト	説明
［T］	StyleObject	コンテナとして使用できる単純オブジェクトや、色やフォントのデータを持つ単純オブジェクトを挿入します。
［Tx1］	BitmapObject	1 つのビットマップ状態を持つオブジェクトを挿入します（パネル、ツールバーなど）。
［Tx2］	ActiveObject	2 つのフォント状態を持つオブジェクトを挿入します（アクティブなフォントと無効時のフォント。VCL スタイルでのみ使用）。
［Tx2］	ActiveBitmap	2 つのビットマップ状態を持つオブジェクトを挿入します（ビットマップまたはアクティブ ビットマップ。メニュー項目など）。
［x3］	SystemButton	フォームのタイトル用に 3 つの状態を持つオブジェクトを挿入します（最小化、最大化、閉じるボタン）。
［x5］	ButtonObject	5 つのビットマップ状態を持つオブジェクトを挿入します（無効、有効、カーソルが上にある、押されている、フォーカスが当たっている。ボタンなど）。
［Tx5］	TextObject	5 つのフォント状態を持つオブジェクトを挿入します（無効時のフォント、有効時のフォント、カーソルが上にあるときのフォント、押されているときのフォント、フォーカスが当たっているときのフォント）。

オブジェクト編集用のコンテキスト メニュー コマンド

オブジェクト ツリーのコンテキスト メニューには、オブジェクトを編集するための便利なコマンドが含まれています。

解像度の自動調整

コンテキスト メニューを使用すると、選択したオブジェクトをさまざまな解像度向けに自動更新することができます（Bitmap プロパティと Margin プロパティが自動的に調整されます）。この 2 つのプロパティを設定しなければならないのは、1 倍解像度のオブジェクトだけです。そのオブジェクトに他の解像度用のオブジェクトがあれば（たとえば 2 倍解像度用の Face20x など）、オブジェクトを右クリックして、コンテキスト メニューの［全グラフィック解像度用オブジェクトの自動調整］を選択すると、必要であれば新しいオブジェクトの追加と、そのオブジェクト（Face20x など）のすべてのプロパティの設定が、自動的に行われます。

他の解像度のオブジェクトを作成する方法は、「［スタイル］メニュー」を参照してください。

カスタム スタイル オブジェクトのテスト

カスタム オブジェクトは個別にテストをすることができます。カスタム オブジェクト（"smallswitch" など）を追加したら、さまざまなグラフィック解像度でこのオブジェクトだけをテストできます。オブジェクトのコンテキスト メニューで［オブジェクト スタイルのテスト］コマンドを呼び出すだけです。

関連項目

• VCL スタイルの概要
• VCL スタイルから FireMonkey スタイルへの変換
• ［ビットマップ スタイル デザイナ］で画像を扱う

• ［ビットマップ スタイル デザイナ］を使用してスタイルを作成する