如何使用uwp中的全选复选框创建带有复选框项目的列表视图

Posted

技术标签:

【中文标题】如何使用uwp中的全选复选框创建带有复选框项目的列表视图【英文标题】:How to create a list view with checkbox item with select all check box in uwp 【发布时间】:2019-07-28 04:10:48 【问题描述】:

我想创建一个包含部门名称的ListViewListView 包含带有部门名称的 CheckBox。用户可以选中和取消选中部门,也可以单击全选复选框,用户可以选择所有部门。

【问题讨论】:

***.com/help/mcve 也许我有你正在寻找的东西,以及工作代码。我只想了解您拥有的用例,1 个列表视图,所有项目的复选框和顶部的全选按钮 【参考方案1】:

你想要一个简单的列表视图,textcellimagecell由你决定,在这里我发布了带有 imagecell 的列表视图的代码,还有单元格滑动选项,只需在你想要的地方添加 Checkbox事件和应用逻辑。希望它对你有用!

  <AbsoluteLayout>

        <ListView x:Name="Demolist" BackgroundColor="White" ItemSelected="Demolist_ItemSelected">

            <ListView.ItemTemplate>
                <DataTemplate>

                    <ImageCell Height="30"
                                Text="Binding deparment_name "
                           Detail="Binding department_description"
                            ImageSource="ImageName.png">

                        <ImageCell.ContextActions>
                            <MenuItem x:Name="OnMore" Clicked="OnMore_Clicked" CommandParameter="Binding ."  Text="More" />
                            <MenuItem x:Name="OnDelete" Clicked="OnDelete_Clicked" CommandParameter="Binding ." Text="Delete" IsDestructive="True" />
                        </ImageCell.ContextActions>
                    </ImageCell>

                </DataTemplate>
            </ListView.ItemTemplate>

        </ListView>

</AbsoluteLayout>

【讨论】:

【参考方案2】:

Checkbox 不是 XF 框架中存在的控件,所以我认为您不能在 Xamarin.form 的列表视图中添加复选框,但您可以使用不同的方式显示选中和取消选中状态。

<ContentPage
x:Class="test2.Page3"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:convert="clr-namespace:test2"
x:Name="ToDoPage">
<ContentPage.Resources>
    <convert:converter1 x:Key="converterbool" />
</ContentPage.Resources>
<ContentPage.Content>
    <StackLayout>
        <ListView x:Name="listview1" ItemsSource="Binding todoList">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="4*" />
                                <ColumnDefinition Width="*" />

                            </Grid.ColumnDefinitions>
                            <Label Text="Binding ItemDescription" VerticalOptions="Center" />
                            <Button
                                Grid.Column="1"
                                Command="Binding Source=x:Reference ToDoPage, Path=BindingContext.UpdateCheckBoxCommand"
                                CommandParameter="Binding Id"
                                Opacity="0" />
                            <Image
                                Grid.Column="1"
                                HeightRequest="20"
                                HorizontalOptions="Center"
                                Source="Binding IsDone, Converter=StaticResource converterbool"
                                VerticalOptions="Center" />

                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage.Content>

public class TodoItem:INotifyPropertyChanged

    private string _Id;
    public string Id
    
        get  return _Id; 
        set
        
            _Id = value;
            RaisePropertyChanged("Id");
        
    
    private string _ItemDescription;
    public string ItemDescription
    
        get  return _ItemDescription; 
        set
        
            _ItemDescription = value;
            RaisePropertyChanged("ItemDescription");
        
    
    private bool _IsDone;
    public bool IsDone
    
        get  return _IsDone; 
        set
        
            _IsDone = value;
            RaisePropertyChanged("IsDone");
        
    

    public event PropertyChangedEventHandler PropertyChanged;


    public void RaisePropertyChanged(string propertyName)
    
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        
            handler(this, new PropertyChangedEventArgs(propertyName));
        
    



 class ToDoViewModel:INotifyPropertyChanged

    public ObservableCollection<TodoItem> todoList  get; set; 
    public ICommand UpdateCheckBoxCommand  get; set; 

    public ToDoViewModel()
    
        todoList = new ObservableCollection<TodoItem>()
        
            new TodoItem() Id = "1", ItemDescription = "Task 1", IsDone = false,
        new TodoItem() Id = "2", ItemDescription = "Task 2", IsDone = false,
        new TodoItem() Id = "3", ItemDescription = "Task 3", IsDone = false,
        new TodoItem() Id = "4", ItemDescription = "Task 4", IsDone = false,
            new TodoItem() Id = "5", ItemDescription = "Task 5",IsDone=false 
        ;
        UpdateCheckBoxCommand = new Command((Id) => UpdateCheckBox(Id.ToString()));
    

    private void UpdateCheckBox(string id)
    
        IEnumerable<TodoItem> items = todoList.Where(x=>x.Id==id);

        foreach(var item in items )
        
            if (item.IsDone) item.IsDone = false;
            else item.IsDone = true;
        


    

    public event PropertyChangedEventHandler PropertyChanged;


    public void RaisePropertyChanged(string propertyName)
    
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        
            handler(this, new PropertyChangedEventArgs(propertyName));
        
    




class converter1 : IValueConverter

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    
        bool ischeck = (bool)value;
        if(ischeck==false)
        
            return "uncheck.png";
        
        else
        
            return "check.png";
        

    

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    
        throw new NotImplementedException();
    



[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Page3 : ContentPage

    public Page3 ()
    
        InitializeComponent ();
        this.BindingContext = new ToDoViewModel();
    

【讨论】:

以上是关于如何使用uwp中的全选复选框创建带有复选框项目的列表视图的主要内容,如果未能解决你的问题,请参考以下文章

如何使用表中的全选复选框获取所有数据?

使用JavaScript完成复选框的全选和全不选

在 uwp 中使用带有多选复选框的 mytoolkit 数据网格

如何实现复选框的全选和取消全选效果

如何使用jquery实现gridview中checkbox(复选框)的全选功能?

原生js实现的复选框的全选和全不选效果