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

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

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

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

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

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

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

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

VCL スタイルの概要

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

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

ビットマップスタイルデザイナは、編集用に開く untitled.vsf ファイル（VCL スタイルファイル）で開きます。

ビットマップスタイルデザイナには、現在知らいているオブジェクトノードに応じて、2 つまたは 3 つのパネルが表示されます：

左側のパネルには、常にオブジェクトツリーが表示されます。
［オブジェクト］ノードを開くと、デザイナには他の 2 つのパネルが表示されます。
- オブジェクト/スタイルビューア（中央のパネル）
- インスペクタ（右側のパネル）
他のいずれかのノードを開くと（画像、フォント、色、システム色 など）、ビューアのみが表示され、そのビューアが中央パネルと右側パネルの領域を占めます。

オブジェクトツリー

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

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

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

スタイルビューア

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

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

インスペクタパネル

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

このビューは、［オブジェクト］ ノードから選択されたオブジェクトによって変わります。インスペクタでは、IDE の［オブジェクトインスペクタ］と同様の方法でプロパティの設定や調整ができます。各オブジェクトは独自のプロパティを持っており、それ故、一部のプロパティのみが設定できることを覚えておいてください。

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

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

［ファイル］メニュー

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

［表示］メニュー

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

［画像］メニュー

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

［スタイル］メニュー

項目	説明
［テスト］	現在のスタイルに従ってスタイルが設定されたさまざまなコントロールを持つサンプルダイアログを開きます。
［色の割り当て］	スタイルで使用されている画像に基づいて、［色］および［システム色］の項目に適切な色を自動的に割り当てます。
［フォント名の割り当て］	すべてのオブジェクトのフォント名とフォントスタイルが自動的に現在のスタイルに設定されます。
［フォントサイズの割り当て］	すべてのオブジェクトのフォントサイズが自動的に現在のスタイルに設定されます。
［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` ファイル）が新規作成されます。このテンプレートには、アイコン付きツールボタン、セグメントボタンなどの追加の要素が含まれています。
VCL モダンスタイル	Windows 10 アプリケーションのルックアンドフィールを持つ VCL スタイル（`.vsf` ファイル）が新規作成されます。このテンプレートには、アイコン付きツールボタン、セグメント付きボタンなど、追加要素が含まれます。
VCL モダンダークスタイル	Windows 10 アプリケーションのダークモードのルックアンドフィールを持つ VCL スタイル（`.vsf` ファイル）が新規作成されます。このテンプレートには、アイコン付きツールボタン、セグメント付きボタンなど、追加要素が含まれます。
Windows スタイル	従来の Windows アプリケーションのルックアンドフィールを持つスタイルが新規作成されます。このテンプレートには、アイコン付きツールボタン、セグメントボタンなどの追加の要素が含まれています。スタイルを FireMonkey スタイル（`.style` ファイル）または VCL スタイル（`.vsf` ファイル）として保存することができます。
MacOS スタイル	新しい FireMonkey スタイル（`.style` ファイル）を、macOS Yosemite アプリケーションのルック＆フィールで作成します。このテンプレートには、アイコン付きツールボタン、セグメント付きボタンなど、追加要素が含まれます。
Windows モダンスタイル	Windows 10 アプリケーションのルックアンドフィールを持つ FireMonkey スタイル（`.style` ファイル）が新規作成されます。このテンプレートには、アイコン付きツールボタン、セグメント付きボタンなど、追加要素が含まれます。
Windows モダンダークスタイル	Windows 10 アプリケーションのダークモードのルックアンドフィールを持つ FireMonkey スタイル（`.style` ファイル）が新規作成されます。このテンプレートには、アイコン付きツールボタン、セグメント付きボタンなど、追加要素が含まれます。
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\37.0\Styles` にインストールされます。詳細は、「Android モバイルアプリケーション開発」を参照。
Android Dark スタイル	Android 4（KitKat）ターゲットプラットフォーム向けにカスタマイズされたダークスタイルが新規作成されます。Android ダークスタイルは製品に同梱されていて、`C:\Users\Public\Documents\Embarcadero\Studio\37.0\Styles` にインストールされます。詳細は、「Android モバイルアプリケーション開発」を参照。
Android L Light スタイル	Android 5（Lollipop）ターゲットプラットフォーム向けにカスタマイズされたライトスタイルが新規作成されます。Android L ライトスタイルは製品に同梱されていて、`C:\Users\Public\Documents\Embarcadero\Studio\37.0\Styles` にインストールされます。詳細は、「Android モバイルアプリケーション開発」を参照。
Android L Dark スタイル	Android 5（Lollipop）ターゲットプラットフォーム向けにカスタマイズされたダークスタイルが新規作成されます。Android L ダークスタイルは製品に同梱されていて、`C:\Users\Public\Documents\Embarcadero\Studio\37.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 スタイルビューア］
- Windows
- Windows10 のライトおよびダークモード

［FMX スタイルビューア］
- Windows
- macOS
［FMX Windows モダンスタイルビューア］
- Windows のライトおよびダークモード

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

［モバイルスタイルビューア］
- iOS
- Android のダークおよびライトモード
- Android の L ダークおよびライトモード

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

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

項目	説明
［VCL スタイルのテスト］	作成中の VCL スタイルをテストすることができます。
［FireMonkey スタイルのテスト］	作成中の FireMonkey スタイルをテストすることができます。
［FireMonkey Windows モダンスタイルのテスト］	作成中の FireMonkey Windows モダンスタイルをテストすることができます。
［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" など）を追加したら、さまざまなグラフィック解像度でこのオブジェクトだけをテストできます。オブジェクトのコンテキストメニューで［オブジェクトスタイルのテスト］コマンドを呼び出すだけです。

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

目次