Making iOS 11 Even Easier with Xamarin.Forms

DavidOrtinauDavidOrtinau USForum Administrator, Xamarin Team, Insider, University Xamurai
edited March 27 in Xamarin Blog

We're making it easier to implement safe area and large titles for iOS 11 in a new service release candidate of Xamarin.Forms.

Read the blog here

Try out the package and let us know your feedback. If testing goes well the next few days, we'll promote this to NuGet shortly.

Comment below.


  • LauriTaimilaLauriTaimila FIBeta ✭✭
    edited November 2017

    Happy to see Large titles getting treatment on Xamarin.Forms. Seems to work otherwise great, but NavigationPage within TabbedPage has issue. Not sure is it something app developer should take care of or should it be part of default behaviour.

    When scrolling up the page in NavigationPage, the title gets smaller as it should. However, bottom of the page gets moved up and navigation page background becomes visible.

    Here is how it looks:

    It's easy to replicate with this simple Forms app:

    `using System;
    using Xamarin.Forms;
    using Xamarin.Forms.PlatformConfiguration.iOSSpecific;

    namespace LargeTitlesWithTabs
    public class App : Application
    public App()
    var navigationPage = new Xamarin.Forms.NavigationPage(new HighPage())
    BackgroundColor = Color.Red

            var tabs = new TabbedPage();
            MainPage = tabs;
    public class HighPage : ContentPage
        public HighPage()
            Title = "Hello World";
            Content = new Xamarin.Forms.ScrollView 
                Content = new BoxView 
                    HeightRequest = 2000, 
                    WidthRequest = 500, 
                    BackgroundColor = Color.Lime 


    Sorry about the code. Can't get the formatting work correctly here. :(

  • @DavidOrtinau said:
    If testing goes well the next few days, we'll promote this to NuGet shortly.

    Hi. When do think the new version will be on nuget?


  • Is it launched or not yet?
    Recently just keep so many version update and making me have to update others third party to suit it.

  • DavidOrtinauDavidOrtinau USForum Administrator, Xamarin Team, Insider, University Xamurai

    We've fixed a ListView issue with HasUnevenRows that was reported on SR4, and we'll investigate the issue raised above. Hope to have this on NuGet asap.

  • @DavidOrtinau Awesome! Keep us posted.

  • BjornBBjornB USMember ✭✭✭
    edited November 2017

    Semms like viewcell has a hardcoded left padding on iOS 11. This is a dealbreaker for all my apps if i cant get around it.
    Posted a comment about it here

    This is the result of code below (nested in a navigationpage with largetitle)

    <ContentPage xmlns=""
                 x:Class="Devent.Apps.Views.TestView" BackgroundColor="Yellow" Title="Please fix">
            <ListView x:Name="List" BackgroundColor="Transparent" HasUnevenRows="True">
                    <StackLayout Padding="10">
                        <Label Text="This is a listview.header"></Label>
                        <Label Text="My stacklayouts padding is 10"></Label>
                        <Label Text="My aligment to the list is awful"></Label>
                        <Label Text="And listitems get a yellow gap to the left"></Label>
                        <Label Text="But only on ios 11"></Label>
                            <StackLayout Padding="10" BackgroundColor="Red">
                                <Label Text="My Stacklayouts backgroundcolor is red" ></Label>
                                <Label Text="My stacklayouts padding is also 10"></Label>
                    <StackLayout Padding="10">
                        <Label Text="This is a listview.footer"></Label>
                        <Label Text="Page has yellow bgcolor"/>
                        <Label Text="Listview bgcolor is transparent"/>
                        <Label Text="If your scroll up, the bottom gets a white bar"></Label>
  • LauriTaimilaLauriTaimila FIBeta ✭✭

    @BjornB said:
    Semms like viewcell has a hardcoded left padding on iOS 11. This is a dealbreaker for all my apps if i cant get around it.

    This is pretty bad indeed. Did you create a bug for this?

  • BjornBBjornB USMember ✭✭✭

    @LauriTaimila said:

    @BjornB said:
    Semms like viewcell has a hardcoded left padding on iOS 11. This is a dealbreaker for all my apps if i cant get around it.

    This is pretty bad indeed. Did you create a bug for this?

    not yet :)

  • DH80DH80 USMember ✭✭

    @BjornB I can confirm this same behavior. Unfortunately the class is internal so we cannot modify it.

  • SebastianKruseSebastianKruse USMember ✭✭✭
    edited November 2017

    Is there any way to apply the safe area only to a child element? I would like to use the safe area for my list view but it is not the root element on that page...

  • varyamereonvaryamereon USMember ✭✭
    edited December 2017

    Have had no joy with safe areas. If I simplify my app to load into a ContentPage and set SetUseSafeAreas to false, the app still shows 'boxed' with black areas to the top and bottom of the screen on iPhone X. The splash screen is also displaying in the same manner.

    EDIT: Found the issue, wasn't using a LaunchScreen.storyboard which causes the app to run in Compatability Mode. Adding this solves the problem.

  • kalyanReddykalyanReddy USMember ✭✭

    protected override void OnAppearing()

    var safeInsets  = On<Xamarin.Forms.PlatformConfiguration.iOS>().SafeAreaInsets();
    safeInsets.Left = 24;
    this.Padding = safeInsets;


    Setting custom inset values in the on appearing method is weird,,, as it first displays the default safe area insets provided by the system and then it changes. How to avoid the transition, so that users can see the custom safe insets in the first place.. Can't use ViewWillAppear,, as there is no setter to set safe area insets in the page renderer.

  • rizkyariorizkyario USMember ✭✭
    edited March 5

    Hi @DavidOrtinau ,

    Can we use this to detect whether the app is running on iPhone X or other devices?
    It seems that the value of SafeAreaInsets are always 0.

  • cherantcherant USMember ✭✭
    edited March 15

    Hi @DavidOrtinau ,

    Tried out as mentioned in blog, but didn’t know how to access SetPrefersLargeTitles under Xamarin forms content page in below line mentioned in above link.


    Current scenario:

    Excepted scenario:

    VS Configuration:
    Visual Studio 2017 (Community) for Mac 7.2.2(build 7)

    Also Xamarin.Forms version packages used in my project. Is any update need to install to achieve this?

    Please help me to resolve this.


  • ThomassssThomassss Member

    Hi @DavidOrtinau ,
    I have exactly the same issue as @cherant.
    I also use Xamarin.Forms version packages in my project.
    Can you help me?



  • cherantcherant USMember ✭✭

    Hi @Thomassss ,

    The issue occurs because of launch image not set for iPhone X separately. In Assets.Xcassets iPhone X option not shown in it. As mentioned in below link update Visual Studio for Mac with latest version 7.4 and iPhone X launch option show in it.

    Now above mentioned issue resolved resolved. You can use safe area to set top and bottom spacing as your requirement.



  • DavidOrtinauDavidOrtinau USForum Administrator, Xamarin Team, Insider, University Xamurai

    Hmm, sorry for not seeing these messages earlier. For those having any issues with large titles or safe area insets, keep an eye on the nightly builds where the team is continuing to improve the support.

  • twostartwostar Member
    edited May 8

    I added:
    to my main content page as follows:
    public MainMenu ()
    InitializeComponent ();
    However, the navigation bar is still very large - like the pic in your blog post ("Large Titles"). Any ideas on what I might be doing wrong or missed? (I tried to include a pic of my iOS emulator output, but I "haven't been a user long enough").

    I am using VS2017, and all my Xamarin components are updated, and I did grab the 2.4.0, sr4 from the link (in the blog).


  • AhmedovAhmedovAhmedovAhmedov USMember ✭✭

    Is there a way to left align a non large title? The large title max chars is like 17-20 and if I try switch to a non-large one, things get ugly, because now the title is centered.
    Also, is there a way to set the indentation of the right aligned large title? Without the above described two, the use of the package is minimal in my opinion.

  • ManoNagarajanManoNagarajan USMember ✭✭

    This is not working in tabbed page.

Sign In or Register to comment.