【WPF】データグリッドにチェックボックス列を設けてワンクリックでチェックできるようにする
おはようございます。
今回は、Datagrid にチェックボックス列を追加し、
選択したデータを削除できるようにしたいと思います。
デフォルトで、「DataGridCheckBoxColumn」というのがあるのですが、
これだと行を選択したあとにチェックしなければならず、なんか操作性が悪いため別の方法で実装します。
いつも通り、前回のプログラムを流用します。
https://www.doraxdora.com/blog/2017/08/09/post-1956/
スポンサーリンク
画面の修正
データグリッド列の先頭に次の「DataGridTemplateCoumn」を追加します。
MainWindow.xaml
<DataGridTemplateColumn IsReadOnly="True" Header="選択" Width="50">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
プログラム修正
クラス追加
チェックボックスにバインドする列を追加したクラスを作成します。
CatModel.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace WpfApp1
{
public class CatModel
{
public CatModel() {
}
public CatModel(int No, String Name, String Sex, int Age, String Kind, String Favorite) {
this.IsChecked = false;
this.No = No;
this.Name = Name;
this.Sex = Sex;
this.Age = Age;
this.Kind = Kind;
this.Favorite = Favorite;
}
public Boolean IsChecked { get; set; }
public int No { get; set; }
public String Name { get; set; }
public String Sex { get; set; }
public int Age { get; set; }
public String Kind { get; set; }
public String Favorite { get; set; }
}
}
データ取得処理の修正
取得したデータを作成したクラスにマッピングします。
MainWindow.xaml.cs
List<CatModel> resultList = new List<CatModel>();
foreach (Cat cat in result.ToList())
{
resultList.Add(new CatModel(cat.No, cat.Name, cat.Sex, cat.Age, cat.Kind, cat.Favorite));
}
e.Result = resultList;
データグリッドに設定する処理の修正
データグリッドに設定するリストのクラスを変更します。
MainWindow.xaml.cs
/// <summary>
/// 検索完了処理（非同期）
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void SearchProcessCompleted(object sender, RunWorkerCompletedEventArgs e)
{
this.dataGrid.ItemsSource = e.Result as List<CatModel>;
ToggleProgressRing();
}
削除処理の修正
削除ボタンがクリックされたら、
チェックボックスが選択されているデータを削除するように修正します。
/// <summary>
/// 削除ボタンクリックイベント
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void del_button_Click(object sender, RoutedEventArgs e)
{
logger.Info("削除ボタンクリック");
// データを削除する
using (var context = new PgDbContext())
{
int checkCount = 0;
List<CatModel> list = this.dataGrid.ItemsSource as List<CatModel>;
foreach (CatModel cat in list)
{
if (cat.IsChecked)
{
checkCount++;
// 対象のテーブルオブジェクトを取得
var table = context.Cats;
// テーブルから対象のデータを取得
var target = table.Single(x => x.No == cat.No);
// データ削除
table.Remove(target);
// DBの変更を確定
context.SaveChanges();
}
}
if (checkCount == 0)
{
MessageBox.Show("削除対象にチェックがされていません。");
return;
}
}
// データ再検索
searchData();
MessageBox.Show("データを削除しました。");
}起動してみる
追加したチェックボックスをいくつかチェックして削除ボタンをクリックします。
無事にデータが削除されました。
まとめ
データグリッドにチェックボックスをつけるって
結構よくある要件ですよね。
とりあえずはこんな感じでいいんじゃないでしょうか。
ではでは。