We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Is it possible to use iOS Safe Area with SfPopupLayout.PopupView?

I need to use the iOS Safe Area with the SfPopupLayout to safely display a fullscreen popup in my Xamarin.Forms Project. How can I display a Fullscreen SfPopupLayout.PopupView within the iOS Safe Area?

My ContentPage's XAML includes:

xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" &


But for whatever reason, the popup still doesn't use the iOS Safe Area. I have tried using ios:Page.UseSafeArea="True" on my page's SfPopupLayout and SfPopupLayout.PopupView but I'm having no luck getting my popup to display within the iOS Safe Area.

Is it currently possible to display a fullscreen SfPopupLayout.PopupView within the iOS Safe Area? If so, how?



3 Replies

BS Bryson Scales March 29, 2023 11:10 PM UTC

Also, I would like to add that I do want the popup to fill the entire screen (including the safe area) however, I would like the margins of the popup view to be in alignment with the iOS Safe Area; like the ootb Xamarin Forms Modal Page.

BS Bryson Scales March 30, 2023 12:19 PM UTC

I was able to find a solution to my problem but I'm not sure if there is an easier way to get my expected output. I already have a Dependency Service called IPlatformOpertations that handles platform specific code (ex:// playing sounds or checking if the app is in the foreground) so my approach was to add a "GetSafeArea" method to my dependency service that would get all the safe area thicknesses I plan to use. Next, In my App.xaml.cs, I created 3 static Thickness Properties called SafeTop, SafeBottom, and SafeArea, then in my BaseViewModel class, I added 3 properties that's values are linked (via "{ get; } =" or "=>")  to each of the App.xaml.cs Safe Area Thickness Properties.

Every view model in my project inherits from the BaseViewModel class so I can then get access SafeTop, SafeBottom, and SafeArea anywhere in my application. If I only want to use the top safe area, I can bind my padding to SafeTop. If I only want to use the bottom safe area, I can bind my padding to SafeBottom. And, if I want to use both, I can bind my padding to SafeArea.

After doing this, I noticed that there is an additional issue with the fullscreen SfPopupLayout.PopupView on iOS. A tiny piece of the screen doesn't get filled in at the top of the devices display. The application is being ran on an iOS 14 PRO MAX - iOS 16.2 emulator. View the attachment below.

Attachment: SfPopupSafeAreaIssue_1db8afa3.zip

SV Suja Venkatesan Syncfusion Team March 31, 2023 01:43 PM UTC

Hi Bryson,

We would like to inform you that the region is the default space between the safe area and the notch on the status bar of the iPhone 14 Pro. Please see the picture below for the safe area and status bar height of the iPhone 14 Pro Max.

Reference image:

Graphical user interface

Description automatically generated

Please let us know if you need any further assistance.



Live Chat Icon For mobile
Up arrow icon