Articles in this section
Category / Section

How to handle the button event when ItemTapped event is triggered in SfListView for Android platform?

1 min read

SfListView allows to handle the button event when ItemTapped event is triggered in for Android platform . Due to some limitations in Xamarin Forms Android when button is clicked ItemTapped is also triggered along with Button Clicked event. To overcome this lag, use TapGestureRecognizer for ItemTapped.

Following example illustrates the usage of TapGestureRecognizer for ItemTapped event in group header which consists both Button Clicked event (To display number of contacts in respective group) and ItemTapped (To Expand/Collapse groups).

XAML

<ContentPage xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             xmlns:dataSource="clr-namespace:Syncfusion.DataSource;assembly=Syncfusion.DataSource.Portable">
  <ContentPage.Content>
    <Grid>
      <listView:SfListView x:Name="listView"
                           ItemsSource="{Binding ContactsInfo}"
                           AutoFitMode="Height"
                           AllowGroupExpandCollapse="False">
        <listView:SfListView.GroupHeaderTemplate>
          <DataTemplate>
            <Grid BackgroundColor="Teal">
              <Grid.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
              </Grid.GestureRecognizers>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
              </Grid.ColumnDefinitions>
              <Label Text="{Binding Key}"
                     FontSize="22"
                     FontAttributes="Bold"/>
              <StackLayout Grid.Column="1" HorizontalOptions="End" VerticalOptions="End">
                <Button Clicked="Button_Clicked"
                        Text="count"
                        HorizontalOptions="End"
                        VerticalOptions="End"/>
              </StackLayout>
            </Grid>
          </DataTemplate>
        </listView:SfListView.GroupHeaderTemplate>
      </listView:SfListView>
    </Grid>
  </ContentPage.Content>
</ContentPage>

 

C#

public partial class TappingMainPage : ContentPage
    {
        public TappingMainPage()
        {
            InitializeComponent();
            listView.DataSource.GroupDescriptors.Add(new GroupDescriptor()
            {
                PropertyName = "ContactName",
                 KeySelector = (object obj1) =>
                 {
                     var item = (obj1 as Contacts);
                     return item.ContactName[0].ToString();
                 },
            });
            listView.DataSource.SortDescriptors.Add(new SortDescriptor()
            {
                PropertyName = "ContactName",
                Direction =ListSortDirection.Ascending
            });
        }
        private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
        {
            var grid = sender as Grid;
            var group = grid.BindingContext as GroupResult;
            if (group.IsExpand)
                listView.CollapseGroup(group);
            else
                listView.ExpandGroup(group);
        }
 
        private void Button_Clicked(object sender, EventArgs e)
        {
            var button = sender as Button;
            var group = button.BindingContext as GroupResult;
            DisplayAlert("Count",group.Count.ToString()+" "+"Contacts in the group", "Ok");
        }
    }

 

Following screenshot shows the output to handle button events using tap gestures for group headers.

output to handle button events

 Click here to download sample.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied