SfPopupLayout show center top relative an another control

[Aprile Salvatore]

Hi guys,

I need to create a popup that is centerd relative to a center button of tabview as you can see in this image:

In my xamarin project I create a popup control and i want to show centering using this function:

        public void Show(View relativeView, double pageWith)

        {

            double startPoint = (pageWith - popupLayout.PopupView.WidthRequest) / 2;

            popupLayout.ShowRelativeToView(relativeView, RelativePosition.AlignTop, -startPoint, 0);

        }

The problem is that the behavior of the ShowRelativeToView is completly not deterministic !!!!

Indeed I run the application on the screen with 1440x3040 and the result seems correct 

if I run the SAME code on screen with 720x1024 the result is 

I try to consider the effective screen size to calculate the exactly center of screen but for our api not wrong.

The popup view witdh request is always 250 

Is there a way to implement an algorith to show centered the popup indipendent of the screen size?

NB: as relative view I pass the instance of CenterButtonView part of SfTabView that compare below. As pageWith parameter I pass a width of SfTabView

This is the code of the caller

 public ICommand CenterClick

        {

            get

            {

                return new Command(async (x) =>

                {

                    if (x != null)

                    {

                        _centerButtonMenu.Show(x.CenterButtonView, x.Width, (clicked) =>

                        {

                            Debug.WriteLine("Clicked : " + clicked);

                        });

                    }

                });

            }

        }

[Pradeep Kumar Balakrishnan]

Hi Aprile, 

 

Thank you for using Syncfusion controls. 

 

Currently, we are checking on the reported issue “Popup view is not displayed to center on relative to another view in all the display resolution.” We will validate and update further detail on or before February 19, 2021. We appreciate your patience until then.  

 

Regards, 

Pradeep Kumar B 

[Pradeep Kumar Balakrishnan]

Hi Aprile, 

 

Thank you for your patience. 

 

Refer to the following code snippet to center the popup view relative to TabView CenterButton x position is calculated based on TabView and popup view size.  

 

Here we have calculated the x position respective to TabView and calculate the current popup view x position relative to TabView CenterButton then difference between this two is absolute x value to subtract to popup view x position. 

 

Code Snippet: 

private void TapGestureRecognizer_Tapped(object sender, EventArgs e) 

{ 

    this.popupLayout.PopupView.WidthRequest = 250; 

 

    //// Calculating center position based on tabview width and popup view width. 

    var centerPostionToScreen = (tabView.Width - this.popupLayout.PopupView.WidthRequest) / 2; 

 

    //// Default x position where popup view is going to layout. 

    var popupCurrentX = (tabView.Width - tabView.CenterButtonSettings.Width) / 2; 

 

    //// Calculating difference value to center the popup view from its current x position. 

    var startPoint = popupCurrentX - centerPostionToScreen; 

    popupLayout.ShowRelativeToView(tabView.CenterButtonView, RelativePosition.AlignTop, -startPoint, 0); 

} 

 

We hope that this solution will helps you, kindly revert us if you have any concern.  

 

Regards, 

Pradeep Kumar B