locked
How to capture and store the checkbox activity in the form of list,which can be passed to other page RRS feed

  • Question

  • User394867 posted

    Hi, I am a newbie to Xamarin Forms. For my application, I have created a checkbox and a label inside a listview. I want to capture the checked and unchecked events of checkbox such that it can be used to pass only the checked items to another page. (I want to store the checked item in the form of list, and if suppose some item is checked and again unchecked then it should be deleted from that list). Is this possible?

    Thanking you in advance.

    Here is the code,

                <ListView x:Name="brandFilter" HasUnevenRows="True">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <ViewCell.View>
                                    <StackLayout>
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition Width="5*"/>
                                            </Grid.ColumnDefinitions>
                                            <CheckBox Grid.Column="0" Margin="20,0,0,0" CheckedChanged="BrandFilterCheck_CheckedChanged" 
                                                 Color="DeepSkyBlue"/>
                                            <Label Grid.Column="1" Text="{Binding BrandName}" FontFamily="{StaticResource RobotoFont}"  FontSize="18" TextColor="Black"/>
                                        </Grid>
                                    </StackLayout>
                                </ViewCell.View>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>
    

    Wednesday, May 27, 2020 5:53 AM

Answers

  • User371688 posted

    You can add a bool field(e.g. public bool isChecked { get; set; }) into your binding item ,then you can bind the field to the CheckBox .

    You can refer to the following code:

    TestPage1.xaml

        <ContentPage.Content>
            <ListView x:Name="listview" VerticalOptions="FillAndExpand">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Horizontal" Padding="5,0,5,0">
                                <Label  Text="{Binding Name}" HorizontalOptions="StartAndExpand" FontSize="30"/>
    
                                <input:CheckBox    IsChecked="{Binding isChecked}"  Type="Check" Color="White" BoxBackgroundColor="Green" TextColor="White" HeightRequest="40" 
                                                 CheckChanged="CheckBox_CheckChanged"  BindingContext="{Binding .}" />
    
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
    
                </ListView.ItemTemplate>
            </ListView>
        </ContentPage.Content>
    

    TestPage.xaml.cs

    public partial class TestPage1 : ContentPage
        {
            public ObservableCollection<Item> veggies { get; set; }
    
            public List<Item> selectedItems; // define `selectedItems` as the list of selected items.
    
            public TestPage1 ()
            {
                InitializeComponent ();
    
                selectedItems = new List<Item>(); // init the `selectedItems`
    
                veggies = new ObservableCollection<Item>();
                veggies.Add(new Item { Name = "Tomato", Type = "Fruit", Image = "tomato.png",isChecked= false});
                veggies.Add(new Item { Name = "Romaine Lettuce", Type = "Vegetable", Image = "lettuce.png",isChecked=false });
                veggies.Add(new Item { Name = "Zucchini", Type = "Vegetable", Image = "zucchini.png" , isChecked  = false});
                listview.ItemsSource = veggies;
            }
    
            private void Button_Clicked(object sender, EventArgs e)
            {
                var b = (Button)sender;
                var ob = b.CommandParameter as Item;
               if (ob != null)
               {
                    // retrieve the value from the ‘ob’ and continue your work.
                    System.Diagnostics.Debug.WriteLine("clicked object = " + ob.Name);
               }
    
            }
    
            private void CheckBox_CheckChanged(object sender, EventArgs e)
            {
                var checkbox = (Plugin.InputKit.Shared.Controls.CheckBox)sender;
                var ob = checkbox.BindingContext as Item;
    
                if (ob != null)
                {
                    System.Diagnostics.Debug.WriteLine("isChecked = " + ob.isChecked  + "<--->  Name = " + ob.Name +"<--->  Type = " + ob.Type );
                    if (ob.isChecked)
                    {
                        selectedItems.Add(ob);
                    }
                    else {
                        // remove the item
                    }
                }
            }
        }
    

    Item.cs

    public  class Item
        {
            public string Name { get; set; }
            public string Type { get; set; }
            public string Image { get; set; }
    
            public bool isChecked { get; set; }//This field indicates whether or not it is selected
        }
    

    Note:I defined a list selectedItems as the list of selected items.

      public List<Item> selectedItems;
    

    And when we check a item, then we can add it to the selectedItems and we can also remove it from the selectedItems when unchecking it.

       private void CheckBox_CheckChanged(object sender, EventArgs e)
            {
                var checkbox = (Plugin.InputKit.Shared.Controls.CheckBox)sender;
                var ob = checkbox.BindingContext as Item;
    
                if (ob != null)
                {
                    System.Diagnostics.Debug.WriteLine("isChecked = " + ob.isChecked  + "<--->  Name = " + ob.Name +"<--->  Type = " + ob.Type );
                    if (ob.isChecked)
                    {
                        selectedItems.Add(ob);
                    }
                    else {
                        // remove the item
                    }
                }
            }
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, May 27, 2020 6:58 AM

All replies

  • User371688 posted

    You can add a bool field(e.g. public bool isChecked { get; set; }) into your binding item ,then you can bind the field to the CheckBox .

    You can refer to the following code:

    TestPage1.xaml

        <ContentPage.Content>
            <ListView x:Name="listview" VerticalOptions="FillAndExpand">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Horizontal" Padding="5,0,5,0">
                                <Label  Text="{Binding Name}" HorizontalOptions="StartAndExpand" FontSize="30"/>
    
                                <input:CheckBox    IsChecked="{Binding isChecked}"  Type="Check" Color="White" BoxBackgroundColor="Green" TextColor="White" HeightRequest="40" 
                                                 CheckChanged="CheckBox_CheckChanged"  BindingContext="{Binding .}" />
    
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
    
                </ListView.ItemTemplate>
            </ListView>
        </ContentPage.Content>
    

    TestPage.xaml.cs

    public partial class TestPage1 : ContentPage
        {
            public ObservableCollection<Item> veggies { get; set; }
    
            public List<Item> selectedItems; // define `selectedItems` as the list of selected items.
    
            public TestPage1 ()
            {
                InitializeComponent ();
    
                selectedItems = new List<Item>(); // init the `selectedItems`
    
                veggies = new ObservableCollection<Item>();
                veggies.Add(new Item { Name = "Tomato", Type = "Fruit", Image = "tomato.png",isChecked= false});
                veggies.Add(new Item { Name = "Romaine Lettuce", Type = "Vegetable", Image = "lettuce.png",isChecked=false });
                veggies.Add(new Item { Name = "Zucchini", Type = "Vegetable", Image = "zucchini.png" , isChecked  = false});
                listview.ItemsSource = veggies;
            }
    
            private void Button_Clicked(object sender, EventArgs e)
            {
                var b = (Button)sender;
                var ob = b.CommandParameter as Item;
               if (ob != null)
               {
                    // retrieve the value from the ‘ob’ and continue your work.
                    System.Diagnostics.Debug.WriteLine("clicked object = " + ob.Name);
               }
    
            }
    
            private void CheckBox_CheckChanged(object sender, EventArgs e)
            {
                var checkbox = (Plugin.InputKit.Shared.Controls.CheckBox)sender;
                var ob = checkbox.BindingContext as Item;
    
                if (ob != null)
                {
                    System.Diagnostics.Debug.WriteLine("isChecked = " + ob.isChecked  + "<--->  Name = " + ob.Name +"<--->  Type = " + ob.Type );
                    if (ob.isChecked)
                    {
                        selectedItems.Add(ob);
                    }
                    else {
                        // remove the item
                    }
                }
            }
        }
    

    Item.cs

    public  class Item
        {
            public string Name { get; set; }
            public string Type { get; set; }
            public string Image { get; set; }
    
            public bool isChecked { get; set; }//This field indicates whether or not it is selected
        }
    

    Note:I defined a list selectedItems as the list of selected items.

      public List<Item> selectedItems;
    

    And when we check a item, then we can add it to the selectedItems and we can also remove it from the selectedItems when unchecking it.

       private void CheckBox_CheckChanged(object sender, EventArgs e)
            {
                var checkbox = (Plugin.InputKit.Shared.Controls.CheckBox)sender;
                var ob = checkbox.BindingContext as Item;
    
                if (ob != null)
                {
                    System.Diagnostics.Debug.WriteLine("isChecked = " + ob.isChecked  + "<--->  Name = " + ob.Name +"<--->  Type = " + ob.Type );
                    if (ob.isChecked)
                    {
                        selectedItems.Add(ob);
                    }
                    else {
                        // remove the item
                    }
                }
            }
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, May 27, 2020 6:58 AM
  • User394867 posted

    Thank You @jezh This solution worked for me :)

    Wednesday, May 27, 2020 7:24 AM
  • User371688 posted

    It's my pleasure to help you. Have a nice day. :)

    Wednesday, May 27, 2020 7:31 AM