Listview with Checkbox

What's the best way to display Checkbox inside ListView?

Answers

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    Checkbox is not a control present in XF framework.

    There are some controls on github (for example https://github.com/gruan01/XFControls

    Otherwise you can use a "Image" with a TapGestureRecognizer. When you tap the image, change the image to a "checked" image. Here a sample https://github.com/acaliaro/TestBindingWithListView

  • GeetSGeetS USMember ✭✭✭

    Thanks for replying. I had created checkbox from Button Control(https://stackoverflow.com/questions/30772510/how-to-add-checkbox-in-xamarin-forms-in-xaml-file) and placed that inside ListView. I want that on checkbox click all other checkboxes in listview should be unchecked ie only one checkbox can be ticked in listview

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    I think you have to work with "Binding". All checkboxes shoud be in Binding with a boolean property in your Model. When you click your button, you should set all boolean properties to false and the boolean property in binding with that button to true.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Or... You could put in a native Checkbox which would keep OS themeing and so on. Why re-invent the wheel when you can just use the actual native Checkbox?

    https://blog.xamarin.com/embedding-native-controls-into-xamarin-forms/

  • GeetSGeetS USMember ✭✭✭
    edited July 2017

    The problem is that in ListView all fields are Binded but the checkbox which I had inserted is not binded to any datasource. In Listview there will only be one checked Checkbox eg If I click Checkbox adjacent to 2nd record, then the previous one will be unchecked(Just like Radiobutton).

    On Checkbox click, I was trying to do it using for loop to uncheck all checkbox. But, couldn't get the syntax to get checkbox inside listview. :neutral:

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭
    Bind it...
  • GeetSGeetS USMember ✭✭✭

    Reference: https://forums.xamarin.com/discussion/65332/updating-entry-field-when-image-tap-gesture-clicked-inside-list-view-collection

    I was trying to do something like below on Checkbox_Click. But it sets value of only single checkbox(which is in selected row) but I want to uncheck all other checkbox. Didn't know how to loop around listview rows :neutral:
    private void checkBoxApp_Clicked(object sender, EventArgs e)
    {
    var view = (VisualElement)sender;
    var stackLayout = (Grid)view.Parent;
    CheckboxControl cc = (CheckboxControl)grid.Children[0]; //Since my checkbox is in 0 column
    if(cc.Checked==true)
    cc.Checked=false;
    else
    cc.Checked=true;
    }

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭
    edited July 2017

    Well... the items are in a collection that's binded to the ListView. Right?
    So you foreach through all the elements of the collection and change the value.
    The UI will update automatically through binding.

    You should however worry less about doing things based on the UI. That's very 1998 WinForms.
    You don't care what happens on the UI. You care about the value in the viewmodel changing. You don't care where or how it changed. The desire is to react to data changes, not UI events. Its a shift in thinking from old-school ways of development. But much cleaner approach.

    http://www.RedPillXamarin.com
    Start at the beginning and walk through all the tutorial series. It might help you shift your perspective to a more modern way of working from a data-centric approach instead of a GUI-centric approach.

  • GeetSGeetS USMember ✭✭✭

    My Checkbox is not binded to any Collection. Collection is separate which is populating ListView. I can't make any changes to that collection. I am adding checkbox to listview. This will be like radiobutton(ie only one checkbox can be checked at a time). I had created a property IsSelected(just like Is Busy) in my View Model.

  • GeetSGeetS USMember ✭✭✭

    Alessandro - As told by you, I had Binded Checkbox. But, now the problem is if I update Checkbox data(ie make true to false in .xaml.cs ie in code behind), it is not updating in ListView.

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    does your data implement INPC? There are no other things to do...

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    @GeetS said:
    Alessandro - As told by you, I had Binded Checkbox. But, now the problem is if I update Checkbox data(ie make true to false in .xaml.cs ie in code behind), it is not updating in ListView.

    99% of the time the binding turns out to be something other than what we first think it is. An element in a collection that is source for the ListView is the BindingContext. You have to bind to a property on that element. It isn't binding back to a higher level in the collection, or on the page code behind or anything like that.

    At this point seeing your code is all that will help us to help you.

  • GeetSGeetS USMember ✭✭✭
    edited July 2017

    I am binding to a property eg IsDone. I had checked using breakpoint. In Viewmodel, the values are updating(eg. IsDone=False) but it's not reflecting in checkbox. If possible, please give an example of ListView with checkbox.

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭
    Post your code or post a little repo on GitHub
  • prishahprishah CAMember ✭✭

    All of you who have an issue with Checkbox not showing iOS, it works well with XLabs.Forms

    Steps to consider :
    -- First Don't forget to add XFormsApplicationDelegate instead of global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate in your iOS project
    public partial class AppDelegate : XFormsApplicationDelegate {

    -- Second Create Images-CheckBox Folders in your iOS and add checked and unchecked images, you can find below :
    https://onedrive.live.com/?authkey=!AD1EKcRobNdTbkc&cid=CB835444E4260514&id=CB835444E4260514!259180&parId=CB835444E4260514!92242&action=locate

    -- Third in your XAML : Add following lines

    xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"

    and then you can use checkbox in anywhere
    <controls:CheckBox Margin="0, 5, 0, 0" BackgroundColor="Transparent" WidthRequest="40" HeightRequest="30" IsVisible="True" />

Sign In or Register to comment.