1. Home
  2. Forum
  3. Xamarin.Forms
  4. SFpopup arrow indicator and overlay mode

SFpopup arrow indicator and overlay mode

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?


16 Replies
KK Karthikraja Kalaimani Syncfusion Team December 23, 2019 02:03 PM UTC

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 24th 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> 
 

Regards, 
Karthik Raja 


DB Deepika Balasubramaniyan Syncfusion Team December 24, 2019 02:31 PM UTC

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. 


FG Fabio Giacomelli January 9, 2020 06:16 PM UTC

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

KK Karthikraja Kalaimani Syncfusion Team January 10, 2020 02:03 PM UTC

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 14th Jan 2020. We appreciate your patience until then.

Regards, 
Karthik Raja 


PK Pradeep Kumar Balakrishnan Syncfusion Team January 15, 2020 09:39 AM UTC

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 


BS Balasubramani Sundaram Syncfusion Team January 17, 2020 01:58 PM UTC

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); 
} 
 
 
We hope this helps. Please let us know, if you need any further assistance. 
 
Regards,
Balasubramani Sundaram. 


FG Fabio Giacomelli January 24, 2020 10:33 AM UTC

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:



From the second time, it appears to be correct positioned:



On an Emulator, with resolution of 2560*1440 and Density = 3,5



it is completely too up:



and it doesn't change position entering in the page more times.



I also checked that the density value was correctly retrieved, because we are using Xamarin essentials, but also using your way the result doesn't change:



can you help us to solve it?
Thank you


DB Deepika Balasubramaniyan Syncfusion Team January 27, 2020 04:45 PM UTC

Hi Fabio Giacomelli, 
 
We have checked your query “not showing the popup above the tab bar last item” in Xiaomi Mi A1 device and Issue is not replicated in this device. Due to unavailability of Xiaomi Mi A3 device, We are unable to check the issue in that device. So, after checking the issue in Xiaomi Mi A3, we will update the further details on 29th January 2020. 
 
We appreciate your patience until then. 
 
 
Regards, 
Deepika. 


FG Fabio Giacomelli January 27, 2020 04:58 PM UTC

Thank you for your reply, please notice that on Xiaomi Mi A3 the demo works correctly, after the first page appearing.
But on different devices, especially ones with an higher  pixel density (you can try with an emulator as specified in my last post), you can see that the popup position can change a lot from the expected result.
Thank you for your work

KK Karthikraja Kalaimani Syncfusion Team January 28, 2020 02:42 PM UTC

Hi Fabio,

Thank you for the update, 
We have checked the reported issue in mentioned emulator and to overcome this issue please refer to the code example and attached sample.

Code Example, 
….
var statusBarHeight = DependencyService.Get<IDisplayInfo>().GetStatusBarHeight(); 
popupLayout.Show(Shell.Current.Bounds.Right, (Shell.Current.Bounds.Bottom - 300 )+ (statusBarHeight /density) - this.popupLayout.PopupView.PopupStyle.BorderThickness); 
…. 

ScreenShot 
 


FG Fabio Giacomelli January 30, 2020 03:41 PM UTC

Hello, your solution work as expected but on my project it works only after the second page appearing, at the first appearing the popup is not correctly positioned. But I was able to solve it changing the method where I open the popup, now it seems to work also on my solution overriding the .OnAppearing instead of LayoutChildren.

Now I have another question: in your sample you used a fixed value, 300, that is good for your demo but not for me, probably because I have a custom popup layout with a custom size. I found that on ios and Android it works using 2 different values. My question is: what represent this value? If it's the height of popup, can I use a way to calculate it dinamically? (I tried to change the text inside the popup and I noticed that also the value that I have to use needs to change, so I need a way to calculate it because with different languages I can't know how many lines the text will take)

KK Karthikraja Kalaimani Syncfusion Team February 2, 2020 03:19 PM UTC

Hi Fabio, 

Thank you for the update,

We are glad to know that the reported problem has been resolved at your end. That 300 is a default height of the popupview and we regret to tell that currently we don’t have a support to get and calculate the popupview height while initializing the SfPopuplayout.  If you set HeightRequest to PopupView by manually means you can set SfPopupLayout.PopupView.HeightRequest instead of 300. For more details please refer to the below code  example.

Code Example,

 
……
popupLayout.Show(Shell.Current.Bounds.Right, (Shell.Current.Bounds.Bottom – popupLayout.PopupView.HeightRequest )+ (statusBarHeight /density) - this.popupLayout.PopupView.PopupStyle.BorderThickness); 
….. 
 

Regards,
Karthik Raja

FG Fabio Giacomelli February 10, 2020 06:35 AM UTC

Hello,thank you again for your reply.

I read your suggestion to read the height of popup view in order to calculate the position where to open it, and effectively is what I already tried to do.
The problem is that, on Android platform, when I read the HeightRequest value before to open it the property it's still not valorised and its value is -1.

I think that manually setting the property is not possible because I need that the popup changes dinamically its height according to the language I'm using, because the text inside could be of 2 or 3 rows. Can you suggest me how can be managed this situation?




KK Karthikraja Kalaimani Syncfusion Team February 11, 2020 02:25 PM UTC

Hi Fabio,

Thank you for the update.

We regret to tell currently we don’t have a support to position a popup at above the tabs in shell page. By using the RelativeToView method we can place a popup above the tab. So we have logged a feature request to show the popup relative to the view in Shell Page. We will implement this feature in any of our upcoming release.    
   
At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We will let you know when this feature is implemented. We appreciate your patience until then.  

 
 
Regards,
Karthik Raja



FG Fabio Giacomelli March 6, 2020 09:07 AM UTC

Hello, do you have any news about this request? We need a way to position the popup exactly over a certain item of shell menu.
In your last message you told:
By using the RelativeToView method we can place a popup above the tab

What do you mean?
Thank you

SS Sivaraman Sivagurunathan Syncfusion Team March 9, 2020 12:50 PM UTC

Hi Fabio, 
 
Thank you for your update. 
 
We have logged a feature request to “Show the popup relative to the view in Shell Page”. We will implement this feature in any of our upcoming release. You can communicate with us regarding the open features any time using our Feature Report page. 
 
 
Regards, 
Sivaraman S 


Loader.
Up arrow icon