HScrollBar・VScrollBarで支配する極限のカスタムスクロールUI設計：大量図面・マップを描画するWinFormsの王道
Windows Forms（WinForms）開発において、誰もが一度は直面する壁があります。それは、「標準の`Panel`コントロールの`AutoScroll`機能では、実務の要求に耐えられない」という冷酷な現実です。
CADソフトのような数万点に及ぶ図面データ、GIS（地理情報システム）のような巨大なカスタムマップ、あるいは数百万ピクセルに及ぶ超高解像度の解析画像。これらを拡大縮小（ズーム）しながら自在にスクロールするUIを求められたとき、標準機能に頼れば、確実に以下の罠に嵌まります。
- 描画の致命的な遅延とフリッカー（画面のチラつき）
- ズーム時に意図しない位置へ吹っ飛ぶビューポート（表示領域）
- GDI+の座標制限（32bit整数の限界）による描画の崩れ
- メモリリークと、それに伴う突然の異常強制終了（Out of Memory）
本記事では、これらの課題を根本から解決するため、`HScrollBar`（水平スクロールバー）と`VScrollBar`（垂直スクロールバー）を完全に手動制御し、「ワールド座標系」と「スクリーン座標系」を完全に分離した極限のカスタムスクロール領域を構築する設計手法を伝授します。
単なる入門コードではありません。メモリ効率、描画パフォーマンス、そして実務に耐えうる堅牢性を極限まで高めた、そのままプロダクション環境へ投入できるVB.NETの設計図を提示します。
—
1. なぜ標準のAutoScrollではダメなのか？
解決策へ進む前に、なぜ標準のスクロール機能が業務アプリケーションで破綻するのか、その構造的欠陥を理解しておきましょう。
【標準AutoScrollの破綻構造】
┌──────────────────────────────────────────┐
│ 仮想的な巨大コントロール (数万ピクセル) │
│ ┌────────────────────────┐ │ => メモリ消費が爆発
│ │ 画面（ビュー） │ │ => 描画不要な領域まで
│ └────────────────────────┘ │ コントロールが保持しようとする
└──────────────────────────────────────────┘
標準の`AutoScroll`は、「表示領域よりも大きなコントロールを内包し、その位置（`Location`）をずらす」ことでスクロールを実現しています。
しかし、描画対象が巨大、あるいは数が膨大な場合、以下の問題が発生します。
1. コントロールの限界サイズ制約：Windowsのシステム制限により、コントロールの幅・高さは 65,535 ピクセル（16bit境界）を超えると、描画がバグる、あるいは描画されなくなります。
2. 無駄な描画コスト：見えていない領域のグラフィックスオブジェクトまで描画・保持しようとするため、リソースを過剰に消費します。
3. ズーム機能との相性の悪さ：スケール値（拡大率）が変更された際、スクロールバーのつまみの位置（`Value`）と、内部コントロールのサイズ・位置を同期させるロジックが極めて複雑になり、スパゲティコード化します。
解決策：「仮想座標（ワールド座標）」による完全な制御
我々が採るべきアプローチは、「描画すべきオブジェクトはすべて、独自の仮想的な座標系（ワールド座標）で管理し、表示領域（スクリーン座標）に変換して、今見えているものだけを描画する（カリング）」というゲームエンジンに近い設計思想です。
このとき、`HScrollBar`と`VScrollBar`は単なる「数値の入力装置（コントローラー）」としてのみ利用します。
—
2. 破綻しない座標変換の数学的アプローチ
実装に入る前に、最もバグの温床になりやすい「座標変換」の数式を頭に叩き込んでください。
ここを曖昧にすると、マウスホイールでズームした際に「ポインタが指している位置がズームの中心からズレていく」という不快なバグ（ユーザー体験を著しく損ねるバグ）を誘発します。
基本的な座標変換式
- ワールド座標（World）：図面やマップそのものが持つ、拡大率やスクロールに影響されない絶対的な元データ座標（単位：mm、pixelなど）。
- スクリーン座標（Screen）：ピクチャボックスやパネルなど、実際に画面に描画されるコントロール上の相対座標（単位：ピクセル）。
$$\text{ScreenX} = (\text{WorldX} – \text{ScrollX}) \times \text{ZoomRate}$$
$$\text{WorldX} = \frac{\text{ScreenX}}{\text{ZoomRate}} + \text{ScrollX}$$
※Y軸も同様です。
「マウスポインタ位置を維持したズーム」のアルゴリズム
ズーム（拡大・縮小）を行う際、現在のマウスカーソルの下にあるワールド座標（`WorldMouseX`）が、ズーム後も同じ画面上の位置（`ScreenMouseX`）に留まるように、スクロール位置（`ScrollX`）を逆算して補正する必要があります。
1. ズーム前のマウス座標におけるワールド座標（$W_{\text{old}}$）を算出する。
2. ズーム倍率を変更する（$Z_{\text{new}}$）。
3. $W_{\text{old}}$ が、ズーム後も現在の画面マウスポインタ位置（$S$）と一致するように、新たなスクロール位置（$Scroll_{\text{new}}$）を決定する。
$$\text{Scroll}_{\text{new}} = W_{\text{old}} – \frac{S}{Z_{\text{new}}}$$
この数式をそのままコードに落とし込みます。
—
3. 実装：極限のプロダクションコード
それでは、堅牢でパフォーマンスに優れたカスタムビューアーコントロールの実装例を示します。
このコードは、GDI+の描画パフォーマンスを最大化し、チラつきを完全に排除（ダブルバッファリング）した上で、何万個もの図形があたかも無限の空間に描画されているかのように、高速かつスムーズに動作します。
新規のユーザーコントロール（`UserControl`）としてプロジェクトに追加するか、あるいはフォームに直接貼り付けて動作を確認してください。
Imports System.Drawing
Imports System.Drawing.Drawing2D
Imports System.Windows.Forms
”’
”’
Public Class CustomCanvas
Inherits UserControl
#Region ” フィールド・プロパティ定義 ”
‘ スクロールバーコントロール（手動配置・制御）
Private WithEvents hScrollBar As HScrollBar
Private WithEvents vScrollBar As VScrollBar
‘ 座標・ズーム管理
Private _zoomRate As Single = 1.0F
Private Const MinZoom As Single = 0.1F
Private Const MaxZoom As Single = 20.0F
‘ 仮想ワールド（図面）の絶対サイズ（例: 20000px × 15000px の巨大図面）
Private _worldSize As New Size(20000, 15000)
‘ 現在のスクロール位置（ワールド座標系における可視領域の左上座標）
Private _scrollOffset As New PointF(0.0F, 0.0F)
‘ ドラッグによるスクロール操作用
Private _isDragging As Boolean = False
Private _dragStartMousePos As Point
Private _dragStartScrollOffset As PointF
‘ 描画パフォーマンス測定用のダミーデータ（1万個のランダムな矩形）
Private _dummyShapes As New List(Of RectangleF)()
”’
”’
Public Property ZoomRate As Single
Get
Return _zoomRate
End Get
Set(value As Single)
‘ ズーム範囲のクランプ処理
Dim targetZoom = Math.Max(MinZoom, Math.Min(MaxZoom, value))
If _zoomRate <> targetZoom Then
_zoomRate = targetZoom
UpdateScrollBars()
Invalidate() ‘ 再描画要求
End If
End Set
End Property
#End Region
#Region ” 初期化 ”
Public Sub New()
‘ ダブルバッファリングの有効化（フリッカー対策の基本にして極意）
Me.SetStyle(ControlStyles.AllPaintingInWmPaint Or
ControlStyles.UserPaint Or
ControlStyles.OptimizedDoubleBuffer Or
ControlStyles.ResizeRedraw, True)
InitializeScrollBars()
GenerateDummyData()
End Sub
”’
”’
Private Sub InitializeScrollBars()
hScrollBar = New HScrollBar() With {.Dock = DockStyle.Bottom}
vScrollBar = New VScrollBar() With {.Dock = DockStyle.Right}
Me.Controls.Add(hScrollBar)
Me.Controls.Add(vScrollBar)
UpdateScrollBars()
End Sub
”’
”’
Private Sub GenerateDummyData()
Dim rand As New Random(12345) ‘ シード固定で再現性を確保
For i As Integer = 0 To 10000
Dim x = rand.Next(0, _worldSize.Width – 100)
Dim y = rand.Next(0, _worldSize.Height – 100)
Dim w = rand.Next(20, 200)
Dim h = rand.Next(20, 200)
_dummyShapes.Add(New RectangleF(x, y, w, h))
Next
End Sub
#End Region
#Region ” 座標変換ロジック（ここが極めて重要） ”
”’
”’
Public Function WorldToScreen(worldPt As PointF) As PointF
Return New PointF(
(worldPt.X – _scrollOffset.X) _zoomRate,
(worldPt.Y – _scrollOffset.Y) _zoomRate
)
End Function
”’
”’
Public Function ScreenToWorld(screenPt As PointF) As PointF
Return New PointF(
(screenPt.X / _zoomRate) + _scrollOffset.X,
(screenPt.Y / _zoomRate) + _scrollOffset.Y
)
End Function
#End Region
#Region ” スクロールバー制御と同期 ”
”’
”’
Private Sub UpdateScrollBars()
If hScrollBar Is Nothing OrElse vScrollBar Is Nothing Then Return
‘ クライアント領域（スクロールバー自身の幅を除く）の算出
Dim viewWidth As Integer = Me.ClientSize.Width – vScrollBar.Width
Dim viewHeight As Integer = Me.ClientSize.Height – hScrollBar.Height
If viewWidth <= 0 OrElse viewHeight <= 0 Then Return
' 現在のズーム状態における仮想ワールドのサイズ（スクリーンピクセル単位）
Dim virtualWidthInScreen As Integer = CInt(_worldSize.Width _zoomRate)
Dim virtualHeightInScreen As Integer = CInt(_worldSize.Height _zoomRate)
' スクロールバーの必要性の判定
Dim needH As Boolean = virtualWidthInScreen > viewWidth
Dim needV As Boolean = virtualHeightInScreen > viewHeight
hScrollBar.Visible = needH
vScrollBar.Visible = needV
‘ スクロールバーが非表示になった場合のオフセットリセット
If Not needH Then _scrollOffset.X = 0
If Not needV Then _scrollOffset.Y = 0
‘ — 水平スクロールバーの設定 —
If needH Then
‘ Maximumは「スクロール可能な最大値」ではなく、「スクロール範囲全体の幅」
‘ LargeChangeにビューポートの幅を設定することで、直感的な挙動となる
hScrollBar.Minimum = 0
hScrollBar.Maximum = virtualWidthInScreen
hScrollBar.LargeChange = viewWidth
hScrollBar.SmallChange = Math.Max(1, CInt(viewWidth 0.1))
‘ スクロールオフセット値の範囲制限（クランプ）
Dim maxScrollX As Single = _worldSize.Width – (viewWidth / _zoomRate)
_scrollOffset.X = Math.Max(0.0F, Math.Min(_scrollOffset.X, maxScrollX))
hScrollBar.Value = CInt(_scrollOffset.X _zoomRate)
End If
‘ — 垂直スクロールバーの設定 —
If needV Then
vScrollBar.Minimum = 0
vScrollBar.Maximum = virtualHeightInScreen
vScrollBar.LargeChange = viewHeight
vScrollBar.SmallChange = Math.Max(1, CInt(viewHeight 0.1))
Dim maxScrollY As Single = _worldSize.Height – (viewHeight / _zoomRate)
_scrollOffset.Y = Math.Max(0.0F, Math.Min(_scrollOffset.Y, maxScrollY))
vScrollBar.Value = CInt(_scrollOffset.Y _zoomRate)
End If
End Sub
‘ スクロールバーのドラッグ・クリックイベント
Private Sub ScrollBar_Scroll(sender As Object, e As ScrollEventArgs) Handles hScrollBar.Scroll, vScrollBar.Scroll
‘ スクロールバーの値（スクリーン座標値）をワールド座標のオフセットに逆変換
If sender Is hScrollBar Then
_scrollOffset.X = e.NewValue / _zoomRate
ElseIf sender Is vScrollBar Then
_scrollOffset.Y = e.NewValue / _zoomRate
End If
Me.Invalidate()
End Sub
#End Region
#Region ” マウス・ホイール制御（ズーム＆ドラッグスクロール） ”
Protected Overrides Sub OnMouseWheel(e As MouseEventArgs)
MyBase.OnMouseWheel(e)
‘ マウス位置（スクリーン座標）を取得
Dim screenMousePos As PointF = e.Location
‘ 1. 現在のマウス位置における「ワールド座標」を保持（ズームの絶対不動点とする）
Dim worldMousePosBeforeZoom As PointF = ScreenToWorld(screenMousePos)
‘ 2. ズーム率の変更（ホイール回転方向による制御）
Dim zoomFactor As Single = 1.1F
Dim nextZoom As Single = _zoomRate
If e.Delta > 0 Then
nextZoom = zoomFactor ‘ 拡大
Else
nextZoom /= zoomFactor ‘ 縮小
End If
‘ ズーム制限の適用
nextZoom = Math.Max(MinZoom, Math.Min(MaxZoom, nextZoom))
If nextZoom <> _zoomRate Then
_zoomRate = nextZoom
‘ 3. 数学的アプローチに基づく、新しいスクロールオフセットの逆算
‘ 「ズーム前のワールド座標」が「現在のスクリーン座標」に等しくなるように補正する
_scrollOffset.X = worldMousePosBeforeZoom.X – (screenMousePos.X / _zoomRate)
_scrollOffset.Y = worldMousePosBeforeZoom.Y – (screenMousePos.Y / _zoomRate)
‘ スクロールバーの更新と再描画
UpdateScrollBars()
Me.Invalidate()
End If
End Sub
Protected Overrides Sub OnMouseDown(e As MouseEventArgs)
MyBase.OnMouseDown(e)
‘ マウスホイールクリック、または右ドラッグでスクロール開始
If e.Button = MouseButtons.Middle OrElse e.Button = MouseButtons.Right Then
_isDragging = True
_dragStartMousePos = e.Location
_dragStartScrollOffset = _scrollOffset
Me.Cursor = Cursors.NoMove2D
End If
End Sub
Protected Overrides Sub OnMouseMove(e As MouseEventArgs)
MyBase.OnMouseMove(e)
If _isDragging Then
‘ ドラッグ量（スクリーン座標ピクセル差分）
Dim deltaX As Single = e.Location.X – _dragStartMousePos.X
Dim deltaY As Single = e.Location.Y – _dragStartMousePos.Y
‘ ワールド座標のオフセットへデコードして反映
_scrollOffset.X = _dragStartScrollOffset.X – (deltaX / _zoomRate)
_scrollOffset.Y = _dragStartScrollOffset.Y – (deltaY / _zoomRate)
UpdateScrollBars()
Me.Invalidate()
End If
End Sub
Protected Overrides Sub OnMouseUp(e As MouseEventArgs)
MyBase.OnMouseUp(e)
If _isDragging Then
_isDragging = False
Me.Cursor = Cursors.Default
End If
End Sub
Protected Overrides Sub OnResize(e As EventArgs)
MyBase.OnResize(e)
‘ 画面サイズが変わればスクロールバーの可視領域サイズ（LargeChange）も変わる
UpdateScrollBars()
Me.Invalidate()
End Sub
#End Region
#Region ” 超高速描画エンジン (OnPaint) ”
Protected Overrides Sub OnPaint(e As PaintEventArgs)
Dim g As Graphics = e.Graphics
‘ 描画品質の最適化。業務システムではアンチエイリアスをOFFにする、
‘ または高速設定（Speed重視）にする方がスクロールが滑らかになります。
g.SmoothingMode = SmoothingMode.HighSpeed
g.InterpolationMode = InterpolationMode.Low
g.PixelOffsetMode = PixelOffsetMode.HighSpeed
‘ 背景色でクリア
g.Clear(Color.FromArgb(30, 30, 30))
‘ 現在の可視ワールド座標範囲（ビューポート）の算出（＝カリング用領域）
Dim viewportWidth As Single = (Me.ClientSize.Width – vScrollBar.Width) / _zoomRate
Dim viewportHeight As Single = (Me.ClientSize.Height – hScrollBar.Height) / _zoomRate
Dim viewport As New RectangleF(_scrollOffset.X, _scrollOffset.Y, viewportWidth, viewportHeight)
‘ グリッド線の描画（背景にワールド座標準拠のグリッドを敷く）
DrawBackgroundGrid(g, viewport)
‘ 大量データのカリング描画（超高速化の真髄）
‘ ※GDI+のリソースリークを防ぐため、PenやBrushは必ずUsing句でスコープ内で廃棄すること！
Using shapePen As New Pen(Color.Cyan, 1.0F),
visibleBrush As New SolidBrush(Color.FromArgb(60, 0, 255, 255))
For Each rect In _dummyShapes
‘ カリング判定：画面外のオブジェクトは「描画命令すら発行しない」
‘ この判定一つで、数万件のデータ描画が1ミリ秒以下に激変します。
If viewport.IntersectsWith(rect) Then
‘ ワールド座標からスクリーン座標へ変換
Dim screenRect As New RectangleF(
(rect.X – _scrollOffset.X) _zoomRate,
(rect.Y – _scrollOffset.Y) _zoomRate,
rect.Width _zoomRate,
rect.Height _zoomRate
)
‘ 描画実行
g.FillRectangle(visibleBrush, screenRect)
g.DrawRectangle(shapePen, screenRect.X, screenRect.Y, screenRect.Width, screenRect.Height)
End If
Next
End Using
‘ 情報表示（デバッグ用）
Using font As New Font(“Segoe UI”, 9.0F),
textBrush As New SolidBrush(Color.White)
Dim infoText As String = $”Zoom: {_zoomRate:F2}x | ScrollOffset: ({_scrollOffset.X:F0}, {_scrollOffset.Y:F0}) | Total Items: 10,000″
g.DrawString(infoText, font, textBrush, 10, 10)
End Using
End Sub
”’
”’
Private Sub DrawBackgroundGrid(g As Graphics, viewport As RectangleF)
Const GridSize As Integer = 200 ‘ 200px間隔のグリッド
‘ グリッドの開始位置をカリング領域の端に揃える
Dim startX As Single = CSng(Math.Floor(viewport.Left / GridSize) GridSize)
Dim startY As Single = CSng(Math.Floor(viewport.Top / GridSize) GridSize)
Using gridPen As New Pen(Color.FromArgb(60, 60, 60), 1.0F)
‘ 垂直線の描画
Dim x As Single = startX
While x <= viewport.Right
Dim screenX As Single = (x - _scrollOffset.X) _zoomRate
g.DrawLine(gridPen, screenX, 0, screenX, Me.Height)
x += GridSize
End While
' 水平線の描画
Dim y As Single = startY
While y <= viewport.Bottom
Dim screenY As Single = (y - _scrollOffset.Y) _zoomRate
g.DrawLine(gridPen, 0, screenY, Me.Width, screenY)
y += GridSize
End While
End Using
End Sub
#End Region
End Class
---
4. 実務におけるデータ連携とパフォーマンスチューニングの鉄則
このコードを実プロジェクトへ組み込む際、アーキテクトとして妥協してはならない「絶対の戒律」があります。特にファイルやデータベースと連携する場合、設計が甘いと簡単にフリーズやメモリリークを引き起こします。
① GDI+ オブジェクト（`Pen`, `Brush`, `Font`）は毎回破棄せよ
コード例の中で、以下のように `Using` 句を徹底していることに気づきましたか？
Using shapePen As New Pen(Color.Cyan, 1.0F)
‘ 描画処理
End Using
これは、「後でガベージコレクション（GC）が回収してくれるだろう」という甘えを排除するためです。
Windows Forms（GDI+）の下層にあるのは、Win32の「アンマネージド・リソース」です。`Pen` や `Brush` などのオブジェクトをループ内や `OnPaint` イベント内で `Using` を使わずに毎フレーム生成し続けると、GDIオブジェクトの枯渇（上限10,000個）を引き起こし、アプリケーションが突然真っ白になってクラッシュします。
② データベースやファイルからの動的フェッチ（遅延評価）
10万件の図面要素をすべてメモリに展開してリスト（`List(Of T)`）で保持するのは、メモリ効率の観点から最悪の設計です。
- R-Treeやグリッドパーティショニングによる空間インデックスの構築：
ワールド座標系を例えば $1000 \times 1000$ ピクセルの「チャンク（区画）」に分割します。
- ビューポート交差クエリの実行：
`OnPaint` が走るたびに、現在の `viewport`（ワールド座標系の可視四角形）と重なるチャンクのデータのみをメモリ（キャッシュ）から引き出し、あるいはSQLite等のローカルDBから高速インデックス検索（`WHERE x_max > min_x AND x_min < max_x ...`）で取得して描画します。
③ スクロールイベント中の重い処理の排除
スクロールバーのドラッグ中、`OnPaint` は秒間数十回から数百回呼び出されます。このイベントハンドラ内で、データベース問い合わせや重いファイルI/Oを同期（Synchronous）で行うことは、「画面がカクつく（スタッター）」直接の原因になります。
- 非同期描画スレッドの導入、もしくはデータの事前ロード（プリフェッチ）
- スクロール中は簡易グラフィックス（バウンディングボックスのみ等）を描画し、スクロールが停止した瞬間（`ScrollEventArgs.Type = ScrollEventType.EndScroll`）に高精細な描画に切り替える「LOD（Level of Detail）」の実装
—
5. まとめ
今回解説した `HScrollBar`/`VScrollBar` を用いたカスタムスクロール領域の自作は、標準機能の甘えを捨て、WinFormsの描画パイプラインを完全に支配することを意味します。
- ワールド座標とスクリーン座標を完全に分離せよ。
- カリング（可視領域外の描画スキップ）を徹底せよ。
- GDI+リソースのライフサイクル管理（`Using`）を1ミリも妥協するな。
この3原則を徹底するだけで、レガシーと言われがちなWindows Formsアプリケーションであっても、驚くほど滑らかで、数百万オブジェクトを軽々と処理する超高性能な業務UIを構築することができます。ぜひ、あなたのプロジェクトのビューアー画面にこの設計思想を注入し、圧倒的なパフォーマンスを実現してください。
