How to include content for UseSafeArea for forms.iOS project

1 min read

iOS 11 has introduced a few new visual design updates like including safe area layout guides and large titles. If you run application on an iPhone X then top area will be cropped. This article explains that how we can use this safe area.

Step 1: Create image editor sample with all necessary assemblies.

Step 2: Create a platform specific code for use the safe area layout and set UseSafeArea value as true.

The following code snippets illustrates the ways to this method,

using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
 
namespace ImageEditor_GettingStarted
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();        
             
        editor.Source=ImageSource.FromResource("ImageEditor_GettingStarted.Image.jpg");
 
            On<Xamarin.Forms.PlatformConfiguration.iOS>().SetUseSafeArea(true);
        }
       }
    }

Or alternatively in XAML

Xaml

 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ImageEditor_GettingStarted"
             xmlns:imageeditor="clr-namespace:Syncfusion.SfImageEditor.XForms;assembly=Syncfusion.SfImageEditor.XForms"
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" 
             ios:Page.UseSafeArea="true"
             x:Class="ImageEditor_GettingStarted.MainPage">

Screenshot:

Before

After

Did you find this information helpful?

Yes

Comments (0)

How to include content for UseSafeArea for forms.iOS project

Access denied