🎉 はじめに
Delphi の TToolBar / TToolButton は高DPI環境に完全対応していません。
特に 150%・200% スケール環境では、
- アイコンがボケる
- サイズが合わない
- レイアウトが崩れる
- PNG では拡大縮小が汚い
といった問題が発生しやすく、現代的な UI を構築するには限界があります。
そこで本記事では、ToolBar の代替として利用できる
DPI 対応・SVG ベースの軽量ツールバーコンポーネント
「ToolSvgButton」 を紹介します。
Skia4Delphi の SVG 描画機能を活用し、
モダンで高解像度でも崩れないツールボタンを簡単に構築できます。
📘 ToolSvgButton とは？
Delphi（VCL）で SVG を使ったツールバーを構築するために作った
軽量コンポーネントユニットです。
- SVG のくっきりした描画
- DPIスケールに強い
- Hover / Press / Disabled の自動反映
- セパレーター（区切り）対応
- 全ボタンの自動整列
が簡単に実現できます。
🔧 特徴
✔ SVG アイコンを綺麗に描画（Skia4Delphi）
TSkSvg の Svg プロパティを内部コピーして使用するため、
フォーム上のオブジェクトを破壊せず安全です。
✔ Hover / Press / Disabled を自動反映
Windows 標準に近い自然な視覚効果です。
✔ ToolBar のように整列管理できる
TToolSvgButtonList で以下が自動化：
- AddButton（ボタン追加）
- AddSeparator（区切り追加）
- Clear（クリア）
- 自動整列（Left計算）
ToolBar のように「並べただけで整列する」操作が可能です。
✔ DPI に強い
アイコンが SVG のため、
200%・300% でも破綻しません。
🧱 クラス構成
TToolSvgButton
SVG + キャプションを持つ1ボタン。
- Hover / Press / Disabled に応じた背景色
- SVG の Opacity 調整
- パネルや SVG どこをクリックしても OnClick が発火
- Enabled=False の見た目も自動調整
TToolSvgButtonList
ToolBar のように複数ボタンを並べて管理。
- AddButton / AddSeparator
- Buttons と Separators を完全分離管理
- Left 位置は GetTotalWidth() で自動計算
- Clear / Destroy で安全破棄
🚀 使用例（フォームに TSkSvg を配置するだけ）
フォームに SkSvg1 と SkSvg2 を貼り付け、
以下のコードを記述するだけで動作します。
procedure TFormSample.FormCreate(Sender: TObject);
begin
FToolButtons := TToolSvgButtonList.Create(Self, Self);
FToolButtons.OnClick := OnToolButtonClick;
end;
procedure TFormSample.FormShow(Sender: TObject);
begin
FToolButtons.Clear;
FToolButtons.AddButton(SkSvg1, '1の画像');
FToolButtons.AddSeparator(32);
FToolButtons.AddButton(SkSvg2, '2の画像');
end;
procedure TFormSample.OnToolButtonClick(Sender: TObject);
var
Btn: TToolSvgButton;
begin
Btn := TToolSvgButton(Sender);
Caption := IntToStr(Btn.Tag);
end;
SVG はフォームに貼り付けた状態で OK。
内部で安全にコピーされます。
実行結果
配置されたクラスの縦幅に応じて自動的に計算されます
📜 ライセンス（MIT）
MIT License のため、
商用・個人問わず自由に利用可能です。