【入門編】Windows Formsアプリケーションにおける高DPI環境でのカスタム描画とフォント滲み対策:AutoScaleMode.DpiとPerMonitorV2対応の全知識 – Visual Basic (VB / VB.NET)解析バイブル

スポンサーリンク

こんにちは!Windows Formsアプリの開発、毎日お疲れ様です。

「綺麗な4Kディスプレイを導入したら、自作の業務アプリの文字がなんだかボヤけて滲んでいる…」
「マルチモニターで別の画面に移動させたとたん、ボタンやテキストボックスが重なって使い物にならない…」

そんなデスクトップアプリの“高DPI(高解像度)の呪い”に頭を悩ませていませんか?
マクロの記録や簡単なフォームデザイナ操作から一歩進んで、本格的なWindowsアプリの設計に挑むあなたへ。今回は、Windows Formsにおける高DPI環境でのカスタム描画とフォント滲み対策について、プロの現場で通用する極限の知見を優しく、そして深く解説していきます。

ここをクリアすれば、VB.NETのUI設計における視界が一気に開けますよ。さあ、一緒に本質をマスターしていきましょう!

—

1. なぜ高DPI環境でUIが崩れ、文字が滲むのか?

まずは敵を知ることから始めましょう。
従来のWindowsアプリは、画面のドット数(解像度)が一定であるという前提で作られていました。しかし、現代の4KディスプレイやRetina級のノートPCでは、小さな画面に膨大なドットが詰め込まれています。

ここでOSは、見やすさを保つために「スケーリング(拡大)」を行います。

  • 従来のアプリ(DPI Unaware): OSが強制的にビットマップを引き延ばすため、文字やアイコンが盛大にボヤける(滲む)。
  • 中途半端な設定(System DPI Aware): アプリ起動時のメインモニターの倍率で固定されるため、別の解像度のサブモニターに移動した途端にレイアウトが破綻する。

私たちが目指すべきゴールは、Windows 10/11の標準である「Per-Monitor V2(モニターごとの動的DPIスケーリング)」に完全対応し、どんな環境でもクッキリとしたカスタム描画を行うことです。

—

2. 根本対策の第一歩:マニフェストと設定の極意

まずは、アプリが「私は高DPIに対応していますよ」とOSに宣言(マニフェスト)し、デザイナ任せの自動スケーリングから脱却する必要があります。

ステップ①:`app.manifest` の設定

プロジェクトにアプリケーション マニフェスト ファイルを追加し、`` タグ内のDPI設定を次のように記述します。ここがすべての土台です。





PerMonitorV2, PerMonitor
true

ここがポイント:
`PerMonitorV2`を指定することで、モニターを跨いだ瞬間にアプリへ「DPIが変更されたよ!」というイベントが飛ぶようになります。これにより、後述する動的な再描画が可能になります。

—

3. VB.NETコードで実装する!フォント滲みゼロのカスタム描画

それでは、VB.NETを使って、高DPI環境でも一切ボヤけないカスタム描画のコードを見ていきましょう。
今回は、フォーム上に「くっきりと美しい独自のボーダーとテキスト」を描画するサンプルを作成します。

Public Class CustomDpiForm

‘ フォームのコンストラクタ
Public Sub New()
MyBase.New()

‘ ダブルバッファリングを有効化し、描画のちらつき(フリッカー)を完全に排除する
‘ これによりプロフェッショナルな滑らかな描画を実現できます
Me.SetStyle(ControlStyles.AllPaintingInWmPaint Or _
ControlStyles.UserPaint Or _
ControlStyles.OptimizedDoubleBuffer, True)
Me.UpdateStyles()

‘ 自動スケーリングの基準をDPIに変更
Me.AutoScaleMode = AutoScaleMode.Dpi
Me.ClientSize = New Size(500, 300)
Me.Text = “高DPI完全対応カスタム描画フォーム”
End Sub

‘ DPIが変更された瞬間(モニターを移動したときなど)に呼ばれるOverridesメソッド
Protected Overrides Sub OnDpiChanged(e: DpiChangedEventArgs)
MyBase.OnDpiChanged(e)

‘ 新しいDPIスケールに合わせてフォントサイズを安全に再計算する
‘ 固定値を使うのではなく、OSから渡される新しいDpiFactorやスケールを使用するのが鉄則
Dim oldFont = Me.Font
Dim scaleFactorX = e.DeviceDpiNew / CSng(e.DeviceDpiOld)

Me.Font = New Font(oldFont.FontFamily, oldFont.Size scaleFactorX, oldFont.Style)

‘ 再描画を強制
Me.Invalidate()
End Sub

‘ 描画処理の実装
Protected Overrides Sub OnPaint(e: PaintEventArgs)
MyBase.OnPaint(e)

Dim g As Graphics = e.Graphics

‘ 【重要】ハイレゾ環境で文字や線がぼやけないための最高品質設定
‘ アンチエイリアスとテキストのレンダリングモードを明示的に指定します
g.SmoothingMode = Drawing2D.SmoothingMode.AntiAlias
g.TextRenderingHint = Text.TextRenderingHint.ClearTypeGridFit

‘ 現在のDPIスケールに応じたペンの太さを動的に算出(例: 2ピクセル相当の枠線)
Dim basePenWidth As Single = 2.0F
Dim currentDpiScale As Single = g.DpiX / 96.0F ‘ 96DPIが標準(100%)
Using p As New Pen(Color.FromArgb(0, 120, 215), basePenWidth currentDpiScale)
‘ フォームの内側に枠を描画
g.DrawRectangle(p, 10, 10, Me.ClientSize.Width – 20, Me.ClientSize.Height – 20)
End Using

‘ くっきりと美しいカスタムテキストの描画
Using drawFont As New Font(“Meiryo UI”, 14, FontStyle.Regular),
brush As New SolidBrush(Color.FromArgb(30, 30, 30))

Dim drawPoint As New PointF(30, 30)
g.DrawString($”現在のDPIスケール: {currentDpiScale 100:F0}%”, drawFont, brush, drawPoint)
End Using
End Sub

End Class

—

4. 現場でありがちな「陥りやすい罠」と回避策

ここで、現場のエンジニアがよくハマる落とし穴をいくつかシェアしておきますね。

罠①:ハードコードされたピクセル数(`Pixels`)の呪縛

コード内に `Me.Width = 800` のようにマジックナンバーを直書きしていませんか?
高DPI環境では、100%スケール(96DPI)の時は800ピクセルでも、200%(192DPI)の環境では1600ピクセル必要になります。
対策: 位置やサイズを計算する際は、必ず `Me.DeviceDpi` や `LogicalToDeviceUnits` メソッドを使用してスケール補正を行ってください。

罠②:フォントの使い回しによるスケーリング漏れ

`SystemFonts` や固定のグローバルフォントをそのまま描画に使うと、モニターを移動した際に文字サイズが追従しません。
対策: `OnDpiChanged` イベントの中で、現在適用されているDPI倍率を元にフォントをインスタンスし直すのが正解です。

—

まとめ:さあ、あなたのアプリを次のステージへ

今回は、Windows Formsにおける高DPI環境でのカスタム描画とフォント滲み対策について、プロフェッショナルな視点から解説しました。

  • `app.manifest` で PerMonitorV2 を宣言する。
  • `OnDpiChanged` をオーバーライドして、DPIの変更を検知する。
  • `Graphics.TextRenderingHint.ClearTypeGridFit` を活用し、文字の滲みを徹底的に排除する。

最初は少し難しく感じるかもしれませんが、この仕組みを理解して実装したアプリは、どんな最新の4Kモニターで表示しても驚くほどシャープで美しく、ユーザーに「おっ、このアプリは作りが違うな」と感じさせることができます。

ここをクリアしたあなたなら、もうVB.NETのUI設計で恐れるものは何もなくマクロのレベルを完全に卒業しています。ぜひ、実際の業務アプリのコードに組み込んで、その違いを体感してみてくださいね!

タイトルとURLをコピーしました