C# の DataGridView で カスタムデータ を 利用する 方法

Windowsフォームアプリケーションで利用する DataGridView において、 独自に作ったモデルクラスを表示させようとするとひと手間必要。 …といっても BindingSource を挟むだけで表示、追加、削除、変更ができるようになります。

以下ではそのサンプルコードを見ながら実装方法を紹介します。

目次

• カスタムデータを設定する
• コードによる変更を画面へ反映させる
• 列タイトルをカスタマイズする

カスタムデータ を 設定する

作成するコードは「モデルとなるクラス」と「フォームクラス」の2種類だけです。 以下にファイル一覧を記載します。 「モデルとなるクラス」がタイトルにもある カスタムデータ に相当します。

• UserModel.cs
• Form1.cs

自動生成される Form1.Designer.cs は割愛します。

サンプルコード

UserModel.cs

public class UserModel
{
    public string Id { get; set; }

    public string FirstName { get; set; }

    public string LastName { get; set; }

    public string Email { get; set; }

    public string Password { get; set; }
}

Form1.cs

using System.Collections.Generic;
using System.Windows.Forms;

public partial class Form1 : Form
{
    private BindingSource wrapper;

    private List<UserModel> original;

    public Form1()
    {
        this.InitializeComponent();

        this.original = new List()
        {
            new UserModel()
            {
                Id = "0010",
                FirstName = "Kurihara",
                LastName = "Yuki",
                Email = "yuki.kurihara@gmail.com",
                Password = "*****"
            },
            new UserModel()
            {
                Id = "0020",
                FirstName = "Momotsuki",
                LastName = "Shinya",
                Email = "shinya.momotsuki@gmail.com",
                Password = "*****"
            }
        };

        this.wrapper = new BindingSource()
        {
            DataSource = this.original
        };

        this.dataGridView1.DataSource = this.wrapper;
    }
}

UserModel.cs は説明することがないので、Form1.cs に記載している バインド 部分を説明します。

ポイントは何といっても 34行目 ～ 37行目 の BindingSource へいったん代入している箇所。 DataGridView.DataSource へ直接 List<T> を代入してもうまく表示できませんが、 BindingSource を挟むことで上手く表示できるようになります。

コードによる変更を画面へ反映させる

DataGridView.DataSouce に設定した BindingSource に対して操作することで、項目の追加・変更・削除を画面反映させられます。 具体的なコードは以下でそれぞれ見ていきます。

追加

BindingSource.Add(object) を利用して項目追加をします。

    private void button1_Click(object sender, System.EventArgs e)
    {
        this.wrapper.Add(new UserModel()
        {
            Id = System.DateTime.Now.ToString(),
            FirstName = "Kurihara",
            LastName = "Yuki",
            Email = "yuki.kurihara@gmail.com",
            Password = "*****"
        });
    }

変更

変更は元データに対して操作した後、BindngSouce.ResetItem(index) を利用して画面反映を行います。

    private void button2_Click(object sender, System.EventArgs e)
    {
        var index = 0;
        this.original[index].Id = System.DateTime.Now.ToString();
        this.wrapper.ResetItem(index);
    }

削除

削除は追加と似ていて BindingSource.RemoveAt(index) で行えます。

    private void button3_Click(object sender, System.EventArgs e)
    {
        this.wrapper.RemoveAt(0);
    }

列タイトルをカスタマイズする

自動生成される列タイトルはカスタムクラスのプロパティ名そのままなので、日本語表示しようとするともうひと手間必要になります。 以下ではその方法について見ていきます。

列タイトルを自動生成させない

以下のサンプルコードのように DataGridView.AutoGenerateColumns を設定することで制御できます。 このプロパティはデザイナで DataGridView を選択したときに表示される プロパティ画面 のリストに含まれていません。 なので、別途コードを記述する必要があります。 記述場所はコンストラクタの InitializeComponent が終わった直後くらいで良いかと思います。

this.dataGridView1.AutoGenerateColumns = false;

列タイトルに任意の項目を設定する

任意項目の追加はデザイナから行えます。 デザイナで列タイトルを作成していき、それぞれにどのプロパティを割り当てるか設定することで、日本語名の列タイトルが作成できます。 具体的な手順例は以下に載せます。

1. DataGridView 右上のオプションを選択

   

2. 展開されたメニューから [列を編集...] を選択

   

3. 「列の編集」ダイアログの「追加」ボタンを押下

   

4. 「列の追加」ダイアログで「名前」「ヘッダーテキスト」を入力して「追加」を押下

   

5. 追加された列項目を選択し、DataPropertyName にバインドしたいプロパティ名を設定

   

6. 一通り設定が終わったら「OK」を選択して閉じる

   

7. 設定完了

   

---

ざっと カスタムデータ を利用した DataGridView の使い方が確認できたかと思います。 とりあえずは基本的な操作ができる部分だけでしたが… この後は「ソートできる」ようにする方法をまとめていきたいと思います（…いつかやる！）

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！

• Facebook ページ
• twitter