業務のためのC#・C言語・C++学習

主にC#の文法やWPF周りのアウトプットに利用してます。

【C#-WPF】ListViewにチェックボックスを追加するには

ListViewにチェックボックスを追加したUIについてとりあげます。

UI その1

ButtonをクリックするとListViewにCheckBoxが表示されるUIを作ります。 その1ではXAMLでCheckBoxを表示させます。MainWindowのソースコードではデータバインディングは行いません。

XAML

<Window x:Class="Listview_checkbox.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Listview_checkbox"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Margin="-1,65,0.6,0">
        <Button Content="Button" HorizontalAlignment="Left" Margin="21,-41,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
        <ListView Name="ListViewName">
            <ListView.View>
                <GridView>
                    
                    <!--GridViewColumnにCheckBocを追加する-->
                    <GridViewColumn >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <CheckBox Margin="5,0" IsChecked="true"/>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    
                    <GridViewColumn Header="項目1" Width="200" DisplayMemberBinding="{Binding items1}"/>
                    <GridViewColumn Header="項目2" Width="200" DisplayMemberBinding="{Binding items2}"/>
                    <GridViewColumn Header="項目3" Width="200" DisplayMemberBinding="{Binding items3}"/>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

解説

ListViewの1列目に表示されるCheckBoxを追加します。 DataTemplateは列のセルの書式を設定するために使用されます。

<GridViewColumn.CellTemplate>
<DataTemplate>
//ここにCheckBoxを入れる
 </DataTemplate>
</GridViewColumn.CellTemplate>

CheckBoxでIsCheckedをtrueにすると初期状態でCheckBoxにチェックが入ります。falseではチェックは入りません。

<CheckBox Margin="5,0" IsChecked="true"/>

MainWindowのソースコード

namespace Listview_checkbox
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            List<ListViewItems> items = new List<ListViewItems>();
            items.Add(new ListViewItems() { /*items = "000",*/ items1 = "111", items2 = "222", items3 = "333" });
            items.Add(new ListViewItems() { /*items = "aaa",*/ items1 = "bbb", items2 = "ccc", items3 = "ddd" });
            items.Add(new ListViewItems() { /*items = "AAA",*/ items1 = "BBB", items2 = "CCC", items3 = "DDD" });
            ListViewName.ItemsSource = items;
        }
    }

    public class ListViewItems
    {
        //public string items { get; set; }
        public string items1 { get; set; }
        public string items2 { get; set; }
        public string items3 { get; set; }
    }
}

UI その2

その1では全てのチェックボックスの初期値はXAMLで指定しましたが、その2ではコードバインディングつまりMainWindowで指定します。

XAML

<Window x:Class="Listview_checkbox.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Listview_checkbox"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Margin="-1,65,0.6,0">
        <Button Content="Button" HorizontalAlignment="Left" Margin="21,-41,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
        <ListView Name="ListViewName">
            <ListView.View>
                <GridView>

                    <!--最初のGridViewColumnにCheckBocを追加する-->
                    <GridViewColumn >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <CheckBox Margin="5,0" IsChecked="{Binding Selected}"/>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>

                    <GridViewColumn Header="項目1" Width="200" DisplayMemberBinding="{Binding items1}"/>
                    <GridViewColumn Header="項目2" Width="200" DisplayMemberBinding="{Binding items2}"/>
                    <GridViewColumn Header="項目3" Width="200" DisplayMemberBinding="{Binding items3}"/>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

解説

 <CheckBox Margin="5,0" IsChecked="{Binding Selected}"/>

IsCheckedをバインディングし、Selectedを変数にします。

MainWindow

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Listview_checkbox
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            List<ListViewItems> items = new List<ListViewItems>();
            items.Add(new ListViewItems() { /*items = "000",*/ Selected = true, items1 = "111", items2 = "222", items3 = "333" });
            items.Add(new ListViewItems() { /*items = "aaa",*/ Selected = false, items1 = "bbb", items2 = "ccc", items3 = "ddd" });
            items.Add(new ListViewItems() { /*items = "AAA",*/ Selected = true, items1 = "BBB", items2 = "CCC", items3 = "DDD" });
            ListViewName.ItemsSource = items;
        }
    }

    public class ListViewItems
    {
        //public string items { get; set; }
        public bool Selected { get; set; }
        public string items1 { get; set; }
        public string items2 { get; set; }
        public string items3 { get; set; }
    }
}

解説

  public bool Selected { get; set; }

Selectedにtrueかfalseを与えるboolとします。 ボタンクリックではListViewItems()内において1,3列目をtrueと2列目にはfalseとしました。

UI

参考文献

https://stackoverflow.com/questions/41317363/c-sharp-wpf-how-to-have-checkboxes-in-a-listview

次回

次回はListviewのヘッダーにCheckBoxを追加しチェックされた場合、全Itemがチェックされる。アンチェック場合、全Itemを解除するUIを紹介します。

gaishiengineer.hatenablog.com