在 Xmarin.Forms 中切换 ViewCell 内的 CheckBox

Question

我想知道如何在我的 ListView - ViewCell 中切换项目点击事件中的当前复选框。

<ListView x:Name="listViewCities"
                      ItemSelected="ListViewCities_ItemSelected"
                      ItemTapped="ListViewCities_ItemTapped">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal">
                    <CheckBox x:Name="chkSelectedCity" />
                    <Label Text="{Binding Name}" 
                                       FontSize="Medium"
                                       VerticalOptions="CenterAndExpand" />
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

这是我的物品点击事件。

private void ListViewCities_ItemTapped(object sender, ItemTappedEventArgs e)
{
    //Here i want to toggle the current check box as true
    //something like chkSelectedCity.checked = true;
}

Answer 1

为您的模型添加一个布尔值属性

public bool Selected { get; set; }

然后将您的复选框绑定到它

<CheckBox IsChecked="{Binding Selected}" />

然后在你的处理程序中

private void ListViewCities_ItemTapped(object sender, ItemTappedEventArgs e)
{
    var item = (MyClass)e.Item;
    item.Selected = !item.Selected;
}

Answer 2

您可以使用MVVM为ListView绑定一个ViewModel，当模型的数据发生变化时，UI会随之更新。

比如创建一个CellClass如下：

public class CellClass : INotifyPropertyChanged
{
    public string Name { set; get; }

    private bool selected { get; set; }

    public bool Selected
    {
        set
        {
            if (selected != value)
            {
                selected = value;
                OnPropertyChanged("Selected");
            }
        }
        get
        {
            return selected;
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

然后在新创建的 class (ListViewModel) 中为 CellClass 设置一些数据：

public class ListViewModel
{
    public List<CellClass> cellItems { set; get; }

    public ListViewModel()
    {
        cellItems = new List<CellClass>();
        cellItems.Add(new CellClass() { Name = "One", Selected = false });
        cellItems.Add(new CellClass() { Name = "Two", Selected = false });
        cellItems.Add(new CellClass() { Name = "Three", Selected = false });
        cellItems.Add(new CellClass() { Name = "Four", Selected = false });
        cellItems.Add(new CellClass() { Name = "Five", Selected = false });
        cellItems.Add(new CellClass() { Name = "Six", Selected = false });

    }
}

现在Xaml代码如下：

<ListView x:Name="listViewCities"
            ItemSelected="listViewCities_ItemSelected"
            ItemTapped="ListViewCities_ItemTapped">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal">
                    <CheckBox x:Name="chkSelectedCity"
                                IsChecked="{Binding Selected}"/>
                    <Label Text="{Binding Name}"
                            FontSize="Medium"
                            VerticalOptions="CenterAndExpand" />
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

在ContentPage可以处理ListViewCities_ItemTapped方法和绑定模型ListView:

public MainPage()
{
    InitializeComponent();

    ListViewModel listViewModel = new ListViewModel();
    listViewCities.ItemsSource = listViewModel.cellItems;
}

private void ListViewCities_ItemTapped(object sender, ItemTappedEventArgs e)
{
    //Here i want to toggle the current check box as true
    //something like chkSelectedCity.checked = true;
    var model = e.Item as CellClass;
    if (model.Selected)
    {
        model.Selected = false;
    }
    else
    {
        model.Selected = true;
    }
    Console.WriteLine("clicked");
}

效果：

这是sample project link供参考，有空可以看看

在 Xmarin.Forms 中切换 ViewCell 内的 CheckBox

Toggle CheckBox inside a ViewCell in Xmarin.Forms

checkbox

code-behind

toggle

xamarin.forms