利用WPF怎么實現一個帶全選復選框的列表控件

利用WPF怎么實現一個帶全選復選框的列表控件？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

<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>

/// <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? 類型。

在XAML 代碼中可以看出，對事件以及事件的響應使用了行為，所以，需要添加引用 System.Windows.Interactivity.dll 和 Microsoft.Expression.Interactions.dll 兩個庫，并在XMAL 頭部添加如下命名空間的引用：

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); }
    }
  }

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。