.NET DataGridViewに画像を表示するとセルが黒くなる。

Question

DataGridViewに画像データを表示して、DataGridViewをサイズ変更したり
スクロールしたりすると、全体セルの半分以上がランダム範囲でブラックアウトしたような
描画になります。

次のようなDataGridViewを作成しています。

１．まずデータソースです。
DataTable.Columns.Add("image", GetType(System.Drawing.Image));
DataTable.Columns.Add("id", GetType(int));
DataTable.Columns.Add("name", GetType(string));

２．DataGridViewです。
※イメージ列作成
DataGridViewImageColumn _columnImage = new DataGridViewImageColumn();
_columnImage.HeaderText = "絵";
_columnImage.Name = "image";
_columnImage.DataPropertyName = "image";
_columnImage.ImageLayout = DataGridViewImageCellLayout.Zoom;
DataGridView.Columns.Add(_columnImage );
※ID列作成
DataGridViewTextBoxColumn _column = new DataGridViewTextBoxColumn();
_column.HeaderText = "ID";
_column.Name = "id";
_column.DataPropertyName = "id";
DataGridView.Columns.Add(_column);

... IDと同じく名前も追加

３．データ設定します。
DataGridView.DataSource = DataTable

こんな感じで、1列画像の2列テキストの
3列100行程度のデータを登録したDataGridViewを表示しますと
初回は正しく表示されるのですが、その後サイズやスクロールを動かすと
全体セルの半分がくらいが、法則性もなくブラックアウトしたようになってしまいます。

対策として試してみましたことは
■DataGridViewにダブルバッファを設定
■DataGridView_CellPainting イベントで DataGridView.Invalidate(); を実行
と行いましたが、何も変化ありませんでした。

何卒、ご教授よろしくお願いいたします。

Comments

[YAmaGNZ]

提示されているコードで試したのですが、仰る現象が再現できません。
画像の大きさはどのくらいでしょうか。また、他のイベントの記述など提示コード以外の部分はありますでしょうか。
こちらの環境：Win10、メモリ8G、Intel(R)HDGraphics630、.NET Framework4.7.2

[Com]

ありがとうございます！
私の環境はWin10 Home Visual Studio Express2010 .NET Framework4 でございます。

ご意見いただきました内容を参考に、確かに上記は一部を切り出したものでしたので
切り分けて上記の内容でミニマムのWindowsFormを作成して動かしてみましたが
結果に変化はありませんでした。
試しに別のPCでも確認してみたのですが、結果は同じでした。

画像は148ファイルありまして、8割が2KB～5KB　で残り2割が10KB～30KBのサイズになり
種類はJPG、PNG、GIFの混在になります。

DataTableを作成するまでの流れを念のためにお伝えしますと
チャットワークというサービスがありまして、これにAPIを投げて自分のチャット相手一覧を
JSON形式で取得し、これをJSON.NETで読み取ったデータでDataTableを作成しています。
読取ったデータにはチャット相手の画像ファイルパスがありますので、WebClientでいったん
ローカルフォルダに取得して、これをDataTableに入れ、画像、ID、名前に整形して
DataGridViewに代入しております。

Answer 1

下記コードを
・Windows7、VisualStudio2008、.NET Framework3.5
・Windows10、VisualStudio2017、.NET Framework4
の２つの環境で試してみました。
画像ファイルは約20KByte~約800KByteの10種類のPNG、JPEGファイルをコピーし、ファイル数は100用意しました。

using System;
using System.Data;
using System.Drawing;
using System.Windows.Forms;
using System.IO;

namespace WindowsFormsApplication1
{
    public partial class Form1 : Form
    {

        public Form1()
        {
            InitializeComponent();
        }

        DataTable dataTable;
        private void Form1_Load(object sender, EventArgs e)
        {
            DataGridView dataGridView1 = new DataGridView();
            dataGridView1.Dock = DockStyle.Fill;
            this.Controls.Add(dataGridView1);

            dataTable = new DataTable();
            dataTable.Columns.Add("image", typeof(System.Drawing.Image));
            dataTable.Columns.Add("id", typeof(int));
            dataTable.Columns.Add("name", typeof(string));

            DataGridViewImageColumn _columnImage = new DataGridViewImageColumn();
            _columnImage.HeaderText = "絵";
            _columnImage.Name = "image";
            _columnImage.DataPropertyName = "image";
            _columnImage.ImageLayout = DataGridViewImageCellLayout.Zoom;
            dataGridView1.Columns.Add(_columnImage);

            DataGridViewTextBoxColumn _column = new DataGridViewTextBoxColumn();
            _column.HeaderText = "ID";
            _column.Name = "id";
            _column.DataPropertyName = "id";
            dataGridView1.Columns.Add(_column);


            DataGridViewTextBoxColumn _column2 = new DataGridViewTextBoxColumn();
            _column2.HeaderText = "NAME";
            _column2.Name = "name";
            _column2.DataPropertyName = "name";
            dataGridView1.Columns.Add(_column2);

            dataGridView1.DataSource = dataTable;
            dataGridView1.Columns[0].Width = 300;
            dataGridView1.RowTemplate.Height = 100;

            string[] files = Directory.GetFiles(@"C:\work\testpic\");

            for (int i = 0; i < 99; i++)
            {
                dataTable.Rows.Add(Image.FromFile(files[i]), i, string.Format("NAME-{0}",i));
            }

        }
    }
}

スクロールバーでスクロールしたり、マウスホイールでスクロールしたりしてみましたが、セルが黒くなるような現象は出ませんでした。

Comments

[Com]

ありがとうございます！
ここまで見ていただいて感激しております。
色々切り分けて見ている中で１つわかったのですが、PNGだけ抽出して表示すると
問題なく表示されまして、JPGだけ抽出して表示するとブラックアウトするセルが出てきました。

Windows上では問題なく表示されるJPGファイルでしたが、DataGridViewと相性の悪い
JPGってあったりするのでしょうか。。。？

[YAmaGNZ]

もし、画像ファイルのフォーマットによる現象なのだとすれば、画像を取得する際にフォーマットを変換してはどうでしょうか？

[Com]

ありがとうございます！解決しました。
おっしゃる通り、全てのファイルをこんな感じでフォーマット変換して利用しましたら、イケました！
System.Drawing.Bitmap _bmp = new System.Drawing.Bitmap(_filePath_JPG);
_bmp.Save(_filePath_PNG, System.Drawing.Imaging.ImageFormat.Png);

余談ですが、BMPでフォーマット統一してみたら、全滅しました。。。
私のDataGridViewはPNGのみってこととします。。。(泣)

Answer 2

DataGridView の ColumnWidthChanged や Scroll イベントで DataGridView を Refresh() してみてはどうでしょう？

Comments

[Com]

ご教授ありがとうございます。
しかしながら、改善できませんでした。。。
ブラックアウト部分のセルをクリックすると、そのセルだけ表示がもとに戻るんですが
何か一括で正しく表示しなおす方法はないものでしょうか。。。

[Com]

あ、画像部分はクリックしても、表示されたりされなかったりします。

[hihijiji]

データが重すぎて不具合が出ていると仮定すると、
仮想モードにすると改善するかもしれません。

チュートリアル: Windows フォームの DataGridView コントロールで仮想モードの実装
https://docs.microsoft.com/ja-jp/dotnet/framework/winforms/controls/implementing-virtual-mode-wf-datagridview-control

[Com]

ありがとうございます！
いただいたご意見をもとに、データ量を5件に減らしてみました。

色々いじってみたのですが、データの重さに関係なく画像を表示しようとすると
セルが4行目からバグってくる法則性を確認できました。

データ内容に問題があるのかと思いまして、表示内容を変えてみたのですが
この法則に変化はありませんでした。

私の画像の扱い方のが悪いのかもしれないですね。。。

[hihijiji]

Forms(GDI+)ではあまり例は多くないですが、グラフィックドライバのバグの可能性もあります。

[Com]

ありがとうございます。
グラフィックドライバというのは、私のPCのグラフィックカードなんかの
ドライバのバグということでよいのでしょうか？

[hihijiji]

特定構成のPCのみで発生することが確認できれば、その可能性が高くなります。

[Com]

ありがとうございます。
他のPCで確認してみましたが、同じ現象でありましたー。

[hihijiji]

画像をサムネイル化して、小さく軽くすれば防げるかもしれません。
https://docs.microsoft.com/ja-jp/dotnet/framework/winforms/advanced/how-to-create-thumbnail-images

[Com]

そういう方法もあるのですね！
ありがとうございます。
この方法でもいけるのかもしれません。