【入門編】Windows FormsのDataGridViewにおけるセルのドラッグ&ドロップ並び替え:BindingListを使った直感的な行順序変更の実装 – Visual Basic (VB / VB.NET)解析バイブル

スポンサーリンク
スポンサーリンク

DataGridViewの行を自由自在に操る —— BindingListを使った「直感的な並び替え」の極意

こんにちは。今日は、Windows Forms開発において多くのエンジニアが一度は直面する、ある「壁」についてお話ししましょう。

業務アプリケーションを作っていると、必ずと言っていいほど求められる機能があります。それは、「マスタ管理画面などで、マウスでグリッドの行を掴んで、好きな順番に入れ替えたい」という要望です。

「そんなの、Excelみたいにドラッグ&ドロップするだけでしょ?」と軽く考えるかもしれません。しかし、いざ実装しようとすると、多くの初中級者が迷宮に迷い込みます。

「DataGridViewの行を動かしたのに、元のデータが変わっていない!」
「並び替えた瞬間に、エラーでアプリが落ちた……」

なぜ、こんなことが起きるのか? それは、「見た目(UI)」と「中身(データ)」の分離という、プログラミングにおける最も重要で、かつ最も奥深い概念を理解していないからです。

今日は、その迷宮を抜け出すための「正解」を、伝説のアーキテクトとして皆さんに伝授しましょう。

1. なぜ「DataGridViewの行」を直接動かしてはいけないのか?

まず、ここをクリアしましょう。ここが理解できれば、あなたのVB.NETスキルは一段上のステージへ上がります。

多くの初心者は、`DataGridView.Rows[i]` を操作して、行を物理的に移動させようとします。しかし、これは非常に危険な設計です。なぜなら、DataGridViewはあくまで「データの窓」に過ぎないからです。

窓の向こう側には「実際のデータ(データソース)」があります。窓越しに景色(行)を動かしたとしても、窓の向こうにある景色そのものは動いていません。次に画面を更新したとき、データソースに基づいて景色は元の位置に戻ってしまいます。

これを解決する魔法の道具が、`BindingList(Of T)` です。

BindingList(Of T) の正体

通常、`List(Of T)` はデータを保持するだけで、中身が変わっても「変わったよ!」と画面に伝える能力を持っていません。
一方、`BindingList(Of T)` は、「データが追加された、削除された、順番が変わった」というイベントを自動的に発信し、紐付いているDataGridViewに即座に通知する、極めて賢いリストなのです。

2. 実装の設計図:二段構えのアプローチ

ドラッグ&ドロップによる並び替えを実現するには、以下のステップを踏みます。

1. データモデルを作る: 管理したい情報の「型」を定義する。
2. BindingListを用意する: データを保持する「賢いリスト」を作る。
3. UIのイベントを制御する: 「掴む」「運ぶ」「離す」の動作を実装する。

それでは、具体的なコードを見ていきましょう。

3. 実践:究極のドラッグ&ドロップ実装

以下のコードは、そのままプロジェクトに組み込んで動作を確認できるレベルまで作り込んであります。

プロジェクトの準備

  • Windows Forms アプリケーション (VB.NET)
  • DataGridView を1つ配置(名前は `dgvMaster` とします)

実装コード

Imports System.ComponentModel

''' <summary>
''' 管理したいデータのモデルクラス
''' </summary>
Public Class ProductItem
    Public Property ID As Integer
    Public Property Name As String
    Public Property SortOrder As Integer ' 並び順を管理するプロパティ
End Class

Public Class Form1
    ' --- ここが重要! DataGridViewと直結する「賢いリスト」 ---
    Private _productList As BindingList(Of ProductItem)

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        ' 1. サンプルデータの作成
        Dim items As New List(Of ProductItem) From {
            New ProductItem With {.ID = 1, .Name = "リンゴ", .SortOrder = 0},
            New ProductItem With {.ID = 2, .Name = "バナナ", .SortOrder = 1},
            New ProductItem With {.ID = 3, .Name = "オレンジ", .SortOrder = 2},
            New ProductItem With {.ID = 4, .Name = "メロン", .SortOrder = 3}
        }

        ' 2. ListをBindingListに変換して、DataGridViewに紐付ける
        _productList = New BindingList(Of ProductItem)(items)
        dgvMaster.DataSource = _productList

        ' UIの設定
        dgvMaster.AllowDrop = True ' ドロップを許可する設定を忘れずに!
        dgvMaster.SelectionMode = DataGridViewSelectionMode.FullRowSelect
    End Sub

    ' --- ドラッグ&ドロップの魔法のステップ ---

    ''' <summary>
    ''' ステップ1: マウスが押されたとき(ドラッグの開始)
    ''' </summary>
    Private Sub dgvMaster_MouseDown(sender As Object, e As MouseEventArgs) Handles dgvMaster.MouseDown
        ' クリックされた位置にある行のインデックスを取得
        Dim hit As DataGridViewHitTestInfo = dgvMaster.HitTest(e.X, e.Y)

        ' 行(Row)がクリックされた場合のみ処理を開始
        If hit.Type = DataGridViewHitTestType.RowHeader OrElse hit.Type = DataGridViewHitTestType.Cell Then
            Dim rowIndex As Integer = hit.RowIndex
            
            ' ドラッグ操作を開始。移動させる「行のインデックス」をデータとして渡す
            dgvMaster.DoDragDrop(rowIndex, DragDropEffects.Move)
        End If
    End Sub

    ''' <summary>
    ''' ステップ2: マウスがコントロールの上に入ったとき(視覚的フィードバック)
    ''' </summary>
    Private Sub dgvMaster_DragEnter(sender As Object, e As DragEventArgs) Handles dgvMaster.DragEnter
        ' ドラッグされているものが「移動」であることを示す
        If e.Effect = DragDropEffects.None Then
            e.Effect = DragDropEffects.Move
        End If
    End Sub

    ''' <summary>
    ''' ステップ3: マウスを離したとき(データの入れ替え実行)
    ''' </summary>
    Private Sub dgvMaster_DragDrop(sender As Object, e As DragEventArgs) Handles dgvMaster.DragDrop
        ' 1. 移動元のインデックスを取得(MouseDownで渡したもの)
        Dim sourceIndex As Integer = CInt(e.Data.GetData(GetType(Integer)))

        ' 2. 移動先のインデックスを計算
        ' マウスの位置から、どの行の上にドロップされたかを判定
        Dim clientPoint As Point = dgvMaster.PointToClient(New Point(e.X, e.Y))
        Dim hit As DataGridViewHitTestInfo = dgvMaster.HitTest(clientPoint.X, clientPoint.Y)
        Dim targetIndex As Integer = hit.RowIndex

        ' 行が正しく判定され、かつ移動元と移動先が異なる場合のみ処理
        If targetIndex >= 0 AndAlso sourceIndex <> targetIndex Then
            ' --- ここが「極限の知見」:データソース側を操作する ---
            
            ' 移動させるアイテムを一旦取り出す
            Dim movingItem As ProductItem = _productList(sourceIndex)

            ' リストから削除
            _productList.RemoveAt(sourceIndex)

            ' 新しい位置に挿入
            ' ※もしドロップ位置が末尾だった場合の微調整
            If targetIndex > _productList.Count Then
                _productList.Add(movingItem)
            Else
                _productList.Insert(targetIndex, movingItem)
            End If

            ' 補足:ここで必要に応じて、SortOrderプロパティを全件更新してDBに保存する処理を呼び出す
            UpdateSortOrders()
        End If
    End Sub

    ''' <summary>
    ''' 並び順を確定させるための補助メソッド
    ''' </summary>
    Private Sub UpdateSortOrders()
        For i As Integer = 0 To _productList.Count - 1
            _productList(i).SortOrder = i
        Next
        ' ここでDBへのUpdate処理などを行うのがプロの設計です
    End Sub

End Class

4. 陥りやすいエラーと、プロの回避術

この実装を試す際、以下の3点に注意してください。これを知っているだけで、デバッグの時間は半分になります。

① `AllowDrop = True` を忘れていないか?

これを忘れると、`DragDrop` イベントが一生呼ばれません。「コードは正しいのに、動かない!」という時の原因の8割はこれです。

② インデックスの境界値エラー

ドラッグ&ドロップ中、マウスの位置によっては `targetIndex` が `-1`(ヘッダー部分など)になることがあります。必ず `If targetIndex >= 0` というチェックを入れましょう。これを怠ると、`IndexOutOfRangeException` でアプリがクラッシュします。

③ 「見た目」ではなく「データ」を動かす

コードの中で `dgvMaster.Rows.RemoveAt(…)` と書いていませんか? それは間違いです。
必ず `_productList.RemoveAt(…)` と、データソース側を操作してください。
`BindingList` を使っていれば、データソースを操作するだけで、DataGridViewは「あ、中身が変わったんだな」と察して、自動的に自分自身を書き換えてくれます。これこそが、オブジェクトのライフサイクルを掌握するということなのです。

最後に:一歩先へ進むあなたへ

いかがでしたか?
「DataGridViewの行を動かす」という単純に見える動作の裏側には、「UIはデータを見せているだけの窓である」という、ソフトウェア設計における本質的な原則が隠されています。

この仕組みをマスターすれば、今後どのような複雑なグリッド操作を求められても、あなたは動じることがないでしょう。データソースさえ正しく扱えれば、UIは何をしても、最後にはデータに従うのですから。

ここをクリアすれば、Visual Basic (VB.NET) の基本はバッチリですよ。
さあ、自信を持って次の実装に取り掛かってください!応援しています。

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