Button/Check box with List item in Xamarin Forms ListView

Hi Folks, In this blog we will learn about how we can use the child control event in the listview items, Since there are many scenarios occurred where we required to have either a Xamarin Forms checkbox or a Xamarin Forms button for each item in the list view, achieving the same with Android or xamarin android is quite easy but in xamarin forms many newcomers could not get proper flow for achieving the same functionality. And, that’s why we have listed out the steps you will need to follow to configure Xamarin Forms CheckBox.

We also offer more products and services like IT Change Management.

–>  Let’s start with implementing a Button for each item in Xamarin Forms Listview click event. To implement Xamarin Forms Listview click event, First of we all we need to create a custom view cell for the item(child) view that list may contain like below:   

<ListView x:Name=”Listview” VerticalOptions=”FillAndExpand”>  

<ListView.ItemTemplate>  

            <DataTemplate>  

               <ViewCell>  

                     <StackLayout Orientation=”Horizontal”>  

                       <Label Text=”{Binding ItemName}” HorizontalOptions=”StartAndExpand”  FontSize=”30″></Label>

                       <Button Text=”Click Me” CommandParameter=”{Binding.}” Clicked=”ButtonClicked”></Button>

                   </StackLayout>  

              </ViewCell>

         </DataTemplate>  

     </ListView.ItemTemplate>  

</ListView>  

Here in above xaml code, we created a Stack layout with the label and a button,

button has the property set for the Command parameter and Clicked. Clicked takes the reference for the method in our code behind which will get called when user taps on it, On the other hand, Command parameter will attach the current Bounded context of ItemSource of this list view with this button such that in the Clicked function it will get available as the Event Arguments.

Below are the usage of retrieving the value of the current bound item with that particular button:

Create the below method inside your code behind:

 Public async void ButtonClicked(object sender, System.EventArgs e)

 {

           var b = (Button)sender;

           var ob = b.CommandParameter as <your model class name>;

           if (ob != null)

           {

            // retrieve the value from the ‘ob’ and continue your work.

           }

 }

–>  Now that you know how to implement Xamarin Forms listview click event, let’s take example of using Xamarin Forms Listview with checkbox in the same way:

Go through the below-mentioned steps to understand how to implement Xamarin Forms listview with CheckBox.

• Install the Xamarin.Forms.InputKit Nuget package in you Android and IOS project
• Now declare the xmlns directory for the content page like below:

xmlns:input=”clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit”

• Now use it like below anywhere in your xaml:
• <input:CheckBox Text=”<name>” Type=”Check” Color=”White” BoxBackgroundColor=”Black” TextColor=”Black” HeightRequest=”40″ CheckChanged=”checkbox_CheckChanged” BindingContext=”{Binding .}”/>

Below is the full example with Listview View cell in Xamarin Forms

 <ListView IsVisible=”true” x:Name=”ListView” RowHeight=”50″ CachingStrategy=”RecycleElement” SeparatorColor=”Transparent” BackgroundColor=”Transparent”>

                   <ListView.ItemTemplate>

                       <DataTemplate>

                           <ViewCell>

                               <input:CheckBox Text=”{Binding Name}” Type=”Check” Color=”White” BoxBackgroundColor=”Black” TextColor=”White” HeightRequest=”40″

                                  CheckChanged=”checkbox_CheckChanged” BindingContext=”{Binding .}”/>

                           </ViewCell>

                       </DataTemplate>

                   </ListView.ItemTemplate>

               </ListView>

Now we are ready to use it in the code behind below is the example of how we can achieve the click and listview with checkbox state changed event in cs. The process to achieve listview with CheckBox state changed event is cs is relatively simple with the below-mentioned code.

Create the below method in your code behind which will get called whenever any checkbox in the ListView gets updated on tap by the user.

private void checkbox_CheckChanged(object sender, EventArgs e)

       {

           var checkbox = (CheckBox)sender;

           var ob = checkbox.BindingContext as <your model name>;

           if (ob != null)

           {

               AddOrUpdatetheResult(ob, checkbox);

           }

       }

private void AddOrUpdatetheResult(<your model name> ob,CheckBox checkbox)

    {

        // Check if a particular checkbox is checked or not with below if

       if(checkbox.IsChecked){

        // create your logic further as per the flow of your app and the data of the particular item in Listview can be fetched from the     //‘ob’

       }          

    }

In the above example the process of attaching the current object from the source known as Xamarin Listview binding remains same like –CommandParameter=”{Binding .}”

Link for the Nuget package used in the above example: https://github.com/enisn/Xamarin.Forms.InputKit