xamarin表单中的多选复选框跨平台

Question

下面是我在 xamarin 表单中用于复选框的代码，但在这里我只能选择一个项目，我想从复选框中选择多个项目。数据从数据库绑定到复选框。请帮帮我

Checkforms.xaml.cs

 public partial class Checkforms : ContentPage
    {
        private ObservableCollection<HelperModel> statusRecords;
        string[] statusList;
        public Checkforms()
        {
            InitializeComponent();
            GetUserRoles();
          
        }
        public async void GetUserRoles()
        {
            HttpClient client = new HttpClient();
           var response = await client.GetStringAsync("http://**********/api/Masters/getRoles");
            var details = JsonConvert.DeserializeObject<List<HelperModel>>(response);
            ListView1.ItemsSource = details;

           
        }
        private async void ListView1_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            if (e.SelectedItem == null) return;
            var statusData = e.SelectedItem as HelperModel;
            ((ListView)sender).SelectedItem = null;

            HttpClient client = new HttpClient();
            var response = await client.GetStringAsync("http://********/api/Masters/getRoles");
            var details = JsonConvert.DeserializeObject<List<HelperModel>>(response);
            ListView1.ItemsSource = details;

          
            var item = details.Where(x => x.name == statusData.name).FirstOrDefault();
            if (item != null)
                item.IsSelected = !item.IsSelected;
           
        }
    }

Checkforms.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="Checkbox_listview.Checkforms"
               xmlns:lv="clr-namespace:Xamarin.Forms.MultiSelectListView;assembly=Xamarin.Forms.MultiSelectListView" Padding="0,20,0,0">
    <ContentPage.Content>
        <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <!-- Place new controls here -->
            <ListView x:Name="ListView1" ItemSelected="ListView1_ItemSelected" lv:MultiSelect.Enable="true">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <StackLayout HorizontalOptions="FillAndExpand"
Orientation="Horizontal" Padding="10  ">
                                    <Label Text="{Binding name}" HorizontalOptions="StartAndExpand"/>
                                    <Image Source="select.png"  IsVisible="{Binding IsSelected}"
VerticalOptions="Center"  HeightRequest="40"
WidthRequest="40"/>
                                </StackLayout>
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
            
        </StackLayout>
</ContentPage.Content>
</ContentPage>

HelperModel.cs

public class HelperModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        private bool isSelected = false;
        public string name { get; set; }
        public bool IsSelected
        {
            get { return isSelected; }
            set
            {
                isSelected = value;
                OnPropertyChanged("IsSelected");
            }
        }
        //OnProperty changed method
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

在从数据库绑定复选框后，我试图从复选框中选择多个项目，从这里一次只选择一个项目。请帮助如何选择多个项目 提前致谢

Answer 1

您可以尝试使用CollectionView 替换listview，如下面的代码。 CollectionView有SelectionMode，可以设置成Multiple

  <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <!-- Place new controls here -->
            <CollectionView  x:Name="ListView1" ItemsSource="{Binding StatusRecords}"   SelectionMode="Multiple"
                SelectionChanged="ListView1_SelectionChanged">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        
                                <StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal" Padding="10  ">
                                    <Label Text="{Binding name}" HorizontalOptions="StartAndExpand"/>
                                    <Image Source="select.png"  IsVisible="{Binding IsSelected}" VerticalOptions="Center"  HeightRequest="40" WidthRequest="40"/>
                                </StackLayout>
                          
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

        </StackLayout>

这里正在运行 GIF。

=========更新=============== 是否要多重预选结果？

如果是这样，您应该在 ViewModel 中添加属性。注意：不管你是什么型号，请将ObservableCollection的类型设置为object

   ObservableCollection<object> selectedHelperModels;
        public ObservableCollection<object> SelectedHelperModels
        {
            get
            {
                return selectedHelperModels;
            }
            set
            {
                if (selectedHelperModels != value)
                {
                    selectedHelperModels = value;
                    OnPropertyChanged("SelectedHelperModels");
                }
            }
        }

那么如果IsSelected 被选为真。我会把它添加到SelectedHelperModels。

  public MyHelperViewModel()
        {

           
            StatusRecords = new ObservableCollection<HelperModel>();
            StatusRecords.Add(new HelperModel() { IsSelected=false, name="test1" });
            StatusRecords.Add(new HelperModel() { IsSelected = true, name = "test2" });
            StatusRecords.Add(new HelperModel() { IsSelected = true, name = "test3" });
            StatusRecords.Add(new HelperModel() { IsSelected = true, name = "test4" });
            StatusRecords.Add(new HelperModel() { IsSelected = false, name = "test5" });
            StatusRecords.Add(new HelperModel() { IsSelected = false, name = "test6" });

           
            SelectedHelperModels = new ObservableCollection<object>();


            foreach (var item in StatusRecords)
            {
                if (item.IsSelected)
                {
                    SelectedHelperModels.Add(item);
                }
            }
        }
       

在前台 xaml.在CollectionView 中添加SelectedItems="{Binding SelectedHelperModels}"。

 <CollectionView  x:Name="ListView1" ItemsSource="{Binding StatusRecords}"   SelectedItems="{Binding SelectedHelperModels}" SelectionMode="Multiple"
                SelectionChanged="ListView1_SelectionChanged">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        
                        <StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal" Padding="10  ">
                            <Label Text="{Binding name}" HorizontalOptions="StartAndExpand"/>
                            <Image Source="{Binding IsSelected, Converter={StaticResource imageToBool}}"  IsVisible="{Binding IsSelected} " VerticalOptions="Center"  HeightRequest="40" WidthRequest="40"/>
                        </StackLayout>
                          
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

当您发表评论时，您缺少 ListView1_SelectionChanged 事件。只需在布局背景代码中添加即可。

  public partial class MainPage : ContentPage
    {
        MyHelperViewModel myHelperViewModel;
        public MainPage()
        {
            InitializeComponent();
            myHelperViewModel=  new MyHelperViewModel();
            this.BindingContext = myHelperViewModel;
        }

        

        private void ListView1_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            
        }
    }
}

=========Update2=============

你想达到像下面的GIF这样的效果吗？

如果是这样，我发现SelectionChanged事件无法轻易实现，也无法满足MVVM要求，所以我在CollectionView中为StackLayout添加了TapGestureRecognizer。

这是代码。

<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

            <CollectionView  x:Name="ListView1" 
                             ItemsSource="{Binding StatusRecords}" 
                            
                            
                             SelectedItems="{Binding SelectedHelperModels}" 
                             SelectionMode="Multiple"
                            >
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal" Padding="10">
                            <StackLayout.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding  BindingContext.ChangeCommand, Source={x:Reference Name=ListView1}}"
                                                      CommandParameter="{Binding .}"
                                                      />


                            </StackLayout.GestureRecognizers>
                            <Label Text="{Binding name}" HorizontalOptions="StartAndExpand"/>
                            <Image Source="{Binding IsSelected, Converter={StaticResource imageToBool},Mode=TwoWay}"  IsVisible="{Binding IsSelected, Mode=TwoWay}" VerticalOptions="Center"  HeightRequest="40" WidthRequest="40"/>
                        </StackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </StackLayout>

这里是 ViewModel。

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Windows.Input;
using Xamarin.Forms;

namespace SelectMutiPlyDemo
{
    public class MyHelperViewModel: INotifyPropertyChanged
    {
        public ObservableCollection<HelperModel> StatusRecords { get; set; }
        public ICommand ChangeCommand { protected set; get; }
        ObservableCollection<object> selectedHelperModels;
        public ObservableCollection<object> SelectedHelperModels
        {
            get
            {
                return selectedHelperModels;
            }
            set
            {
                if (selectedHelperModels != value)
                {
                    selectedHelperModels = value;
                    OnPropertyChanged("SelectedHelperModels");
                }
            }
        }
        public MyHelperViewModel()
        {

           
            StatusRecords = new ObservableCollection<HelperModel>();
            StatusRecords.Add(new HelperModel() { IsSelected=false, name="test1" });
            StatusRecords.Add(new HelperModel() { IsSelected = true, name = "test2" });
            StatusRecords.Add(new HelperModel() { IsSelected = true, name = "test3" });
            StatusRecords.Add(new HelperModel() { IsSelected = true, name = "test4" });
            StatusRecords.Add(new HelperModel() { IsSelected = false, name = "test5" });
            StatusRecords.Add(new HelperModel() { IsSelected = false, name = "test6" });
     
            SelectedHelperModels = new ObservableCollection<object>();

            foreach (var item in StatusRecords)
            {
                if (item.IsSelected)
                {
                    SelectedHelperModels.Add(item);
                }
            }

            ChangeCommand=new Command<HelperModel>((key) =>
            {
                if (SelectedHelperModels.Contains<object>(key))
                {
                    SelectedHelperModels.Remove(key);
                   
                }
                else
                {
                    SelectedHelperModels.Add(key);
                    
                }
                key.IsSelected = !key.IsSelected;


            });
        }
       
        #region INotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;

        void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
    }
}