Image clicked (or ItemTapped) event handler in 2D listview

[Francis Tang]

I'm a newbie and have been trying to modify a sample from this link to include a image clicked (or ItemTapped) event handler to navigate to another page:

https://www.syncfusion.com/kb/9980/how-to-display-items-with-multiple-columns-in-the-xamarin-forms-listview

Any help will be much appreciated.

Thanks very much.

Francis

[Sangeetha Raju]

Hi Francis,

Thank you for contacting Syncfusion support. 

  

We have modified the sample based on your requirement by using ItemTapped event, please refer the following code snippet.  

 
[Xaml] 

<syncfusion:SfListView x:Name="listView" Grid.Row="1" 

                               ItemsSource="{Binding Gallerynfo}"  

                               ItemTapped="ListView_ItemTapped" 

                               SelectionMode="None"  

                               ItemSize="150" 

                               ItemSpacing="3"/> 

 
[C#] 

private async void ListView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e) 

{ 

   await Navigation.PushAsync(new MainPage()); 

} 

  

You can refer our User Guide documentation for the same by the following link, 

  

UG Link : https://help.syncfusion.com/xamarin/sflistview/working-with-sflistview#tapped-event  

  

We have attached the sample for your reference, please find the sample from the following link. 

  

Sample Link : https://www.syncfusion.com/downloads/support/forum/148615/ze/148615-1006928328  

  

We hope this helps. Please let us know if you would require any further assistance. 

  

Regards, 

Sangeetha Raju. 

[Francis Tang]

Hi Sangeetha,

Thanks for your quick reply and solution. I managed to identify which image was clicked based on another sample:

        private void ListView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e)

        {

            //await Navigation.PushAsync(new MainPage());

            var fileName = e.ItemData as ListViewGalleryInfo;

            Application.Current.MainPage.DisplayAlert("GridData", "The name of the image is " + fileName.ImageTitle, "Ok");

        }

(1) For the above approach, can one directly pick up the actual image filename without resorting to "ListViewGalleryInfo"?

(2) As another approach, can we actually put in all images via the relevant XAML page rather than using binding? And can we then identify which one was clicked using the code behind?

My aim is simply by identifying which thumbnail image was being clicked and then to push over the corresponding following page using Navigation.PushAsync 

Thanks very much again for your help.

Francis

[Sangeetha Raju]

Hi Francis, 

  

We would like to inform you that you can achieve your requirement by passing the binding context of the tapped item to the Navigation page as like below code snippet, 

  

private async void ListView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e) 

{ 

   var newPage = new MainPage(); 

   newPage.BindingContext = e.ItemData; 

   await Navigation.PushAsync(newPage); 

} 

  

We have modified the sample based on your requirement. Please find the sample from the following link. 

  

Sample Link: https://www.syncfusion.com/downloads/support/forum/148615/ze/148615-163125877  

  

We hope this helps. Please let us know if you would require any further assistance. 

  

Regards, 

Sangeetha Raju. 

[Francis Tang]

Hi Sangeetha,

Thanks again for your help.

Actually, I need to first parse the filename and then decide which page to push:

Image #1 ==> Page #1

Image #2 ==> Page #2

Image #3 ==> Page #3

.

.

.

etc.

Each pushed page would be with a different content. I think I can extract the filename from e.ItemData and then use a "switch" logic to push each corresponding page.

Sorry to ask again: can we actually put in all images via the relevant XAML page rather than using binding and then identify which one was clicked using the code behind?

Thank you.

Francis

[Sangeetha Raju]

Hi Francis, 

 
Thank you for the update. 

We would like to inform you that you can navigate to the different page based on the model data as in the following snippet. Moreover, you can’t put all the images in the Xaml using SfListView, Instead you can use StackLayout to achieve your requirement. 

private async void ListView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e) 

{ 

   if ((e.ItemData as ListViewGalleryInfo).ImageId == "1") 

   { 

      var newPage1 = new MainPage1(); 

      newPage1.BindingContext = e.ItemData; 

      await Navigation.PushAsync(newPage1); 

   } 

   else if ((e.ItemData as ListViewGalleryInfo).ImageId == "2") 

   { 

      var newPage2 = new MainPage2(); 

      newPage2.BindingContext = e.ItemData; 

      await Navigation.PushAsync(newPage2); 

   } 

   else if ((e.ItemData as ListViewGalleryInfo).ImageId == "3") 

   { 

      var newPage3 = new MainPage3(); 

      newPage3.BindingContext = e.ItemData; 

      await Navigation.PushAsync(newPage3); 

   } 

   else 

   { 

      var newPage = new MainPage(); 

      newPage.BindingContext = e.ItemData; 

      await Navigation.PushAsync(newPage); 

   } 

} 

  

We have attached the modified sample for your reference. Please find the sample form the below link. 

  

Sample Link: https://www.syncfusion.com/downloads/support/forum/148615/ze/148615107754985  

  

We hope this helps. Please let us know if you would require any further assistance.  

   

Regards,  

Sangeetha Raju.  

[Francis Tang]

Hi Sangeetha,

Thanks for your continual support. Your help had been great.

Francis

[Gnana Priya Namasivayam]

Hi Francis, 

 

We are glad that given solution meets your requirement. Please let us know if you need any further assistance. 

 

Regards, 

Gnana Priya N