こんにちは。業務自動化の世界へようこそ。
マクロの記録から一歩踏み出し、「自分でUIを制御したい」と考え始めたあなたは、すでに立派なエンジニアの入り口に立っています。
今回は、VB.NETのWindows Formsにおいて、最も美しく、かつ実用的なテクニックの一つ「FlowLayoutPanelを使った動的カードUI」を攻略しましょう。
—
1. なぜ「FlowLayoutPanel」なのか？
業務アプリを作っていると、「リストの件数が増減する」「画面サイズを変えても綺麗に並べたい」という要件に必ずぶつかります。
昔ながらの `Button` を `Location = New Point(x, y)` で力技で配置していませんか？ それは「崩壊の始まり」です。画面を少し縮めただけでボタン同士が重なったり、見切れたりしてしまいますよね。
FlowLayoutPanelは、その名の通り「流れるように」要素を配置するコンテナです。
- 自動折り返し: 画面幅が狭まれば、自動的に次の行へ要素を飛ばします。
- 動的追加: 後からボタンやカードを「追加」するだけで、座標計算はコントロールが勝手にやってくれます。
これがわかると、業務データの「タグクラウド」や「カード型一覧」が驚くほど簡単に作れるようになります。
—
2. 実践：動的カード生成のコード
まずは、ボタンを動的に生成し、FlowLayoutPanelの中に放り込む基本コードを見てみましょう。
‘ フォームロード時やボタンクリック時に実行するイメージです
Private Sub AddCardToFlow(cardTitle As String)
‘ 1. カード（ボタン）のインスタンスを生成
Dim newCard As New Button()
‘ 2. 外見を整える（プロパティ設定）
newCard.Text = cardTitle
newCard.Size = New Size(120, 80) ‘ カードのサイズを固定
newCard.Margin = New Padding(5) ‘ カード同士の隙間
newCard.BackColor = Color.WhiteSmoke
‘ 3. クリック時の挙動（イベントハンドラを動的に紐付け）
AddHandler newCard.Click, AddressOf Card_Click
‘ 4. FlowLayoutPanelに追加
‘ これだけで勝手に整列されます！
FlowLayoutPanel1.Controls.Add(newCard)
End Sub
‘ カードがクリックされた時の処理
Private Sub Card_Click(sender As Object, e As EventArgs)
Dim btn = DirectCast(sender, Button)
MessageBox.Show(btn.Text & ” が選択されました！”)
End Sub
このコードの「本質」
- `AddHandler`: これが魔法です。後から生成したボタンに対して、「クリックされたらこの関数を呼べ」という命令を紐付けています。これを理解すると、UI操作の自由度が爆発的に上がります。
- `FlowLayoutPanel1.Controls.Add`: これだけで配置が完了します。座標計算（X, Y）から解放される瞬間です。
—
3. 初学者が陥りやすい「落とし穴」
多くの初心者がここで挫折するポイントがいくつかあります。
A. 画面が再描画されない（チラつき）
大量のカードを一度に追加すると、画面がカクついたり、再描画が追いつかないことがあります。
そんな時は、追加の前後で描画を一時停止させましょう。
FlowLayoutPanel1.SuspendLayout() ‘ 描画停止
‘ … ここで大量のループ処理 …
FlowLayoutPanel1.ResumeLayout() ‘ 描画再開（ここで一気に反映）
B. AutoScrollの罠
FlowLayoutPanelに要素を詰め込みすぎると、当然はみ出します。
必ずプロパティウィンドウで `AutoScroll` を `True` にしておいてください。これだけで、スクロールバーが自動出現するようになります。
—
4. プロの視点：業務アプリとしての磨き込み
ただ並べるだけでなく、「現場で使える」レベルにするには、以下の工夫を加えてみてください。
1. FlowDirection: `RightToLeft` にすれば、右から左へ流れるレイアウトになります。
2. WrapContents: これを `False` にすると、折り返さず一列に並びます。状況に応じて切り替えるだけで、横長の一覧とカード一覧を使い分けられます。
3. データバインディング: 本格的なアプリでは、List(Of T)などのデータリストをループさせて、この `AddCard` 関数を呼び出すように設計します。
—
まとめ：ここをクリアすれば、もう怖くない
FlowLayoutPanelを使いこなすことは、「個別の座標管理」という呪縛から解放されることを意味します。
1. コンテナ(FlowLayoutPanel)を用意する。
2. `New Button()` でインスタンスを作る。
3. `Controls.Add()` で放り込む。
4. `AddHandler` でイベントを飛ばす。
この4ステップだけで、あなたの業務アプリは「動的でプロフェッショナルなUI」へと進化します。
「ここが動いた！」という感動があれば、あなたはもうVB.NETのエンジニアです。まずは一つのボタンを表示させることから始めてみてください。応援しています！
