DataGridView:セルへの画像表示と null 時の×マークを消す方法(サンプルあり)

📋 目次(クリックで展開)

DataGridView で商品一覧や社員名簿などを表示する際、テキストデータだけでなく、セルのなかに「商品のサムネイル画像」や「顔写真」などの画像データを一緒に表示したいケースがあります。

DataGridView には標準で画像表示専用の DataGridViewImageColumn が用意されており、Image オブジェクトなどをデータソースにバインドするだけで簡単にグリッド内への画像描画が可能です。

今回は、DataGridView に画像を表示する基本手順と、「画像がないときに表示される×マークの消し方」や「画像の引き伸ばし(サイズ調整)対策」について解説します。

画像列(DataGridViewImageColumn)の基本概念

DataGridView で画像を表示する場合、表示したい画像データ(Image クラスや Bitmap クラス、あるいはデータベースから取得した byte[] バイト配列)をデータソースのプロパティに持たせておきます。

データバインドを行うと、DataGridView は対象のプロパティが画像型であることを自動的に判別し、DataGridViewImageColumn として画面に描画してくれます。

コードで明示的に列の見た目を細かく制御する場合、手動で列オブジェクトを生成して追加していきます。

実装コード

以下は、BindingList をデータソースとし、各行に割り当てられた Image オブジェクトを DataGridView に表示する完全なサンプルコードです。

テスト用に、プロジェクトに2つの画像ファイル(apple.png などの商品画像)を用意するか、手元の適当な画像ファイルのパスに書き換えてお試しください。

Form1.cs(画面側の処理)

Form1.cs
using System.ComponentModel;
namespace DataGridView_Image_Column
{
public partial class Form1 : Form
{
private BindingList<ProductModel> _products = new();
public Form1()
{
InitializeComponent();
InitializeDataGridView();
}
private void InitializeDataGridView()
{
// テスト用の画像ファイルを読み込み(※パスは環境に合わせて変更してください)
// 画像がない(Null)パターンの検証用データも登録します
Image? imgApple = File.Exists("apple.png") ? Image.FromFile("apple.png") : null;
Image? imgOrange = File.Exists("orange.png") ? Image.FromFile("orange.png") : null;
_products.Add(new ProductModel("P001", "りんご", imgApple));
_products.Add(new ProductModel("P002", "みかん", imgOrange));
_products.Add(new ProductModel("P003", "バナナ(画像なし)", null)); // ⭕ 画像Nullのデータ
// 1. 手動で画像列を作成
var imageCol = new DataGridViewImageColumn();
imageCol.DataPropertyName = nameof(ProductModel.ProductImage); // モデルのImageプロパティと連動
imageCol.HeaderText = "商品画像";
imageCol.Name = "ProductImage";
// 2. 【対策①】画像がNullのときに表示される不格好な「×マーク」を消す設定
// デフォルトの「エラー画像」の代わりに空白の透過ビットマップを指定します
var blankImage = new Bitmap(1, 1);
imageCol.DefaultCellStyle.NullValue = blankImage;
// 3. 【対策②】画像のサイズ調整(アスペクト比を維持してセルの大きさに合わせる)
imageCol.ImageLayout = DataGridViewImageCellLayout.Zoom;
// 画像列をグリッドに追加
dataGridView1.Columns.Add(imageCol);
// 4. その他の列を自動生成してデータソースを設定
dataGridView1.DataSource = _products;
// 画像が見やすくなるように、行の高さと列幅を少し広げる
dataGridView1.RowTemplate.Height = 60;
dataGridView1.AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill;
}
}
}

ProductModel.cs(データモデルクラス)

ProductModel.cs
namespace DataGridView_Image_Column
{
public class ProductModel
{
public string Code { get; set; }
public string Name { get; set; }
// 画像オブジェクトを保持するプロパティ(Nullを許容します)
public Image? ProductImage { get; set; }
public ProductModel(string code, string name, Image? productImage)
{
Code = code;
Name = name;
ProductImage = productImage;
}
}
}

サンプルアプリケーション

DataGridView_Image_Column.zip
※ サンプルアプリケーションは、.NET 10 をターゲットに作成しています。

実行結果

りんごやみかんの画像は表示されています。バナナの画像は用意していないので画像も表示されませんが、X で画像を埋め込めなかった表示にはなっていません。

綺麗なデザインを保つための2つの設定

DataGridView の画像列の見栄えをよくする設定(注意点)を二つ紹介します。

注意点①:画像がないセルの「×マーク(エラー画像)」を消す

データが「画像なし(Null)」の場合、DataGridView は標準の親切心(仕様)で、「画像が読み込めませんでした」という意味の、赤や黒の不格好な『×マークのアイコン』を勝手に表示します。

ユーザーからすると「システムのエラーが起きたのではないか」と誤解を招くため、実務では消す方向で検討することになると思います。×マークを消して、何もない空欄にするには、サンプルコード内にある DefaultCellStyle.NullValue を利用します。

// 空白の小さなビットマップを作って NullValue にセットする
var blankImage = new Bitmap(1, 1);
imageCol.DefaultCellStyle.NullValue = blankImage;

このように、データが Null だった場合に「1×1ピクセルの透明(または空白)な画像を代わりに描画する」という設定を挟み込むことで、×マークを消し、空白セルに変えることができます。

注意点②:デフォルトだと画像が引き伸ばされて歪む

何も設定しない状態だと、画像のレイアウト(ImageLayout)は Normal になっています。これは「画像本来のサイズで左上にそのまま配置する」というモードです。セルのサイズより画像が大きいと見切れにつながります。

一方で Stretch モードにすると、画像の縦横比(アスペクト比)を無視してセルの四角形いっぱいに画像を引き伸ばしてしまうため、写真が横に伸びてしまいます。

実務では、Zoom モードの利用が現実解になると思われます。

// 縦横の比率を維持したまま、セルの大きさに合わせて綺麗に伸縮させる
imageCol.ImageLayout = DataGridViewImageCellLayout.Zoom;

Zoom を選んでおくことで、セルの高さや幅がユーザーによって変更されても、画像の比率を保ったまま自動調整して中央に描画してくれます。

まとめ

今回は、DataGridView のセルに画像を表示する方法と、実務の画面設計において必須となる表示周りの注意点について解説しました。
標準機能のままバインドすると×マークや画像の歪みが生じてしまいますが、列の定義時に以下の2つのプロパティを設定することで対応できます。

  1. NullValue に空白のビットマップを指定して、不格好なエラー画像を隠す。
  2. ImageLayoutZoom に設定して、アスペクト比を維持したまま綺麗に表示させる。

画像列の実装の一助になりましたら幸いです。


💬 コメント