C#: DataGridViewをテーブルとして使う方法

2017/06/15

C#のDataGridViewの使い方を列挙します。

DataGridViewって、デフォルトはデータベーステーブルみたいな形をしていて、一般的なテーブルとして使うには少し手を加える必要があります。

1 まずは基本形
2 表を横いっぱいにする
3 データを追加する
4 データ追加行を消す
5 左側の項目列を消す
6 列幅を個別に設定する
7 行ごとに選択する
8 グリッド線を消す

まずは基本形

基本形はこんな感じです。とりあえず例として４列のテーブルを作りました。

DataGridView table = new DataGridView(){
  Dock = DockStyle.Fill,
  ColumnCount = 4,
  Parent = this,
};
table.Columns[0].HeaderText = "1";
table.Columns[1].HeaderText = "2";
table.Columns[2].HeaderText = "3";
table.Columns[3].HeaderText = "4";

表を横いっぱいにする

表を横いっぱいに広げる場合は以下の部分を追加します。

DataGridView table = new DataGridView(){
  Dock = DockStyle.Fill,
  ColumnCount = 4,
  AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill, //追加 
  Parent = this,
};
table.Columns[0].HeaderText = "1";
table.Columns[1].HeaderText = "2";
table.Columns[2].HeaderText = "3";
table.Columns[3].HeaderText = "4";

[ad#top-1]

データを追加する

データを３行分追加してみました。

DataGridView table = new DataGridView(){
  Dock = DockStyle.Fill,
  ColumnCount = 4,
  AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill,
  Parent = this,
};
table.Columns[0].HeaderText = "1";
table.Columns[1].HeaderText = "2";
table.Columns[2].HeaderText = "3";
table.Columns[3].HeaderText = "4";
table.Rows.Add("data1-1", "data1-2", "data1-3", "data1-4"); //追加 
table.Rows.Add("data2-1", "data2-2", "data2-3", "data2-4"); //追加 
table.Rows.Add("data3-1", "data3-2", "data3-3", "data3-4"); //追加

データ追加行を消す

最後の行にあるデータ追加行（*のところ）を消します。データを追加できるので便利と言えば便利ですが、データベーステーブルっぽい体なので消したい時もあります。

DataGridView table = new DataGridView(){
  Dock = DockStyle.Fill,
  ColumnCount = 4,
  AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill,
  AllowUserToAddRows = false, //追加 
  Parent = this,
};
table.Columns[0].HeaderText = "1";
table.Columns[1].HeaderText = "2";
table.Columns[2].HeaderText = "3";
table.Columns[3].HeaderText = "4";
table.Rows.Add("data1-1", "data1-2", "data1-3", "data1-4");
table.Rows.Add("data2-1", "data2-2", "data2-3", "data2-4");
table.Rows.Add("data3-1", "data3-2", "data3-3", "data3-4");

左側の項目列を消す

一番左端の項目列（RowHeader）を消します。

DataGridView table = new DataGridView(){
  Dock = DockStyle.Fill,
  ColumnCount = 4,
  AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill,
  AllowUserToAddRows = false,
  RowHeadersVisible = false, //追加
  Parent = this,
};
table.Columns[0].HeaderText = "1";
table.Columns[1].HeaderText = "2";
table.Columns[2].HeaderText = "3";
table.Columns[3].HeaderText = "4";
table.Rows.Add("data1-1", "data1-2", "data1-3", "data1-4");
table.Rows.Add("data2-1", "data2-2", "data2-3", "data2-4");
table.Rows.Add("data3-1", "data3-2", "data3-3", "data3-4");

列幅を個別に設定する

列幅を個別に設定する方法です。

DataGridView table = new DataGridView(){
  Dock = DockStyle.Fill,
  ColumnCount = 4,
  AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill,
  AllowUserToAddRows = false,
  RowHeadersVisible = false,
  Parent = this,
};
table.Columns[0].HeaderText = "1";
table.Columns[1].HeaderText = "2";
table.Columns[2].HeaderText = "3";
table.Columns[3].HeaderText = "4";
table.Rows.Add("data1-1", "data1-2", "data1-3", "data1-4");
table.Rows.Add("data2-1", "data2-2", "data2-3", "data2-4");
table.Rows.Add("data3-1", "data3-2", "data3-3", "data3-4"); 
table.Columns[0].Width = 50;  //追加
table.Columns[1].Width = 100; //追加
table.Columns[2].Width = 200; //追加
table.Columns[2].Width = 200; //追加

行ごとに選択する

選択状態をセルごとではなく行ごとに選択する方法です。

DataGridView table = new DataGridView(){
  Dock = DockStyle.Fill,
  ColumnCount = 4,
  AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill,
  AllowUserToAddRows = false,
  RowHeadersVisible = false,
  SelectionMode = DataGridViewSelectionMode.FullRowSelect, //追加
  Parent = this,
};
table.Columns[0].HeaderText = "1";
table.Columns[1].HeaderText = "2";
table.Columns[2].HeaderText = "3";
table.Columns[3].HeaderText = "4";
table.Rows.Add("data1-1", "data1-2", "data1-3", "data1-4");
table.Rows.Add("data2-1", "data2-2", "data2-3", "data2-4");
table.Rows.Add("data3-1", "data3-2", "data3-3", "data3-4"); 
table.Columns[0].Width = 50;
table.Columns[1].Width = 100;
table.Columns[2].Width = 200;
table.Columns[2].Width = 200;

グリッド線を消す

セルのグリッド線を消す方法です。ついでにセルのデータを編集できなくする(ReadOnly)も加えました。ちょっとエクスプローラー風になりました。

DataGridView table = new DataGridView(){
  Dock = DockStyle.Fill,
  ColumnCount = 4,
  AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill,
  AllowUserToAddRows = false,
  RowHeadersVisible = false,
  SelectionMode = DataGridViewSelectionMode.FullRowSelect,
  CellBorderStyle = DataGridViewCellBorderStyle.None, //追加
  ReadOnly = true, //ついで
  Parent = this,
};
table.Columns[0].HeaderText = "1";
table.Columns[1].HeaderText = "2";
table.Columns[2].HeaderText = "3";
table.Columns[3].HeaderText = "4";
table.Rows.Add("data1-1", "data1-2", "data1-3", "data1-4");
table.Rows.Add("data2-1", "data2-2", "data2-3", "data2-4");
table.Rows.Add("data3-1", "data3-2", "data3-3", "data3-4"); 
table.Columns[0].Width = 50;
table.Columns[1].Width = 100;
table.Columns[2].Width = 200;
table.Columns[2].Width = 200;

[ad#ad-1]

- C#応用編