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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

148615 Oct 28,2019 07:35 AM UTC Nov 4,2019 04:55 AM UTC Xamarin.Forms 7
loading
Tags: SfListView
Francis Tang
Asked On October 28, 2019 07:35 AM UTC

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 [Syncfusion]
Replied On October 29, 2019 08:34 AM UTC

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, 
  
  
We have attached the sample for your reference, please find the sample from the following link. 
  
  
We hope this helps. Please let us know if you would require any further assistance. 
  
Regards, 
Sangeetha Raju. 


Francis Tang
Replied On October 30, 2019 05:55 AM UTC

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 [Syncfusion]
Replied On October 31, 2019 08:45 AM UTC

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. 
  
  
We hope this helps. Please let us know if you would require any further assistance. 
  
Regards, 
Sangeetha Raju. 


Francis Tang
Replied On October 31, 2019 09:56 AM UTC

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 [Syncfusion]
Replied On November 1, 2019 09:05 AM UTC

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. 
  
  
We hope this helps. Please let us know if you would require any further assistance.  
   
Regards,  
Sangeetha Raju.  


Francis Tang
Replied On November 2, 2019 12:53 PM UTC

Hi Sangeetha,

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

Francis

Gnana Priya Namasivayam [Syncfusion]
Replied On November 4, 2019 04:55 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

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

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
Live Chat Icon