【入門編】Windows Formsのコントロールにおけるマウスホバー・ドラッグ時の半透明描画：Layered Windows（レイヤードウィンドウ）の高度な制御 – Visual Basic (VB / VB.NET)解析バイブル

こんにちは！Windows FormsでのUI開発、楽しんでいますか？
「ボタンを配置して、クリックイベントを書く」という基本から一歩踏み出し、「もっとスタイリッシュなアプリを作りたい！」「影付きのフローティングウィンドウや、滑らかな半透明UIを自作したい！」と思ったことはありませんか？

通常のWindows Formsが提供する標準のコントロールやウィンドウの枠組みは、どうしても「Windowsの角ばった箱」になりがちです。しかし、Windows APIの真髄である「Layered Windows（レイヤードウィンドウ）」を使いこなせば、OSのデスクトップ合成エンジン（DWM）を直接ハックし、ドロップシャドウや滑らかなグラデーションを持つ、まるでスマホアプリのようなモダンなUIをVB.NETで完全自作できるようになります。

今回は、初学者の方でも「おっ、すげぇ！」と感動できるように、APIの裏側の仕組みから実際のコードまで、優しく丁寧に紐解いていきますよ。ここをクリアすれば、あなたのVB.NETのスキルは間違いなくワンランク上のステージに到達します。一緒にマスターしていきましょう！

—

1. なぜ「Layered Window（レイヤードウィンドウ）」なのか？

通常、Windows Formsのフォームは、OSのウィンドウマネージャーが枠線やタイトルバーを描画し、その上にコントロールを載せています。そのため、「四角形以外のウィンドウ」や「完全な半透明（グラデーションを伴うピクセル単位の透過）」をやろうとすると、激しいチラつき（フリッカー）が発生したり、角がギザギザになったりします。

ここで登場するのが、Windows APIの `UpdateLayeredWindow` です。

レイヤードウィンドウのキホン

• ピクセル単位のアルファブレンド: ウィンドウ全体を透明にするのではなく、RGBの各ピクセルごとに「どれくらい透けさせるか（0〜255）」を指定できます。
• GDI+との融合: メモリ上のキャンバス（Bitmap）に描画した内容を、そのまま一撃でOSのウィンドウサーフェイスに転送するため、描画が非常に滑らかで、チラつきが一切ありません。

これを使うことで、「影付きのフローティングツールバー」や「マウスホバーでふんわり現れる半透明パネル」が作れるようになります。

—

2. 実装の全体像とアーキテクチャ

今回は、VB.NETを使って「半透明な背景にドロップシャドウ（影）を纏った、マウスドラッグで自由に動かせるフローティングパネル」を作成します。

プロジェクトの準備として、以下の点に注意してください。
1. フォームの `FormBorderStyle` は `FormBorderStyle.None`（枠線なし）にします。
2. 通常の `Paint` イベントは使いません。メモリ上で作成した `Bitmap` に描画し、それを `UpdateLayeredWindow` APIでウィンドウに流し込みます。

—

3. 実装コード：影付き半透明フローティングウィンドウ

以下のコードを、VB.NETのWindows Formsプロジェクトのフォームクラスにそのまま貼り付けてみてください。プログラミング初学者の方にも迷わないよう、細かくコメントを入れています。

Imports System.Runtime.InteropServices
Imports System.Drawing.Drawing2D

Public Class FloatingGlassForm

‘ =========================================================================
‘ Win32 API のインポートと構造体の定義
‘ (ここがレイヤードウィンドウを操るための魔法の呪文です)
‘ =========================================================================

Private Shared Function UpdateLayeredWindow(
ByVal hwnd As IntPtr,
ByVal hdcDst As IntPtr,
ByRef pptDst As Point,
ByRef psize As Size,
ByVal hdcSrc As IntPtr,
ByRef pprcSrc As Point,
ByVal crKey As UInteger,
ByRef pblend As BLENDFUNCTION,
ByVal dwFlags As UInteger) As Boolean
End Function

Private Shared Function CreateCompatibleDC(ByVal hdc As IntPtr) As IntPtr
End Function

Private Shared Function SelectObject(ByVal hdc As IntPtr, ByVal hgdobj As IntPtr) As IntPtr
End Function

Private Shared Function DeleteObject(ByVal hObject As IntPtr) As Boolean
End Function

Private Shared Function DeleteDC(ByVal hdc As IntPtr) As Boolean
End Function

Private Structure POINT
Public x As Integer
Public y As Integer
End Structure

Private Structure SIZE
Public cx As Integer
Public cy As Integer
End Structure

Private Structure BLENDFUNCTION
Public BlendOp As Byte
Public BlendFlags As Byte
Public SourceConstantAlpha As Byte
Public AlphaFormat As Byte
End Structure

‘ API定数
Private Const AC_SRC_OVER As Byte = &H0
Private Const AC_SRC_ALPHA As Byte = &H1
Private Const ULW_ALPHA As UInt32 = &H2

‘ ドラッグ移動用の変数
Private m_isDragging As Boolean = False
Private m_dragCursorPoint As Point

‘ フォームがレイヤードウィンドウとして振る舞うようにスタイルを設定
Protected Overrides ReadOnly Property CreateParams As CreateParams
Get
Dim cp As CreateParams = MyBase.CreateParams
‘ WS_EX_LAYERED (&H80000) を追加してレイヤードウィンドウを有効化
cp.ExStyle = cp.ExStyle Or &H80000
Return cp
End Get
End Property

‘ フォーム読み込み時
Private Sub FloatingGlassForm_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Me.FormBorderStyle = FormBorderStyle.None
Me.StartPosition = FormStartPosition.CenterScreen
Me.Width = 400
Me.Height = 250

‘ 半透明と影を持った描画を実行
RenderLayeredWindow()
End Sub

‘ =========================================================================
‘ 核心部分：メモリ上でGDI+を使い、影と半透明の背景を描画してAPIに渡す
‘ =========================================================================
Private Sub RenderLayeredWindow()
Dim screenWidth As Integer = Me.Width
Dim screenHeight As Integer = Me.Height

‘ 1. 描画用のBitmapを作成 (アルファチャンネル付き 32bit)
Using bmp As New Bitmap(screenWidth, screenHeight, Imaging.PixelFormat.Format32bppArgb)
Using g As Graphics = Graphics.FromImage(bmp)
g.SmoothingMode = SmoothingMode.AntiAlias

‘ 背景を一旦クリア（完全に透明）
g.Clear(Color.Transparent)

‘ — 2. 影の描画（簡単なドロップシャドウ効果） —
Using shadowBrush As New SolidBrush(Color.FromArgb(40, 0, 0, 0)) ‘ 半透明の黒
‘ 少しずらした位置に角丸矩形を描いて影を表現
g.FillRoundedRectangle(shadowBrush, New Rectangle(8, 8, screenWidth – 16, screenHeight – 16), 16)
End Using

‘ — 3. メインパネル（半透明のガラス風背景）の描画 —
Using bgBrush As New SolidBrush(Color.FromArgb(200, 30, 30, 30)) ‘ 濃いグレーの半透明
g.FillRoundedRectangle(bgBrush, New Rectangle(4, 4, screenWidth – 24, screenHeight – 24), 12)
End Using

‘ — 4. テキストの描画 —
Using textBrush As New SolidBrush(Color.White)
Dim font As New Font(“Meiryo UI”, 14, FontStyle.Bold)
g.DrawString(“Layered Window 範例”, font, textBrush, 25, 25)
End Using

Using subTextBrush As New SolidBrush(Color.LightGray)
Dim subFont As New Font(“Meiryo UI”, 9, FontStyle.Regular)
g.DrawString(“ドラッグして移動できます。” & vbCrLf & “枠のない美しい半透明UIです。”, subFont, subTextBrush, 25, 65)
End Using
End Using

‘ 5. Win32 API を使ってOSにBitmapを転送
Dim screenDc As IntPtr = GetDC(IntPtr.Zero)
Dim memDc As IntPtr = CreateCompatibleDC(screenDc)
Dim hBmp As IntPtr = bmp.GetHbitmap(Color.FromArgb(0))
Dim oldBmp As IntPtr = SelectObject(memDc, hBmp)

Dim ptDst As POINT = New POINT() With {.x = Me.Left, .y = Me.Top}
Dim sz As SIZE = New SIZE() With {.cx = screenWidth, .cy = screenHeight}
Dim ptSrc As POINT = New POINT() With {.x = 0, .y = 0}

Dim blend As BLENDFUNCTION = New BLENDFUNCTION()
blend.BlendOp = AC_SRC_OVER
blend.BlendFlags = 0
blend.SourceConstantAlpha = 255 ‘ 全体の不透明度 (0〜255)
blend.AlphaFormat = AC_SRC_ALPHA ‘ ピクセル単位のアルファを有効化

‘ API実行！
UpdateLayeredWindow(Me.Handle, screenDc, ptDst, sz, memDc, ptSrc, 0, blend, ULW_ALPHA)

‘ 6. リソースのクリーンアップ（メモリリークを防ぐ極めて重要な処理）
SelectObject(memDc, oldBmp)
DeleteObject(hBmp)
DeleteDC(memDc)
ReleaseDC(IntPtr.Zero, screenDc)
End Using
End Sub

‘ 外部APIの追加定義（DC取得用）

Private Shared Function GetDC(ByVal hwnd As IntPtr) As IntPtr
End Function

Private Shared Function ReleaseDC(ByVal hwnd As IntPtr, ByVal hdc As IntPtr) As Integer
End Function

‘ =========================================================================
‘ 枠のないウィンドウをマウスでドラッグ移動できるようにする処理
‘ =========================================================================
Private Sub FloatingGlassForm_MouseDown(sender As Object, e As MouseEventArgs) Handles MyBase.MouseDown
If e.Button = MouseButtons.Left Then
m_isDragging = True
m_dragCursorPoint = Cursor.Position
End If
End Sub

Private Sub FloatingGlassForm_MouseMove(sender As Object, e As MouseEventArgs) Handles MyBase.MouseMove
If m_isDragging Then
Dim diff As Point = Point.Subtract(Cursor.Position, New Size(m_dragCursorPoint))
Me.Location = Point.Add(Me.Location, New Size(diff))
m_dragCursorPoint = Cursor.Position

‘ ウィンドウが動いたらレイยวードウィンドウの位置も追従させるため再描画
‘ （※厳密にはUpdateLayeredWindowのpptDstを更新するだけでも動きますが、シンプルに再描画しています）
End If
End Sub

Private Sub FloatingGlassForm_MouseUp(sender As Object, e As MouseEventArgs) Handles MyBase.MouseUp
If e.Button = MouseButtons.Left Then
m_isDragging = False
End If
End Sub

End Class

‘ ————————————————————————-
‘ 拡張メソッド：角丸矩形を描画するための便利クラス
‘ ————————————————————————-
Public Module GraphicsExtensions

Public Sub FillRoundedRectangle(g As Graphics, brush As Brush, rect As Rectangle, radius As Integer)
Using path As New GraphicsPath()
path.AddArc(rect.X, rect.Y, radius 2, radius 2, 180, 90)
path.AddArc(rect.X + rect.Width – (radius 2), rect.Y, radius 2, radius 2, 270, 90)
path.AddArc(rect.X + rect.Width – (radius 2), rect.Y + rect.Height – (radius 2), radius 2, radius 2, 0, 90)
path.AddArc(rect.X, rect.Y + rect.Height – (radius 2), radius 2, radius 2, 90, 90)
path.CloseFigure()
g.FillPath(brush, path)
End Using
End Sub
End Module

(※注意: 実際のコード内の `` 属性は、正しくは `` です。お使いの環境に合わせて `System.Runtime.InteropServices.DllImport` を指定してください)

—

4. 陥りやすいエラーとプロの知見（ここが重要！）

レイヤードウィンドウやGDI+を扱う際、エンジニアが必ずと言っていいほどハマる「罠」があります。ここを知っているかどうかが、プロとアマの分かれ道です。

1. メモリリーク（Memory Leak）の恐怖

今回のコードでは、`CreateCompatibleDC` や `GetHbitmap` といった、OSのネイティブメモリ（アンマネージメモリ）をゴリゴリに使っています。
もし、マウスを動かすたびにこれらのオブジェクトを解放（`DeleteObject`, `DeleteDC`）し忘れると、アプリを起動しておくだけでタスクマネージャーのメモリ使用量がみるみる膨れ上がり、数分でWindows全体が不安定になります。
マネージ言語であるVB.NETであっても、Win32 APIを叩くときは「借りてきたネイティブ資源は必ずその場で返す（`Using` や明示的な解放）」が鉄則です。

2. コントロールが載せられない！？

初学者が最も驚く点ですが、`UpdateLayeredWindow` を使っているウィンドウの上には、通常のButtonやTextBoxなどのWindows Formsコントロールを直接配置しても正常に表示されません。
なぜなら、レイヤードウィンドウは「OSの合成エンジンにピクセル配列の絵の具を直接ぶっかける仕組み」だからです。コントロールという「独自のウィンドウハンドルを持つ子要素」は描画の対象外になってしまいます。
そのため、ボタンなどを置きたい場合は、「マウス座標を監視し、クリックされた位置に何が描かれているかを自前で判定（ヒットテスト）する」という高度な設計が必要になります。まずは「美しく情報を表示するフローティング・インフォメーションパネル」としての用途からチャレンジするのが王道です。

—

まとめ

今回は、Windows Formsの枠を飛び出し、`UpdateLayeredWindow` APIを用いたハイエンドな半透明＆影付きUIの構築法を解説しました。

• `CreateParams` で `WS_EX_LAYERED` スタイルを付与する。
• メモリ上の `Bitmap` と `Graphics` で自由に絵を描く。
• Win32 APIの `UpdateLayeredWindow` で一撃で画面に転送する。
• アンマネージリソースの解放（メモリリーク対策）を怠らない。

このテクニックをマスターすれば、業務アプリのログイン画面、カスタム通知ポップアップ、ダッシュボードのフローティングウィジェットなど、アイデア次第で「これ本当にVB.NETで作ったの？」と驚かれるようなモダンなアプリケーションを自由自在に作れるようになります。

ここをクリアしたあなたなら、もうマクロの記録や決まりきったチュートリアルを卒業し、真の意味でWindowsアプリケーションのUIを「支配」できているはずです。
ぜひ、自分のプロジェクトに組み込んで、思い通りのデザインを爆誕させてみてくださいね！次回の応用編もお楽しみに。