Toggle CheckBox inside a ViewCell in Xmarin.Forms - checkbox

Question

I would like to know how to toggle the current checkbox inside my ListView - ViewCell on item tapped event.
<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>
Here is my item tapped event.
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

You can use MVVM to bind a ViewModel for ListView , when data of model changed , UI will update along with that .
Such as creating a CellClass as follow :
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));
}
}
Then setting some data for CellClass in a new created class (ListViewModel) :
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 });
}
}
Now Xaml code will as follow :
<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>
In ContentPage can deal with the ListViewCities_ItemTapped method and binding model for 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");
}
The effect :
This is the sample project link for reference , you can have a look when have time .

Answer 2

add a bool property to your model
public bool Selected { get; set; }
then bind your checkbox to it
<CheckBox IsChecked="{Binding Selected}" />
then in your handler
private void ListViewCities_ItemTapped(object sender, ItemTappedEventArgs e)
{
var item = (MyClass)e.Item;
item.Selected = !item.Selected;
}