{"id":34078,"date":"2017-11-03T14:31:34","date_gmt":"2017-11-03T21:31:34","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=34078"},"modified":"2019-04-04T09:00:27","modified_gmt":"2019-04-04T16:00:27","slug":"making-ios-11-even-easier-xamarin-forms","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/making-ios-11-even-easier-xamarin-forms\/","title":{"rendered":"Making iOS 11 Even Easier with Xamarin.Forms"},"content":{"rendered":"

\t\t\t\tiOS 11 has introduced a few new visual design updates that you may want to take advantage of, including safe area layout guides and large titles. For Xamarin.iOS developers, we\u2019ve recently published an iOS 11 guide for updating your Xamarin.iOS apps<\/a> and articles for safe area<\/a> and large titles<\/a>. Of course, since Xamarin.Forms is a layer running on top of Xamarin.iOS, all of these features are immediately available to you!<\/p>\n

This post will show you how we\u2019re going a step further to make using these features even easier for you directly in Xamarin.Forms.<\/p>\n

Using SafeArea layout in iOS 11<\/h2>\n

To ensure your content appears in the visible area of the device screen, especially to avoid the “notch” when running landscape on an iPhone X, you\u2019ll want to take advantage of the safe area layout guides that iOS 11 defines. We recently wrote<\/a> about how this is used in Xamarin.iOS when creating auto layout constraints.<\/p>\n

As always, in Xamarin.Forms you can reach into the Xamarin.iOS platform code to get a reference to those values and update your views accordingly.<\/p>\n

But we want to make it even easier<\/em> for you. In the 2.4.0 Service Release 4, we’re introducing a platform-specific<\/a> for pages to use the\u00a0safe area layout guides to create appropriate insets in your pages. To opt-in, add this to your ContentPage constructor:<\/p>\n

using Xamarin.Forms.PlatformConfiguration.iOSSpecific;\nusing Xamarin.Forms;\n\nnamespace iPhoneX \n{\n\tpublic partial class ItemsPage : ContentPage\n\t{\n\t\tpublic ItemsPage()\n\t\t{\n\t\t\tInitializeComponent();\n\n\t\t\tOn<Xamarin.Forms.PlatformConfiguration.iOS>().SetUseSafeArea(true);\n\t\t}\n\t}\n}<\/pre>\n
Or alternatively in XAML:<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?> \n<ContentPage xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\" \n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\" \n    xmlns:ios=\"clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core\" \n    ios:Page.UseSafeArea=\"true\" ><\/pre>\n
On iOS 11 and newer, the safe area bounds defined by Apple will be used to set Padding<\/code> for the content of your page layouts. Note, this will override Padding<\/code> values you may have previously set. Enable this\u00a0platform-specific on every page where you\u00a0require it.<\/p>\n
\"\"<\/p>\n
Xamarin.Forms provides some sensible defaults for the inset values, but if you want finer control you should either set the padding yourself in the constructor or retrieve the Thickness<\/code> values from SafeAreaInsets()<\/code> and adjust the values to\u00a0set the padding on your views to meet your needs in the OnAppearing<\/code> method.<\/p>\n
protected override void OnAppearing()\n{\n\tbase.OnAppearing();\n\n\tvar safeInsets  = On<Xamarin.Forms.PlatformConfiguration.iOS>().SafeAreaInsets();\n\tsafeInsets.Left = 24;\n\tthis.Padding = safeInsets;\n}<\/pre>\n
Large Titles\"\"<\/h2>\n
Part of the new iOS 11 update is support for a\u00a0larger display of your titles that appear in the navigation bar. As\u00a0with safe areas, you can now use a platform-specific to opt-in to this visual design pattern. When enabled, the title that usually appears in the center of the navigation bar will appear left aligned and, of course, larger. In landscape the title will return to the center to optimize the\u00a0view visible for content.<\/p>\n
The first step is to set your title preference either on the NavigationPage<\/code> or the ContentPage<\/code>.<\/p>\n
On<Xamarin.Forms.PlatformConfiguration.iOS>().SetPrefersLargeTitles(true);<\/pre>\n
Now all pages within that navigation\u00a0page will display large titles. To control this at the ContentPage<\/code> level, you may set the preference there. In this snippet, the preference is set to never use large titles:<\/p>\n
public partial class ItemsPage : ContentPage\n{\n    public ItemsPage()\n    {\n        InitializeComponent();\n        On<Xamarin.Forms.PlatformConfiguration.iOS>().SetLargeTitleDisplay(LargeTitleDisplayMode.Never);\n    }\n    ...\n}<\/pre>\n
The SetLargeTitleDisplay<\/code> method takes three options:<\/p>\n