Button/Check box with List item in Xamarin Forms ListView

Hi Guys, here i am writing a new blog for 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 button or a checkbox 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.

List Item Button

–>  Let’s start with implementing a Button for each item in Xamarin Forms Listview. 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.

           }

 }

List Item Check Boxes

–>  Now let’s take example of using check box in the same way:

  • 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 checkbox state changed event in cs:

Create the below method in your code behind which will gets called wwheneverany check box in the ListView gets updated on tap by uthe ser.

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 above both example the process of attaching the current object from the source remains same like –CommandParameter=”{Binding .}”

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

Related Posts

Leave a comment