Delphi
VCL
C++builder
FireMonkey

ビットマップスタイルデザイナの使い方

More than 1 year has passed since last update.

Delphi, C++Builder にはビットマップスタイルデザイナというツールが付属しています。(Starterにも付属しています)
このツールは、Delphi, C++Builder のアプリケーションやアプリケーション内のコントロールの外観(スタイル)を自分で作成・設定できるツールです。

ここでは、Delphi 10.2.1 Tokyo Starter 付属のビットマップスタイルデザイナを使用しています。

この記事は、以前 EDN に書いた記事を 10.2.1 Tokyoでリライトしたものです。

画像イメージを作成

  1. Windows のペイントを起動してお絵かき開始。5色の△だけの簡単なものです。ガチなスタイルを作るのであれば、illustratorなどで、それ相当の見栄えの良い画像を作ってください。
    qiita01.png

  2. 透過処理を行ないます。メニューの[選択]の▼をクリックして、[すべて選択]⇒[透過の選択]で、透過処理を行ないます。
    qiita02.png

  3. ファイルを保存します(ここでは PNGとして保存)

スタイルファイルを作成

  1. ビットマップスタイルデザイナを起動します。ここでは FireMonkey アプリケーション用の Windows スタイルを定義します。
    画面は Starter エディションのメニュー画面です。
    qiita03.png

  2. [ファイル|新規作成|Windowsスタイル]で新たにスタイルファイルを作成します。
    qiita04.png

画像イメージファイルを追加

新規作成したスタイルファイルに、作成した画像イメージファイルを追加します。
1. 左側のオブジェクトのツリーの中にある Images をマウスで選択します。この Images に使用する画像ファイルを追加して保存し、使用します。
2. [追加]ボタンをクリックして、作った画像ファイルを読み込みます。
qiita05.png
3. 読み込んだ画像イメージが表示されます。マスク(不要な部分)色を指定して必要な画像イメージのみとしておき、[OK]ボタンをクリックして保存します。
qiita06.png

コンポーネントに画像を設定する

それぞれのコンポーネントごとに表示するイメージを設定します。ここでは Button コンポーネントの表示イメージに作った画像を設定します。
1. 左側のオブジェクト内の Objects のツリーを展開します。
2. 展開された項目内の Button を展開します。
3. 展開された中にある Faceを選択します。右側の画面がオブジェクトビューアとインスペクタに変わります。
4. インスペクタ上の Bitmapを選択し[...] ボタンを押します。
qiita07.png

  1. ビットマップのプロパティ画面が開きます。左側の「ビットマップ」の所に読み込んだファイル名が表示されています。そのファイルを選択します。
  2. マウスの左クリックで、左上位置、右クリックで右下の位置を指定し、ボタンのイメージとして表示したいイメージを囲い、[適用] ボタンを押します。 qiita08.png

適用した後の画面
qiita09.png

Bitmap(通常), BitmapDisabled(無効), BitmapFocused(FireMonkeyフォーカス時), BitmapHot(VCLのフォーカス時), BitmapPressd(押したとき) が設定できます。

ビューアで確認できるよ

ビットマップスタイルデザイナのツールバーの所にある緑の△ボタン隣にある▼ボタンを押し「VCLスタイルのテスト」「デスクトップスタイルのテスト(FireMonkey)」を選択して実行すると、スタイルビューアが起動して、設定した状態を確認できます。
qiita11.png

qiita10.png