无为清净楼资源网 Design By www.qnjia.com

本文将说明如何创建一个带全选复选框的列表控件。其效果如下图:

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"ItemsSource", typeof(object), typeof(CheckListView), new PropertyMetadata(null));

    /// <summary>
    /// 返回或设置全选复选框的选中状态
    /// </summary>
    public bool"htmlcode">
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 "htmlcode">
<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>
/// <summary>
/// 根据当前选择的个数来更新全选框的状态
/// </summary>
    public void UpdateSelectAllState()
    {
      var items = ItemsSource as IList<ICheckItem>;
      if (items == null)
      {
        return;
      }

      // 获取列表项中 IsSelected 值为 True 的个数,并通过该值来确定 IsSelectAllChecked 的值
      int count = items.Where(item => item.IsSelected).Count();
      if (count == items.Count)
      {
        IsSelectAllChecked = true;
      }
      else if (count == 0)
      {
        IsSelectAllChecked = false;
      }
      else
      {        
        IsSelectAllChecked = null;
      }
    }


这里也有两点需要提醒:

我一开始定义属性 IsSelectAllChecked 时,它的类型是 bool 类型,那么,由于 CheckBox 控件的 IsChecked 值为 null 时,它将呈现 Indetermine 状态,所以后来把它改为 bool"htmlcode">

xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

这样,这个控件就基本完成了,接下来是如何使用它。

首先,定义将要在列表中展示的数据项,并为它实现之前提到的 ICheckItem 接口,这里定义了一个 User 类,如下:

public class User : BindableBase, ICheckItem
  {
    private bool isSelected;
    private string name;

    public bool IsSelected
    {
      get { return isSelected; }
      set { SetProperty(ref isSelected, value); }
    }

    public string Name
    {
      get { return name; }
      set { SetProperty(ref name, value); }
    }
  }

接下来在 ViewModel 中定义一个列表 List<ICheckItem>,并添加数据,最后在 UI 上为其绑定 ItemsSource 属性即可,在此不再贴代码了,具体请参考源代码。

源码下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
WPF,复选框,CheckBox,列表控件

无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?