DataGridViewの列ヘッダの描画が狂う

Question

前提・実現したいこと

お願いします。どなたかご教授ください。

ＶＳ２０１７Ｃ＃ windowsフォームアプリケーションにてDataGridViewの列ヘッダーを２行にするコードを書いたのですが、
左右のスクロールをするとDataGridViewの描画がおかしくなり困っています。

左右のスクロールをしても正常に表示されるようにしたいです。
お願いいたします。

追記08/02　19：30
参考にしたのは以下のサイトです。
multiline-merged-datagridview-header

通常の列ヘッダ描画とおなじく、スクロールバーを動かしても文字列の移動などが正常に表示されるように
したいです。過去の履歴も検索しましたが、未解決となっており途方に暮れております。。

発生している問題・エラーメッセージ

左右にスクロールすると、列ヘッダーの再描画処理で列幅が狂ってしまう。

該当のソースコード

Ｃ＃
using System;
using System.Drawing;
using System.Reflection;
using System.Windows.Forms;

namespace WindowsFormsApp3
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            this.AutoScroll = true;
            this.dataGridView1.Width = 250;

            //データグリッドビューのダブルバッファリング処理
            typeof(DataGridView).
            GetProperty("DoubleBuffered",
            BindingFlags.Instance | BindingFlags.NonPublic).
            SetValue(dataGridView1, true, null);

            for (int i = 0; i <= 4; i++)
            {
                this.dataGridView1.Columns.Add(i.ToString(), i.ToString());

            }

            for (int j = 0; j < this.dataGridView1.ColumnCount; j++)
            {
                this.dataGridView1.Columns[j].Width = 200;
            }

            this.dataGridView1.ColumnHeadersHeightSizeMode = DataGridViewColumnHeadersHeightSizeMode.DisableResizing;
            this.dataGridView1.ColumnHeadersHeight = this.dataGridView1.ColumnHeadersHeight * 2;
            this.dataGridView1.ColumnHeadersDefaultCellStyle.Alignment = DataGridViewContentAlignment.BottomCenter;
            this.dataGridView1.Scroll += new ScrollEventHandler(this.dgv_Scroll);
            this.dataGridView1.Paint += new PaintEventHandler(dataGridView1_Paint);

        }


        //この処理をはずすと描画がおかしくなる。処理をすると列ヘッダーの文字もスクロールしてしまう
        private void dgv_Scroll(object sender, ScrollEventArgs e)
        {
            ((DataGridView)sender).Invalidate();
        }

        void dataGridView1_Paint(object sender, PaintEventArgs e)
        {

            string[] col_nmae = { "A1", "A2" };

            for (int j = 0; j < 3;)
            {
                Rectangle r1 = this.dataGridView1.GetCellDisplayRectangle(j, -1, true); //get the column header cell
                r1.X += 1;
                r1.Y += 1;
                r1.Width = r1.Width * 2;
                r1.Height = r1.Height / 2;
                e.Graphics.FillRectangle(new SolidBrush(this.dataGridView1.ColumnHeadersDefaultCellStyle.BackColor), r1);
                StringFormat format = new StringFormat();
                format.Alignment = StringAlignment.Center;
                format.LineAlignment = StringAlignment.Center;
                e.Graphics.DrawString(col_nmae[j / 2],
                    this.dataGridView1.ColumnHeadersDefaultCellStyle.Font,
                    new SolidBrush(this.dataGridView1.ColumnHeadersDefaultCellStyle.ForeColor),
                    r1,
                    format);
                e.Graphics.DrawLine(new Pen(Color.DarkGray), new Point(r1.X, r1.Bottom), new Point(r1.X + r1.Width, r1.Bottom));
                j += 2;
            }

        }

    }

}

Comments

[退会済みユーザー]

ちゃんと DataGridView と書くことをお勧めします。

[t.sei]

ご指摘、誠にありがとうございます。修正いたしました。

Answer 1

こんにちは。

問題の個所はここです。

                Rectangle r1 = this.dataGridView1.GetCellDisplayRectangle(j, -1, true); //get the column header cell
                r1.X += 1;
                r1.Y += 1;
                r1.Width = r1.Width * 2;
                r1.Height = r1.Height / 2;

GetCellDisplayRectangleメソッドは表示されている分の領域を返します。
スクロールをCellの0番目と2番目が全く表示されない場所まで行った場合、変数r1のWidthならびにHeightはゼロになります。
(まったく見えないところまでいかずとも、0番目のCellのWidthはスクロールすればするほど小さくなり、r1.Widthにセットされる値は小さくなります。以降2番目も同様です。)

泥臭いコーディングで恐縮ではございますが、以下のコードで、ヘッダーが小さくなる問題をクリアできます。
＊ 修正部分はdataGridView1_Paintメソッドのみのため抜粋します。

        private void dataGridView1_Paint(object sender, PaintEventArgs e)
        {
            string[] colNames = { "A1", "A2" };
            var secondHeaderCells = 2;
            var counter = 0;
            for (var j = 0; j < 3;)
            {
                var headerCellWidth = 0;
                for (var i = 0; i < secondHeaderCells; ++i)
                {
                    var rec = this.dataGridView1.GetCellDisplayRectangle(counter * secondHeaderCells + i, -1, true); //get the column header cell
                    headerCellWidth += rec.Width;
                }

                var offset = 0;
                var r1 = new Rectangle();
                do
                {
                    if(offset >= secondHeaderCells)
                        goto LoopEnd;

                    r1 = this.dataGridView1.GetCellDisplayRectangle(j + offset, -1, true); //get the column header cell
                    r1.X += 1;
                    r1.Y += 1;
                    r1.Width = headerCellWidth;
                    r1.Height = r1.Height / 2;
                    offset++;
                    // 見えていないcellは高さが0になるのでそれを判定材料とする
                } while (r1.Height == 0);


                e.Graphics.FillRectangle(new SolidBrush(this.dataGridView1.ColumnHeadersDefaultCellStyle.BackColor), r1);
                var format = new StringFormat
                {
                    Alignment = StringAlignment.Center,
                    LineAlignment = StringAlignment.Center
                };
                e.Graphics.DrawString(colNames[j / 2],
                    this.dataGridView1.ColumnHeadersDefaultCellStyle.Font,
                    new SolidBrush(this.dataGridView1.ColumnHeadersDefaultCellStyle.ForeColor),
                    r1,
                    format);
                e.Graphics.DrawLine(new Pen(Color.DarkGray), new Point(r1.X, r1.Bottom), new Point(r1.X + r1.Width, r1.Bottom));

                LoopEnd:
                j += secondHeaderCells;
                counter++;
            }
        }

これを用いた場合、ヘッダ文字が標準のヘッダと異なる動きをしますが、これ以上の修正は私の空き時間では困難なため、申し訳ありませんがご了承ください。

また今回のご質問ですが、参考にしたのは以下のサイトですか?
Multi-line (merged) datagridview header
参考にした情報を記載すると、また別の回答が得られるかもしれません。

最後に、タイトルのDGVはDataGridViewに変更したほうが、回答を得やすいと思います。

参考になれば幸いでございます。

Comments

[t.sei]

g_uo　様
まずは、御回答頂きまして誠にありがとうございます。

なるほど、、、ヘッダーサイズが小さくなるからそれに併せて縮んでいたのですね！
まったく思いつきませんでした。。。。。

修正ソースまでご用意くださってありがとうございます。

はい、参考にしたのはまさしくそのサイトです。
今回初めての利用で、タイトル文字数が決められていると思ったので、
泣く泣くＤＧＶと略したのですが、見てみたら１０文字以上でも
大丈夫なのですね。。。。
あわせて、ご指摘ありがとうございます。

ヘッダー文字がスライドしてしまうのは、やはり目的の動きではないので、
もう少し、ここに質問記載させて頂くとともに、質問内容修正、ソースコードの
修正をがんばろうと思います。

ありがとうございました。

[g_uo]

コメントありがとうございます。目的のものを提示できず申し訳ありません。
Header文字列がスライドする問題のキモは、Scrollした量とHeader文字列の描画位置(DrawStringしてる位置)の同期です。
実現する場合、さまざまな計算を付加してあげる必要があるように思います。

質問文の編集および追記は、それによってteratailのアクティブページに表示されるため、人の目につきやすく回答も得られやすくなるため、積極的に行うことをオススメします。
ただ、元の質問文を必要以上に変更することは避け、追記を行うべきという点はご注意ください。
既存の回答と質問の整合性がとれなくなるためです。

t.sei様の問題が解決することをお祈りいたします。

[t.sei]

g_uo　様
とんでもございません、貴重なお時間で御回答いただけただけでも
大変ありがたく思っております。

なるほど、、、計算ロジックですね、、
考えてみます。

teratailの活用方法、注意点までご教授くださいましてありがとうございました。
それでは、失礼いたします。

Answer 2

そもそもの仕様を変更し文字列を無くしました。

コメント、御回答いただきましてありがとうございました。