Positioning the SfPopup at a Point in a View using ShowAsync

[Daniel Travison]

I'm attempting to show SfPopup and a specific point in a view. (i.e., I'd like the upper left corner of the popup to be at the specified point).

I'm creating an SfPopup and configuring it with AbsoluteX/AbsoluteY set to the desired location and setting RelatedView to the view containing the location.  This consistently displays the popup with the lower left corner at the specified location.

I am not embedding an instance of the popup in the view because I want to be able to do this for arbitrary views.

I've also tried AlignTop and AlignBottom with no change in behavior and the left/right alignments move the popup to the edge of the view.

The contents of a given usage contains dynamic content so I can't hard code the popup size and adjust the point to correct this issue.

Is this supported? If so, what am I missing?

Thanks.

[Jayashree Ravishankar]

Hi Daniel Travison,

We have checked the reported query. The upper-left corner of the popup is positioned using the AbsoluteX and AbsoluteY values as expected.

In the example below, the popup is displayed relative to a button with the AlignBottom setting, and AbsoluteX and AbsoluteY are set to 20. The popup is positioned relative to the button based on these coordinates.

Please refer to the attached code snippet and screenshot:

 <StackLayout>

 

         <Button x:Name="btn" WidthRequest="200" HorizontalOptions="Center" VerticalOptions="Center"                Text="ShowPopup" Clicked="Show_Popup"/>

        

     <popup:SfPopup HeaderTitle="MainWindow"

 x:Name="popup"

 ShowFooter="True"

 ShowCloseButton="False" AbsoluteX="20" RelativePosition="AlignBottom" AbsoluteY="20" RelativeView="{x:Reference btn}">

    </popup:SfPopup>

 </StackLayout>

 

  private async void Show_Popup(object sender, EventArgs e)

  {

      popup.IsOpen = true;

  }

To better understand your exact requirement, it would be helpful if you could provide a required UI screenshot and a sample that illustrates the specific scenario. This will enable us to offer a more accurate solution as soon as possible.

Regards,

Jayashree

Attachment: popupwindows_4968db21.zip

[Daniel Travison]

When I specify AlignBottom, the popup always aligns with the bottom of view.  The AbsoluteX is honored but not the AbsoluteY.  I see similar behavior with the other options.

If I don't explicitly set RelativePosition, the bottom of the popup is placed at the top-right location of the point.

There are two differences between your example and what I am trying to do.

Example:

1: The button is used as the relative view

2: The SfPopup is embedded in the containing page.

Note that I use the same model as the example in other places and it works as expected (i.e., logically attaching a popup to a button).

My Usage:

1: Page.ContentView is used as the relative view.

2: SfPopup is created dynamically instead of embedding.

In short, I'm trying to position a popup at an absolute position within a view's bounding rectangle versus

a position relative to an edge.  Any use of RelativePosition appears to push the popup to the associated edge.

The attached zip contains two images:

1: PointWithAlignBottom,png - Uses AlignBottom - the popup is aligned at the bottom of the view.

2: PointWithNoRelativePosition.png - Does not explicitly set RelativePosition.

As far as example code, I'm working on a prototype in a private repo since I'm not ready to share it.  I can grant read access to anyone you wish. If that doesn't work, I'll make it public.

Thanks,

Dan.

Attachment: RelativePositionImages_7c206619.zip

[Jayashree Ravishankar]

Hi Daniel Travison,

 

We have reviewed your requirement. The default value for RelativePosition is AlignTop. Since ContentView acts as the relative view in your case, setting RelativePosition to AlignBottom will cause the popup position to be calculated from the bottom left corner of the relative view, along with AbsoluteX and AbsoluteY. If any part of the X or Y position extends beyond the view, the popup will adjust to fit within the screen, correcting the position accordingly.

 

We have prepared a simple sample for you. Please refer to our sample to understand the popup's position calculations.

 

To better understand your requirement, could you please provide a reference for the popup's actual position and your expected position (you can draw the popup on the screen where you'd like it to appear)? This information will help us find a solution as quickly as possible.

Attachment: PopupMaui_36194357.zip

[Daniel Travison]

I've created a sample and associated README.md to clarify the issue I'm seeing.

The sample is based on the PopupMaui_36194357.zip with two changes:

1: The buttons have been refactored to use a PopupCommand list and an associated DataTemplate.

2: A TapGestureRecognizer (Secondary button) has been added to MainPage to show the popup at the tap point.

NOTE: The README.md has an image showing the displayed popup and the location of the tap used when setting AbsoluteX and AbsoluteY.

DanTravison/SfPopupPlacement: Provides an example of a Syncfusion SfPopup placement at a point in a View. (github.com)

[Jayashree Ravishankar]

Hi Daniel Travison,

Thank you for the sample and details. We now understand your requirement.

To show the popup at the tap point, you can directly set the tap points to the StartX and StartY properties.

Please refer the following code snippet:

 void OnTapped(object? sender, TappedEventArgs e)

 {

     if (sender is View view)

     {

         Point? point = e.GetPosition(view);

         if (point.HasValue)

         {

             var sfPopup = new SfPopup();

             sfPopup.PopupStyle.CornerRadius = 0;

             sfPopup.StartX = (int)Math.Round(point.Value.X);

             sfPopup.StartY = (int)Math.Round(point.Value.Y);

             sfPopup.Show();

         }

     }

 }

Please let us know if you have any other queries.

[Daniel Travison]

This is exactly what I need.

Perhaps this could be called out better in the online docs.  I completely missed these properties when digging into ShowAsync and did not see any references to it in either the Getting Start, or Popup Positioning pages.  

Perhaps one of the pages could call this out.

Popup Positioning in .NET MAUI Popup control | Syncfusion

Getting Started with .NET MAUI Popup control | Syncfusion

Thanks,

Dan.

[Jayashree Ravishankar]

Daniel Travison

 

We are glad to hear that our response meets your requirements. Please don't hesitate to reach out if you need any further assistance—we're always happy to help.

 

We will consider your request and include the details for these APIs in the User Guide in our upcoming release.