• DataGridViewの列に画像を表示する
  • 値が設定されていないセルに四角に赤いXの画像が表示されないようにする
    • 新しい行のセルに赤いXが表示されないようにする
  • セルの値によって表示する画像を決める

• この記事への評価、コメント

DataGridViewの列に画像を表示する

DataGridViewの列に画像（イメージ、アイコン）を表示するには、DataGridViewImageColumnを使用します。バイト配列、Image、Iconオブジェクトのデータをバインドすれば自動的にDataGridViewImageColumnが使用されます。

非バインド列としてDataGridViewImageColumnを追加し、画像を表示する例を示します。ここではImageオブジェクトを表示しています。

'DataGridViewImageColumnの作成
Dim column As New DataGridViewImageColumn()
'列の名前を設定
column.Name = "Image"
'Icon型ではなく、Image型のデータを表示する
'デフォルトでFalseなので、変更する必要はない
column.ValuesAreIcons = False
'値の設定されていないセルに表示するイメージを設定する
column.Image = New Bitmap("C:\null.gif")
'イメージを縦横の比率を維持して拡大、縮小表示する
column.ImageLayout = DataGridViewImageCellLayout.Zoom
'イメージの説明
'セルをクリップボードにコピーした時に使用される
column.Description = "イメージ"
'DataGridViewに追加する
DataGridView1.Columns.Add(column)

'"Image"列の一番上のセルのイメージを変更する
DataGridView1("Image", 0).Value = New Bitmap("C:\top.gif") '

//DataGridViewImageColumnの作成
DataGridViewImageColumn column = new DataGridViewImageColumn();
//列の名前を設定
column.Name = "Image";
//Icon型ではなく、Image型のデータを表示する
//デフォルトでFalseなので、変更する必要はない
column.ValuesAreIcons = false;
//値の設定されていないセルに表示するイメージを設定する
column.Image = new Bitmap("C:\\null.gif");
//イメージを縦横の比率を維持して拡大、縮小表示する
column.ImageLayout = DataGridViewImageCellLayout.Zoom;
//イメージの説明
//セルをクリップボードにコピーした時に使用される
column.Description = "イメージ";
//DataGridViewに追加する
DataGridView1.Columns.Add(column);

//"Image"列の一番上のセルのイメージを変更する
DataGridView1["Image", 0].Value = new Bitmap("C:\\top.gif");

DataGridViewImageColumnのValuesAreIconsにより、Imageオブジェクトを表示するか、Iconオブジェクトを表示するかを指定します。Iconを表示する場合は、これをTrueにします。

値の設定されていないセルに表示する画像を設定するには、Imageプロパティを使用します。Iconを表示している場合（ValuesAreIconsがTrueの場合）は、Iconプロパティを使用します。これらのプロパティに何も設定していない時は、値の設定されていないセルに、四角に赤いXの画像が表示されます。

ImageLayoutプロパティには、画像をどのように表示するかを指定します。NotSetやNormal（デフォルト）を指定すると、画像の大きさはそのままに、セルの中央に表示します。Stretchでは、セルの大きさいっぱいに画像を拡大、縮小して表示します。Zoomでは、画像の幅と高さの比率を維持して、セルの大きさに合わせて画像を拡大、縮小して表示します。

値が設定されていないセルに四角に赤いXの画像が表示されないようにする

セルに何も値が設定されていない時（セルの値がnullかDBNull.Valueの時）に表示される四角に赤いXの画像は、上記の補足で説明したように、DefaultCellStyleのNullValueプロパティに設定されています。この画像が表示されないようにするには、行を追加する前に、NullValueプロパティをnull（VB.NETではNothing）にします。

'DataGridViewImageColumnの作成
Dim column As New DataGridViewImageColumn()
'セルスタイルのNullValueをnullにする
column.DefaultCellStyle.NullValue = Nothing
'DataGridViewに追加する
DataGridView1.Columns.Add(column)

//DataGridViewImageColumnの作成
DataGridViewImageColumn column = new DataGridViewImageColumn();
//セルスタイルのNullValueをnullにする
column.DefaultCellStyle.NullValue = null;
//DataGridViewに追加する
DataGridView1.Columns.Add(column);

新しい行のセルに赤いXが表示されないようにする

上記のようにNullValueをnullにしても、DataGridView.AllowUserToAddRowsプロパティがTrueの時は、新しい行に赤いXが表示されてしまいます。これを表示しないようにするには、新しい行のセルの値をnullにします。

MSDNの「DataGridViewImageColumnクラス」には、その方法として、RowsAddedイベントで該当するセルの値をnullにする方法と、DataGridViewImageCell.DefaultNewRowValueプロパティをオーバーライドしてnullを返す方法が紹介されています。

以下に、DefaultNewRowValueプロパティをオーバーライドする方法を紹介します。まず、次のようなクラスを作成します。

''' <summary>
''' DefaultNewRowValueプロパティがnullを返すDataGridViewImageCell
''' </summary>
Public Class DataGridViewImageCellEx
    Inherits DataGridViewImageCell
    Public Overrides ReadOnly Property DefaultNewRowValue() As Object
        Get
            Return Nothing
        End Get
    End Property
End Class

/// <summary>
/// DefaultNewRowValueプロパティがnullを返すDataGridViewImageCell
/// </summary>
public class DataGridViewImageCellEx : DataGridViewImageCell
{
    public override object DefaultNewRowValue
    {
        get
        {
            return null;
        }
    }
}

そして、このクラスのインスタンスをDataGridViewImageColumn.CellTemplateプロパティに設定します。これで、新しい行にも赤いXが表示されなくなります。

'DataGridViewImageColumnの作成
Dim column As New DataGridViewImageColumn()
'セルスタイルのNullValueをnullにする
column.DefaultCellStyle.NullValue = Nothing
'CellTemplateを変更する
column.CellTemplate = New DataGridViewImageCellEx()
'DataGridViewに追加する
DataGridView1.Columns.Add(column)

//DataGridViewImageColumnの作成
DataGridViewImageColumn column = new DataGridViewImageColumn();
//セルスタイルのNullValueをnullにする
column.DefaultCellStyle.NullValue = null;
//CellTemplateを変更する
column.CellTemplate = new DataGridViewImageCellEx();
//DataGridViewに追加する
DataGridView1.Columns.Add(column);

セルの値によって表示する画像を決める

例えば、別の列のセルの値によりDataGridViewImageColumnのセルに表示する画像を決めたいという場合は、CellFormattingイベントを使用するとよいでしょう。CellFormattingイベントの使い方は、こちらで説明していますので、ここでは簡単な例のみを示します。

以下の例では、"Image"という名前のDataGridViewImageColumn列と、"Column1"という名前の整数型の列がDataGridViewにあるとき、"Column1"のセルの値によって"Image"に表示する画像を変更しています。

Private image1 As New Bitmap("C:\1.gif")
Private image2 As New Bitmap("C:\2.gif")

'CellFormattingイベントハンドラ
Private Sub DataGridView1_CellFormatting(ByVal sender As Object, _
        ByVal e As DataGridViewCellFormattingEventArgs) _
        Handles DataGridView1.CellFormatting
    Dim dgv As DataGridView = CType(sender, DataGridView)
    '"Image"列のセルか確認する
    If dgv.Columns(e.ColumnIndex).Name = "Image" AndAlso _
        e.RowIndex >= 0 AndAlso _
        TypeOf (dgv("Column1", e.RowIndex).Value) Is Integer Then
        '"Column1"列のセルの値によって表示する画像を決定する
        Select Case CInt(dgv("Column1", e.RowIndex).Value)
            Case 1
                e.Value = Me.image1
                e.FormattingApplied = True
            Case 2
                e.Value = Me.image2
                e.FormattingApplied = True
        End Select
    End If
End Sub

private Bitmap image1 = new Bitmap("C:\\1.gif");
private Bitmap image2 = new Bitmap("C:\\2.gif");

//CellFormattingイベントハンドラ
private void DataGridView1_CellFormatting(object sender,
    DataGridViewCellFormattingEventArgs e)
{
    DataGridView dgv = (DataGridView)sender;
    //"Image"列のセルか確認する
    if (dgv.Columns[e.ColumnIndex].Name == "Image" &&
        e.RowIndex >= 0 &&
        dgv["Column1", e.RowIndex].Value is int)
    {
        //"Column1"列のセルの値によって表示する画像を決定する
        switch ((int)dgv["Column1", e.RowIndex].Value)
        {
            case 1:
                e.Value = this.image1;
                e.FormattingApplied = true;
                break;
            case 2:
                e.Value = this.image2;
                e.FormattingApplied = true;
                break;
        }
    }
}

• 参考：
• 方法 : Windows フォーム DataGridView コントロールのイメージ列を操作する

• 履歴：
• 2016/6/7 「新しい行のセルに赤いXが表示されないようにする」を追加。「値が設定されていないセルに四角に赤いXの画像が表示されないようにする」のコードを変更。