We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to handle click action with tap command in Xamarin.Forms ListView (SfListView)

Platform: Xamarin.Forms |
Control: SfListView |
Published Date: July 11, 2020 |
Last Revised Date: July 11, 2020

You can add button inside ListViewItem and handle both ItemTapped and Button click action in Xamarin.Forms SfListView.

XAML

Load Button control inside the SfListView.ItemTemplate and bind SfListView.TapCommand and Button.Command.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListViewXamarin"
             xmlns:sflistview="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             x:Class="ListViewXamarin.MainPage">
    <ContentPage.BindingContext>
        <local:AccordionViewModel/>
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <Grid x:Name="mainGrid" BackgroundColor="#F0F0F0" Padding="4">
            <sflistview:SfListView x:Name="listView" AutoFitMode="DynamicHeight" ItemsSource="{Binding ContactsInfo}" SelectionMode ="None" TapCommand="{Binding ItemTappedCommand}" IsScrollBarVisible="False">
                <sflistview:SfListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Padding="2" Margin="1" x:Name="viewCell" BackgroundColor="#F0F0F0" >
                            <Frame x:Name="frame" CornerRadius="2" Padding="1" Margin="1" OutlineColor="White">
                                    ...
                                                <Label Grid.Row="0" LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}" FontSize="16"/>
                                                <Label Grid.Row="1" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding CallTime}" FontSize="12"/>
                                                <Button Grid.Row="2" Text="Details" x:Name="button" Command="{Binding Source={x:Reference listView}, Path=BindingContext.ButtonCommand}" CommandParameter="{Binding .}"/>
                                            </Grid>
                                            <Grid Grid.Row="0" Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center">
                                                <Image Source="{Binding PhoneImage}" Opacity="0.60" HeightRequest="20" WidthRequest="20" HorizontalOptions="Center" VerticalOptions="Center" />
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                    <Grid IsVisible="{Binding IsVisible, Mode=TwoWay}" ColumnSpacing="0" RowSpacing="0" Grid.Row="1" BackgroundColor="White"
                            HorizontalOptions="FillAndExpand" Padding="5" VerticalOptions="FillAndExpand">
                                    ...
                                    </Grid>
                                </Grid>
                            </Frame>
                        </Grid>
                    </DataTemplate>
                </sflistview:SfListView.ItemTemplate>
            </sflistview:SfListView>
        </Grid>
    </ContentPage.Content>
</ContentPage>

C#

Expand the Accordion view in the TapCommand method and display the contact details in the ButtonCommand method.

public class AccordionViewModel
{
    public ObservableCollection<Contact> ContactsInfo { get; set; }
    internal Contact TappedItem { get; set; }
    public Command<object> ButtonCommand { get; set; }
    public Command<object> ItemTappedCommand { get; set; }
 
    public AccordionViewModel()
    {
        ButtonCommand = new Command<object>(OnButtonTapped);
        ItemTappedCommand = new Command<object>(OnItemTapped);
    }
 
    private void OnItemTapped(object obj)
    {
        var ItemData = (obj as Syncfusion.ListView.XForms.ItemTappedEventArgs).ItemData as Contact;
        if (this.TappedItem == null)
        {
            //Expands when tap on the item at first.
            ItemData.IsVisible = true;
            this.TappedItem = ItemData;
        }
        else
        {
            if (ItemData != this.TappedItem)
            {
                //Expands when tap on the another item.
                this.TappedItem.IsVisible = false;
                ItemData.IsVisible = true;
                this.TappedItem = ItemData;
            }
            else
            {
                this.TappedItem.IsVisible = false;
                this.TappedItem = null;
            }
        }
    }
 
    private void OnButtonTapped(object obj)
    {
        var item = obj as Contact;
        App.Current.MainPage.DisplayAlert(""+item.ContactName, "" + item.CallTime, "Ok");
    }
}

Output

Demo for handling ItemTapped and Button click action in Xamarin.Forms SfListView.

View sample in GitHub

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile