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

How to show a pop up right above or below the selected item in a list view

Thread ID:

Created:

Updated:

Platform:

Replies:

145286 Jun 15,2019 08:42 PM UTC Jun 17,2019 10:36 AM UTC Xamarin.Forms 1
loading
Tags: SfPopup
Hung Ho
Asked On June 15, 2019 08:42 PM UTC

How do I achieve what is shown in the very first page https://help.syncfusion.com/xamarin/sfpopuplayout/overview ? I can't find a working sample for this. All the tutorials are using PopupLayout.Show right in the middle of the screen. I don't want that. I want to show the pop up right above or below the selected item in ListView

1. In ItemSelected(object sender, SelectedItemChangedEventArgs e) , the sender is the ListView itself and the e.SelectedItem is the View Model object. So I can't access the View to be parameter for .ShowRelativeToView. How do I access the selected item View object. Can someone please provide a sample?

2. How do I make SfPopupLayout smart enough to show the popup above the selected item if it's near the bottom of the screen and vice versa?

Thanks,

Jagadeesan Pichaimuthu [Syncfusion]
Replied On June 17, 2019 10:36 AM UTC

Hi Hung Ho, 
  
Thank you for contacting Syncfusion Support. 
  
We have checked your query. 
  
Regarding your first query: “1. In ItemSelected(object sender, SelectedItemChangedEventArgs e) , the sender is the ListView itself and the e.SelectedItem is the View Model object. So I can't access the View to be parameter for .ShowRelativeToView. How do I access the selected item View object. Can someone please provide a sample? 
  
You can achieve your requirement by using SfListView. In ItemTapped event you can get the view. 
  
Refer the below code for reference: 
  
  
var listviewItem = VisualContainer.Children.FirstOrDefault(x => x.BindingContext == e.ItemData) as ListViewItem; 
if (listviewItem != null) 
{ 
               //// You can customize your code here. 
} 
  
  
Regarding your second query: “2. How do I make SfPopupLayout smart enough to show the popup above the selected item if it's near the bottom of the screen and vice versa? 
  
You can achieve your requirement by showing the popup at XY position. 
  
  
private void ListView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e) 
{ 
               if (e.ItemType != ItemType.Record) 
               { 
                              return; 
               } 
  
               var listviewItem = VisualContainer.Children.FirstOrDefault(x => x.BindingContext == e.ItemData) as ListViewItem; 
               if (listviewItem != null) 
               { 
                              //// You can customize your code here. 
               } 
  
               var itemIndex = (this.listView.BindingContext asContactsViewModel).Contactsinfo.IndexOf(e.ItemData as ContactInfo); 
               var visibleLine = this.listView.GetVisualContainer().ScrollRows.GetVisibleLineAtLineIndex(itemIndex); 
               var point = this.listView.Y + visibleLine.ClippedOrigin + visibleLine.Size; 
  
               if (point + 140 <= this.listView.Height + 25) 
               { 
                              this.popupLayout.Show(this.listView.X, this.listView.Y + visibleLine.ClippedOrigin + visibleLine.ClippedSize + this.GetRelativeYPoint("top")); 
               } 
               else 
               { 
                              this.popupLayout.Show(this.listView.X, point - this.GetRelativeYPoint("bottom")); 
               } 
} 
  
  
  
We have prepared a sample based on your requirement and you can download it from the below sample. 
  
Regards, 
Jagadeesan

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