You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

.NET MAUI中如何勾选CollectionView内的所有复选框?

问题:.NET MAUI CollectionView 实现全选复选框功能

我在.NET MAUI中用CollectionView展示包含CheckBox和Label的列表,XAML代码如下:

<CollectionView x:Name="cvPreferences">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="30"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="20"/>
                </Grid.ColumnDefinitions>

                <CheckBox Grid.Column="0"    x:Name="{Binding}" ClassId="{Binding}" HeightRequest="30" IsChecked="False" CheckedChanged="chkPref_Checked"/>
                <Label    Grid.Column="1"    Text="{Binding}"    HeightRequest="30" FontSize="Small" Margin="2,6,0,0" />
                <ImageButton Grid.Column="2" ClassId="{Binding}" HeightRequest="30" Source="delete_pref.png" Clicked="btnDeletePref_Clicked"/>

            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>

通过全局变量填充数据,C#代码:

public partial class MainPage : ContentPage
{
    List<String> prefsTargetFolderList = new List<String>();
    ...
}

数据绑定代码:

cvPreferences.ItemsSource = prefsTargetFolderList.OrderBy(x => x).ToList();

尝试添加全选按钮,通过x:Name和ClassId获取CheckBox但返回null,全选事件代码:

private void btnSelectAllPrefs_Clicked(object sender, EventArgs e)
{
    // Check if checking it with code triggers the stuff
    foreach (string pref in prefsTargetFolderList)
    { 
        CheckBox checkbox = (CheckBox)FindByName(pref);
        if (checkbox != null)
            checkbox.IsChecked = true;
    }
}

请问如何实现勾选CollectionView中所有复选框的功能?


解决方案

直接通过控件名称查找CheckBox的方式不可行,因为CollectionView的ItemTemplate是动态生成的,每个Item里的控件属于模板内部元素,无法通过FindByName直接获取。正确的做法是采用数据驱动的方式,通过绑定模型的属性来控制CheckBox状态:

  1. 创建带选中状态的模型类
    定义包含文本和选中状态的模型,实现INotifyPropertyChanged接口确保属性变化能通知UI更新:

    using System.ComponentModel;
    using System.Runtime.CompilerServices;
    
    public class PreferenceItem : INotifyPropertyChanged
    {
        private string _text;
        private bool _isChecked;
    
        public string Text
        {
            get => _text;
            set
            {
                _text = value;
                OnPropertyChanged();
            }
        }
    
        public bool IsChecked
        {
            get => _isChecked;
            set
            {
                _isChecked = value;
                OnPropertyChanged();
            }
        }
    
        public event PropertyChangedEventHandler PropertyChanged;
    
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    
  2. 修改数据源和绑定逻辑
    将原来的List<string>替换为ObservableCollection<PreferenceItem>,确保集合变化时UI自动更新:

    public partial class MainPage : ContentPage
    {
        ObservableCollection<PreferenceItem> prefsTargetFolderList = new ObservableCollection<PreferenceItem>();
        ...
    
        // 初始化数据示例
        // prefsTargetFolderList.Add(new PreferenceItem { Text = "文件夹1", IsChecked = false });
        // prefsTargetFolderList.Add(new PreferenceItem { Text = "文件夹2", IsChecked = false });
    
        // 绑定数据源
        cvPreferences.ItemsSource = prefsTargetFolderList.OrderBy(x => x.Text).ToList();
    }
    
  3. 更新XAML中的绑定
    修改CheckBox和Label的绑定目标,关联到模型的IsChecked和Text属性:

    <CollectionView x:Name="cvPreferences">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="20"/>
                    </Grid.ColumnDefinitions>
    
                    <CheckBox Grid.Column="0" 
                              HeightRequest="30" 
                              IsChecked="{Binding IsChecked, Mode=TwoWay}" 
                              CheckedChanged="chkPref_Checked"/>
                    <Label Grid.Column="1" 
                           Text="{Binding Text}" 
                           HeightRequest="30" 
                           FontSize="Small" 
                           Margin="2,6,0,0" />
                    <ImageButton Grid.Column="2" 
                                 ClassId="{Binding Text}" 
                                 HeightRequest="30" 
                                 Source="delete_pref.png" 
                                 Clicked="btnDeletePref_Clicked"/>
    
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
    
  4. 实现全选功能
    在全选按钮的点击事件中,直接遍历数据源修改每个模型的IsChecked属性,UI会自动同步状态:

    private void btnSelectAllPrefs_Clicked(object sender, EventArgs e)
    {
        foreach (var item in prefsTargetFolderList)
        {
            item.IsChecked = true;
        }
    }
    

如果需要实现全选/反选切换,可以先判断当前全选状态,再批量修改:

private void btnToggleSelectAll_Clicked(object sender, EventArgs e)
{
    bool isAllChecked = prefsTargetFolderList.All(x => x.IsChecked);
    foreach (var item in prefsTargetFolderList)
    {
        item.IsChecked = !isAllChecked;
    }
}

内容的提问来源于stack exchange,提问作者Beb

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.25 22:45:40