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

Subscribe to this post

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,

Reply | Reply with quote

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.

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Popup_Demo967407058

Regards,

Jagadeesan

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US