[ C# ] DataGridView ボタンのテキストと背景色を変更する ( DataGridView.CellContentClick )

Tweet

Pocket

ここでは、データグリッドビューコントロールの列をテキストではなくボタンを表示して、ボタンがクリックされるたびにボタンのテキストと背景色を変更するサンプルコードを掲載しています。

サンプルの出力イメージ

最終的に出力されるデータグリッドビューのイメージは次の通りです。見た目がボタンらしくないのには理由があります。テレビよろしく引っ張ってみます。

データグリッドビューの設定例

データグリッドビューにボタン列を配置するには下図のように、ColumnType に DataGridViewButtonColumn を設定します。また、表示設定の FlatStyle に Popup を設定しています。ボタンらしくみえないのはこのためです。

後述のサンプルでセルの背景色を設定してるのですが、デフォルトの Standard または System を設定するとボタンっぽくなるのですが、背景色が透過されずボタンの周囲の少しの部分のみ色が変わります。

Popup または Flat の場合は、背景色がボタンを透過してボタン全体の色が変わったようにみえます。お好みに合わせて使用したらよいとは思います。

引っ張った甲斐がないですね。。。。

データグリッドビュー列のボタンに変更

サンプルコード

サンプルコードになります。データグリッドビュー内のボタンがクリックされると DataGridView.CellContentClick イベントが発生します。詳細はサンプル内のコメントを参照ください。

private void Form1_Load(object sender, EventArgs e)
{
    // データグリッドビューに列を追加

    // 1行目
    dataGridView1.Rows.Add(); // 行追加
    int i = dataGridView1.Rows.Count - 1;  // 追加した行のインデックを取得
    dataGridView1.Rows[i].Cells[0].Value = "テキスト1";
    dataGridView1.Rows[i].Cells[1].Value = "OFF";

    // 2行目
    dataGridView1.Rows.Add(); // 行追加
    i = dataGridView1.Rows.Count - 1; // 追加した行のインデックを取得
    dataGridView1.Rows[i].Cells[0].Value = "テキスト2";
    dataGridView1.Rows[i].Cells[1].Value = "OFF";
}

private void dataGridView1_CellClick(object sender, DataGridViewCellEventArgs e)
{
    // セルがどの場所をクリックされても発生する
    Console.WriteLine("CellClick");
}

private void dataGridView1_CellContentClick(object sender, DataGridViewCellEventArgs e)
{
    // セル内のテキストやボタンがクリックされた場合に発生する。
    // テキストボックスだと確認しやすいが、テキストが記述されていない個所が
    // クリックされた場合は、このイベントは発生しない。
    Console.WriteLine("CellContentClick");

    Console.WriteLine(e.ColumnIndex.ToString()); // クリックされた列インデックス
    Console.WriteLine(e.RowIndex.ToString()); // クリックされた行インデックス

    // sender はデータグリッドビュー本体
    DataGridView dgv = (DataGridView)sender;

    // クリックされたセルを取得
    DataGridViewCell cell = dgv.CurrentCell;

    // ボタンの列（列インデックス１）だったら、そのボタンのテキストを変更する
    // ON と OFF を交互に表示を切り替える
    if (e.ColumnIndex == 1) {
        if (cell.Value.ToString() == "ON") {
            cell.Value = "OFF";
            cell.Style.BackColor = Color.Gray; // OFFの場合はセルの背景色をグレイに
        } else {
            cell.Value = "ON";
            cell.Style.BackColor = Color.Yellow; // ONの場合はセルの背景色を黄色に
        }
    }
}

Tweet

Pocket