2019-06-27に投稿

【WPF】データグリッドにチェックボックス列を設けてワンクリックでチェックできるようにする

今回は、Datagrid にチェックボックス列を追加し、選択したデータを削除できるようにしたいと思います。

デフォルトで、「DataGridCheckBoxColumn」というのがあるのですが、これだと行を選択したあとにチェックしなければならず、なんか操作性が悪いため別の方法で実装します。

プログラムは、前回のプログラムを流用します。
【WPF】PostgreSQL に接続してデータを操作(登録、更新、削除)してみる

画面の修正

データグリッド列の先頭に次の「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("データを削除しました。");
        }

起動してみる

チェックボックス追加

追加したチェックボックスをいくつかチェックして削除ボタンをクリックします。

データ削除完了

無事にデータが削除されました。

まとめ

データグリッドにチェックボックスをつけるって結構よくある要件ですよね。
デフォルトでこうしてくれればいいんですけど。

まあとりあえずはこんな感じでいいんじゃないでしょうか。

ではでは。

Originally published at www.doraxdora.com

doraxdora

IT関係の仕事をしています/1985年生まれの東京在住/便利なサービスやツール漁りや料理などが好き/2017年~ブログやってます/自分でサービスとか作ってリリースしたい/何かありましたらお気軽にDMどうぞ

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント