SFpopup arrow indicator and overlay mode

[Fabio Giacomelli]

Hello, I'm using the sfpopup component because I need to achieve a result like this:

I see that the Syncfusion popup offers a lot of customizable properties but I didn't found the possibily to show an arrow that indicate a control in the page.

Can you help me to do it?

Another question is: I see that SFPopup give to the content under the popup a shadow: is it possible to remove it?

[Karthikraja Kalaimani]

Hi Fabio,

Thanks for contacting Syncfusion support,

Query 1 : To show an arrow that indicate a control in the page by using PopupView

Currently we don’t have support for the your requirement “ToolTip based PopupView” in Xamarin Forms. So we are checking the feature possibility for the same and we will update further details on 24^th December 2019.

Query 2 : I see that SFPopup give to the content under the popup a shadow: is it possible to remove it?

Your requirement can be achieved by using OverLayColor of PopupStyle. Please refer the below code example and UG link.


 

[XAML] 

<sfPopup:SfPopupLayout x:Name="popUpLayout">
 <sfPopup:SfPopupLayout.PopupView>
<sfPopup:PopupView>
 <sfPopup:PopupView.PopupStyle>
<sfPopup:PopupStyle OverlayColor="Red" OverlayOpacity="0.2">
 </sfPopup:PopupStyle>
</sfPopup:PopupView.PopupStyle>
</sfPopup:PopupView>
</sfPopup:SfPopupLayout.PopupView>
 </sfPopup:SfPopupLayout> 

 

UG link : https://help.syncfusion.com/xamarin/popup/styles?cs-save-lang=1&cs-lang=csharp#styling-overlay-background 

Regards, 

Karthik Raja 

[Deepika Balasubramaniyan]

Hi Fabio Giacomelli, 

 

Thank you for contacting Syncfusion support. 

 

Regarding Sfpopup arrow indicator:

We have analyzed your query “Sfpopup with arrow indicator”. Currently SfPopupLayout don’t have support for arrow indicator.  Based on provided information your requirement can be achieved by enabling following settings for PopupView.     1.       ShowHeader = false  2.       ShowFooter = false   3.       PopupView BackgroundColor to Transparent   4.       BorderThickness= 0.   5.       And load the desired View inside PopupView ContentTemplate     Please refer the  following code snippet to achieve your requirement.    [C#]      DataTemplate template = new DataTemplate(() =>              {                  StackLayout stackLayout = new StackLayout();                  stackLayout.Spacing = 0;                  stackLayout.Padding = 0;                  Label label = new Label();                  label.BackgroundColor = Color.SkyBlue;                  label.Text = "This is SfPopuPlayout Displaying the Popup in Type B";                  stackLayout.Children.Add(label);                  return stackLayout;                });                popupLayout.PopupView.ContentTemplate = template;              popupLayout.PopupView.ShowHeader = false;              popupLayout.PopupView.ShowFooter = false;              popupLayout.PopupView.ShowCloseButton = false;              popupLayout.PopupView.PopupStyle.BorderThickness = 0;              popupLayout.PopupView.BackgroundColor = Color.Transparent;              popupLayout.PopupView.HeightRequest = 100;              popupLayout.PopupView.WidthRequest = 200;      We have prepared the sample for the same.  Sample link : https://www.syncfusion.com/downloads/support/forum/150096/ze/Popup_Demo2-1928689119.zip

Regarding Remove the Popup content shadow

Popup content shadow can be removed by setting PopupView BackgroundColor to Transparent . Please refer the following code snippet to achieve your requirement.    [C#]                popupLayout.PopupView.BackgroundColor = Color.Transparent;

 

 

Regards, 

Deepika. 

[Fabio Giacomelli]

Thank you for your reply, I've been able to remove the background overlay using the specific option.

About the custom layout, I was able to create what I need, but my main concern is that using an image as indicator, I have to manually specify the margin where to place it, and this could be very difficult when I want that the popup appears near to a certain control (with ShowRelativeToView).

EDIT: I tried a lot of ways to correctly position the popup in a page, but I can't obtain the result I need neither with absolute positioning nor with relativeToView way.

I explain better: I'm using a Shell Page with a TabBar inside. I want that my popup is perfectly positioned over the last element of the tabbar, you can see here the component of the page:

and I need that my popup is positioned in this way:

I tried to use both the ways suggested in the official documentation:

1- with absolute position:

The problem for me is that with different devices I can have different screen sizes, so I can't simply position the popup i.e at X = 100, Y = 400, because it will be rendered in different ways on different devices. Probably the best idea could be to position the popup at "height of page - height of tabBar" as Y, and I tried to do it creating a custom renderer for the shell component that measures the tabBar size, but if I do this: 

              popupLayout.Show(200, Application.Current.MainPage.Height - heightOfTabBar);

the popup is not correctly positioned and I can't understand why. 

2- with relative position:

I tried to position the element at the bottom of my scrollview, applying a negative margin 

popupLayout.ShowRelativeToView(scrollRoot, RelativePosition.AlignBottomRight, double.NaN, -heightOfTabBar); 

but it doesn't work, probably because the scrollview continue under the tabBar on the page. I can't use an element in the page because with different size screen I can't locate an element that is always exactly near the tabBar icon that I need, and I can't use the navBar because in the page where I declared the popup the tabBar is not declared (it's a contentpage and the tabBar is in an external container)

So, what can I do to achieve my requirement?

Thank you

[Karthikraja Kalaimani]

Hi Fabio,

Thank you for your update.

Currently we are validating your requirement “ to show a popup on relative to the view and show a popup on give x and y position on Shell Page , we will update further details on 14^th Jan 2020. We appreciate your patience until then.

Regards, 

Karthik Raja 

[Pradeep Kumar Balakrishnan]

Hi Fabio, 

 

Thanks for your patience.   

  

We are still working on the requested requirement “Show a popup on relative to the view and show a popup on give x and y position on Shell Page” in Xamarin forms. and we need one more business day to complete it and we will update you with the details on January 17,2019.  

  

We appreciate your patience until then.   

 

Regards, 

Pradeep Kumar Balakrishnan 

[Balasubramani Sundaram]

Hi Fabio, 

 

Thank you for your patience,  

 

Based on your provided details we have analysis about your requirement of showing the popup above the tab bar last item. Your requirement can be achieved by using the “Absolute Positioning” in SfPoupLayout. In android and iOS device the pixel will vary based on the density, so we must consider the density to measure bounds to show the popup above on it.  

 

Please refer the below sample and code snippet,  

 

Code snippet [C#],  

[App.Shell.cs] 

 

protected override void LayoutChildren(double x, double y, double width, double height) 

{ 

    if (popupLayout.IsOpen) 

        popupLayout.IsOpen = false; 

 

    var density = DependencyService.Get<IDisplayInfo>().GetDisplayDensity(); 

    // Default value for tabbar height is 95 

    popupLayout.Show(Shell.Current.Bounds.Right, (Shell.Current.Bounds.Bottom - 95 * density)); 

 

    base.LayoutChildren(x, y, width, height); 

} 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PopupDemo_Shell2127378713 

 

We hope this helps. Please let us know, if you need any further assistance. 

 

Regards,
Balasubramani Sundaram. 

[Fabio Giacomelli]

So, we tested your suggestion, overriding the LayoutChildren method in the page where we are using the popup. 

We have these results:

On a Xiaomi Mi A3, with resolution of 1560 * 720 and Density = 2

At the first page appearing, the popup is not positioned at the right place, is too down: