DevExpress——手把手教你解决CheckedListBoxControl的高级需求

项目中有这样一个需求，截图如下：

需求大概描述如下：左右两边放置两个CheckedListBoxControl，中间四个按钮，第一个按钮是将左边选中项转移到右边，第二个按钮是将右边选中项转移到左边，第三个按钮是将左边的全部选中转移到右边，第四个按钮是将右边的全部选中转移到左边。

需求实现

1. 新建一个form页面，然后拖拽两个GroupControl控件，然后再拖拽两个CheckedListBoxControl，拖拽四个按钮放在图片上的位置上。
2. 初始化左边的CheckedListBoxControl，加入措施选择项，代码实现:

List<MeasureOilAndWaterDescriptor> measures = new 
List<MeasureOilAndWaterDescriptor>();

measures中存储了从数据库中取出来的数据项，这里不写实现，数据库取出数据项有各位自己在项目中实现，这里只定义变量，在后面怎么使用大家也能看明白。左边的CheckedListBoxControl的Name属性为CheckedListBoxControl1。

private void InitialAllMeasures()
{
    this.checkedListBoxControl1.Items.Clear();
    foreach (var item in this.measures)
    {
       this.checkedListBoxControl1.Items.Add(new CheckedListBoxItem()
       {
           Description = item.Description
       });
    }

}

• 第一个按钮Name为simpleButton1，然后定义一个变量用于接收用户选择的指标项

private IEnumerable<CheckedListBoxItem> selectItems = new List<CheckedListBoxItem>();

• 然后点击第一个按钮，实现第一个按钮的点击事件

  private void TransferSelectedItemsLeftToRight()
  {
     selectItems = this.checkedListBoxControl1.Items.Where(x => x.CheckState == CheckState.Checked).Distinct();
     if (!selectItems.Any())
     {
        XtraMessageBox.Show("您未选中措施项!");
        return;
     }
     //加入到checkedit2中
     foreach (var item in selectItems)
     {
        this.checkedListBoxControl2.Items.Add(new CheckedListBoxItem()
        {
           Description = item.Description,
           CheckState = CheckState.Checked
        });
     }
     this.checkedListBoxControl2.Visible = true;
     int temp = this.checkedListBoxControl1.Items.Count;
     for (int i = 0; i < temp; i++)
     {
        if (this.checkedListBoxControl1.GetItemChecked(i))
        {
            this.checkedListBoxControl1.Items.RemoveAt(i);
            temp--;
            i--;
        }
     }
  
  }

  代码稍微解释下，第1～6行将左边的多选框的选中项取出来，第7～14行将左边的选中项加入到第二个多选框中，第16～25行是将左边多选框的选中项删除掉，不然左边的选中项还会存在左边的多选框中。由此第一个按钮的事件就实现清楚了。

• 第二个按钮同理是将右边的选择框的选中项转移到左边的选择框，同时删除右边选择框的选中项，实现代码如下：

private void TransferSelectItemsRightToLeft()
{
   selectItems = this.checkedListBoxControl2.Items.Where(x => x.CheckState == CheckState.Checked).Distinct();
   if (!selectItems.Any())
   {
       XtraMessageBox.Show("您未选中措施项!");
       return;
   }
   //加入到checkedit1中
   foreach (var item in selectItems)
   {
      this.checkedListBoxControl1.Items.Add(new CheckedListBoxItem()
      {
          Description = item.Description
      });
   }
   int temp = this.checkedListBoxControl2.Items.Count;
   for (int i = 0; i < temp; i++)
   {
       if (this.checkedListBoxControl2.GetItemChecked(i))
       {
          this.checkedListBoxControl2.Items.RemoveAt(i);
          temp--;
          i--;
       }
    }
}

可以看到右边的多选框转移到左边的实现原理是差不多的，接下来就只剩第三个和第四个按钮的点击事件了。由于第三个和第四个按钮的逻辑是将左边或者右边的选择项进行全选，那么就给用户设置一个全选按钮，这样方便用户点击。

/// <summary>
/// 是否全选
/// </summary>
private bool allSelect = false;

定义个变量allSelect用于标记用户是否点击全选按钮，左边全选按钮Name为simpleButton5，点击事件为：

        /// <summary>
        /// 左边全选按钮
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        void simpleButton5_Click(object sender, EventArgs e)
        {
            DialogHelper.Execute(() =>
            {
                int temp = this.checkedListBoxControl1.Items.Count;
                if (temp == 0)
                {
                    this.simpleButton5.Enabled = false;
                    return;
                }
                if (!this.allSelect)
                {
                    this.simpleButton5.Text = this.allSelect ? "全选" : "取消全选";
                    for (int i = 0; i < temp; i++)
                    {
                        this.checkedListBoxControl1.Items[i].CheckState = CheckState.Checked;
                    }
                    this.allSelect = true;
                }
                else
                {
                    for (int i = 0; i < temp; i++)
                    {
                        this.checkedListBoxControl1.Items[i].CheckState = CheckState.Unchecked;
                    }
                    this.allSelect = false;
                }

            });
        }

全选之后然后再将左边的措施项转移到右边，调用一下第一个按钮的点击事件就可以了。代码：

        /// <summary>
        /// 左边措施全部到右边
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        void simpleButton3_Click(object sender, EventArgs e)
        {
            DialogHelper.Execute(() =>
            {
                if (this.allSelect)
                {
                    this.simpleButton1_Click(sender, e);
                }
                else
                    XtraMessageBox.Show("请先点击全选!");
            });
        }

第四个按钮同第三个按钮实现，大家可以仿照上面自己实现第四个按钮的点击事件，最终效果如下图：

今天分享的内容你学会了吗？关注我每天都分享新的知识，将自己做的东西无私地分享给大家。欢迎大家学习指导哦！

如何联系到我？

微信公众号：技术上的那点事（PS：大年初一到初七，每天都有红包领哦），工作微信：wsygnh323，我很想和您交朋友哦～