[ VB.NET / C# ] DataGridView のセルに画像の表示と削除 ( DataGridViewCell.Value )

Tweet

Pocket

ここでは、DataGridView コントロールのセルに画像を設定して表示したり、表示している画像を削除して表示しないようにするサンプルコードを掲載しています。

DataGridView のセルに画像の設定と削除

サンプル内の DataGridView は、画像を表示するので ColumnType には、DataGridViewImageColumn を設定しています。また、行の追加を有効にするチェックボックスは外した状態です。

サンプルを実行すると以下のようにセルに画像が表示されるようになります。

セルに画像を表示するサンプルの実行結果

VB.NET

    ' フォームロード
    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        ' 新規追加する行のデフォルト高さを設定
        DataGridView1.RowTemplate.Height = 42
        ' 画像未設定時に×画像が表示されないようにする
        DataGridView1.Columns(0).DefaultCellStyle.NullValue = Nothing

        ' 行を2行追加
        DataGridView1.Rows.Add()
        DataGridView1.Rows.Add()

        ' 確認しやすいように行選択を解除しておく
        DataGridView1.CurrentCell = Nothing

    End Sub

    ' 設定ボタンクリック
    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

        ' リソースの画像を DataGridViewCell.Value プロパティに設定
        DataGridView1.Rows(0).Cells(0).Value = My.Resources.face
        DataGridView1.Rows(1).Cells(0).Value = My.Resources.face2

    End Sub

    ' 削除ボタンクリック
    Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click

        ' DataGridViewCell.Value プロパティに Nothing を設定
        DataGridView1.Rows(0).Cells(0).Value = Nothing
        DataGridView1.Rows(1).Cells(0).Value = Nothing

    End Sub

C#

    // フォームロード
    private void Form1_Load(object sender, EventArgs e)
    {
        // 新規追加する行のデフォルト高さを設定
        dataGridView1.RowTemplate.Height = 42;
        // 画像未設定時に×画像が表示されないようにする
        dataGridView1.Columns[0].DefaultCellStyle.NullValue = null;

        // 行を2行追加
        dataGridView1.Rows.Add();
        dataGridView1.Rows.Add();

        // 確認しやすいように行選択を解除しておく
        dataGridView1.CurrentCell = null;
    }

    // 設定ボタンクリック
    private void button1_Click(object sender, EventArgs e)
    {
        // リソースの画像を DataGridViewCell.Value プロパティに設定
        dataGridView1.Rows[0].Cells[0].Value = Properties.Resources.face;
        dataGridView1.Rows[1].Cells[0].Value = Properties.Resources.face2;
    }

    // 削除ボタンクリック
    private void button2_Click(object sender, EventArgs e)
    {
        // DataGridViewCell.Value プロパティに null に設定
        dataGridView1.Rows[0].Cells[0].Value = null;
        dataGridView1.Rows[1].Cells[0].Value = null;
    }

DataGridView の赤の×画像（デフォルト）を非表示

フォームロード時に DataGridView の 画像を表示する列に対して、DefaultCellStyle.NullValue に null ( VB.NET は Nothing ) を設定していますが、この設定を行わないと、サンプル起動時や画像削除時に、以下のような 赤の × 画像がデフォルト表示されます。

必ず何かしらの画像を表示するような場合には、不具合が視覚的にわかりやすくなると思います（画像がなくても十分わかりやすいですが。。。）。

デフォルトの×画像が表示される

Tweet

Pocket