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を紹介します。