萝卜家园WPF如何实现带全选复选框的列表控件

这个控件是由一个复选框（CheckBox）与一个 ListView 组合而成。它的操作逻辑：

当选中“全选”时，列表中所有的项目都会被选中；反之，取消选中“全选”时，所有项都会被取消勾选。

在列表中选中部分数据项目时，“全选”框会呈现不确定状态（Indetermine）。

由此看出，“全选”复选框与列表项中的复选框达到了双向控制的效果。

其设计思路：首先，创建自定义控件（CheckListView），在其 ControlTemplate 中定义 CheckBox 和 ListView，并为 ListView 设置 ItemTemplate，在其中增加 CheckBox 控件，如下：

<ControlTemplate TargetType="{x:Type control:CheckListView}"> <Grid Background="{TemplateBinding Background}"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <CheckBox Content="全选" /> <ListView x:Name="list" Grid.Row="1"> <ListView.ItemTemplate> <DataTemplate> <CheckBox /> </DataTemplate> </ListView.ItemTemplate> </ListView> </Grid> </ControlTemplate>

其次，为控件添加两个依赖属性，其中一个为 ItemsSource，即该控件所要接收的数据源，也即选择列表；本质上，这个数据源会指定给其内的 ListView。另外也需要一个属性 IsSelectAllChecked 表示是否选中全选复选框。

public static readonly DependencyProperty IsSelectAllCheckedProperty = DependencyProperty.Register("IsSelectAllChecked", typeof(bool?), typeof(CheckListView), new PropertyMetadata(false)); public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register("ItemsSource", typeof(object), typeof(CheckListView), new PropertyMetadata(null)); /// <summary> /// 返回或设置全选复选框的选中状态 /// </summary> public bool? IsSelectAllChecked { get { return (bool?)GetValue(IsSelectAllCheckedProperty); } set { SetValue(IsSelectAllCheckedProperty, value); } } /// <summary> /// 数据源 /// </summary> public object ItemsSource { get { return (object)GetValue(ItemsSourceProperty); } set { SetValue(ItemsSourceProperty, value); } }

需要注意的一点是，作为一个自定义控件，我们必须考虑它的通用性，所以为了保证能设置各式各样的数据源（如用户列表、物品列表或 XX名称列表），在这里定义一个数据接口，只要数据源中的数据项实现该接口，即可达到通用的效果。该接口定义如下：

public interface ICheckItem { /// <summary> /// 当前项是否选中 /// </summary> bool IsSelected { get; set; } /// <summary> /// 名称 /// </summary> string Name { get; set; } }

最后，我们把刚才定的属性绑定的控件上，如下：

<CheckBox Content="全选" IsChecked="{Binding IsSelectAllChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=Twoway}" /> <ListView x:Name="list" Grid.Row="1" ItemsSource="{TemplateBinding ItemsSource}"> <ListView.ItemTemplate> <DataTemplate> <CheckBox Content="{Binding Name}" IsChecked="{Binding IsSelected}" /> </DataTemplate> </ListView.ItemTemplate> </ListView>

接下来，实现具体操作：

首先，通过“全选”复选框来控制所有列表项：这里通过其 Click 事件来执行 CheckAllItems 方法， 在此方法中，会对数据源进行遍历，将其 IsSelected 属性设置为 True 或 False。代码如下：

<CheckBox Content="全选" IsChecked="{Binding IsSelectAllChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=Twoway}"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <ei:CallMethodAction MethodName="CheckAllItems" TargetObject="{Binding RelativeSource={RelativeSource TemplatedParent}}" /> </i:EventTrigger> </i:Interaction.Triggers> </CheckBox>

/// <summary> /// 全选或清空所用选择 /// </summary> public void CheckAllItems() { foreach (ICheckItem item in ItemsSource as IList<ICheckItem>) { item.IsSelected = IsSelectAllChecked.HasValue ? IsSelectAllChecked.Value : false; } }

然后，通过选中或取消选中列表项时，更新“全选”复选框的状态：在 DataTemplate 中，我们也为 CheckBox 的 Click 事件设置了要触发的方法 UpdateSelectAllState，代码如下：

<DataTemplate> <CheckBox Content="{Binding Name}" IsChecked="{Binding IsSelected}"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <ei:CallMethodAction MethodName="UpdateSelectAllState" TargetObject="{Binding RelativeSource={RelativeSource AncestorType=control:CheckListView}}" /> </i:EventTrigger> </i:Interaction.Triggers> </CheckBox> </DataTemplate>