Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

iPhone X SafeArea with Forms ListView

SebastianKruseSebastianKruse USMember ✭✭✭
edited November 2017 in Xamarin.Forms

How do you guys handle the safe area problem for ListViews with Xamarin.Forms? Just setting the safe area as margin on the whole ListView looks ugly AF. So I search for something like a custom renderer to make the ListView as equal als possible to the UITableView in the iPhone X. My current solution bringt the ViewCells in the correct position but the Seperator is going off screen and the ShortGroup index is behind the Notch in some rotations. Beside from that, my current solution is way to much work to implement it in every project (because I use a CustomViewCell class as Workaround).

So how to implement a custom renderer for this problem? All of my current implementations seems not to work properly. And I guess waiting for Xamarin to fix this is not an option (because MasterDetail pages still not work on iOS SplitView and this was reported back in 2015 and is just ignored by Xamarin...).

Edit: The problem with the ListView in Xamarin.Forms did only occur if the ListView control is not the root of the ContentPage. In my case it is inside a Grid because I want a SearchBar too on this side. In this case the content of the ListView (and the ShortGroup index) gets cut off by the iPhone X rounded corners and the notch. It looks really ugly and I guess it is a very common way to have a SearchBar and a ListView on one side. Here is a repository of a project which has a first workaround (the ShortGroup index still has the problem there and also the separator runs outside of the visible area while it normally would stop before that): https://github.com/Sebastian1989101/OpenGeoDB-App

Answers

  • ClayZuvichClayZuvich USMember ✭✭✭

    I would suggest exposing the inset to your Page as a property. There are two areas that need it 1) Exposing it as a property 2) Listening for the ViewSafeAreaInsetsDidChange and grabbing it there.

    Take a look at how Xamarin did it on the Page.cs and PageRenderer (referenced below). That way you have full control on how to adjust the controls.

    https://github.com/xamarin/Xamarin.Forms/blob/4d49e5786a4c9cfc6eea00bbaa5b57bc09679186/Xamarin.Forms.Platform.iOS/Renderers/PageRenderer.cs

    https://github.com/xamarin/Xamarin.Forms/blob/c341958fb3c9424a7b53668e8fe4c58e208cec30/Xamarin.Forms.Core/PlatformConfiguration/iOSSpecific/Page.cs

    Something like Page.GetSafeAreaInsets() -> Thickness and OnSafeAreaInsetsDidChange(Thickness) should work.

  • SebastianKruseSebastianKruse USMember ✭✭✭

    I already have a way to get the safe area (as thickness). My problem is, how do I set it correctly to the ListView? There is no property on that control to insert a padding or something like that.

  • I have a same problem.

  • You might want to read this: https://blog.xamarin.com/making-ios-11-even-easier-xamarin-forms/

    TL;DR;

    Add this line to your page's file:

    using Xamarin.Forms.PlatformConfiguration.iOSSpecific;

    And this one to your page's constructor:

    On<Xamarin.Forms.PlatformConfiguration.iOS>().SetUseSafeArea(true);

  • SebastianKruseSebastianKruse USMember ✭✭✭

    @JonathanDerrough this does not always work. I already reported the bugs about it. In some cases the margins / paddings got not applied correctly.

  • BruceMartinBruceMartin USMember ✭✭

    Has this been released yet? I just updated and tried it but I'm getting the following error:
    Error CS1061: 'IPlatformElementConfiguration<iOS, Page>' does not contain a definition for 'SetUseSafeArea' and no extension method 'SetUseSafeArea' accepting a first argument of type 'IPlatformElementConfiguration<iOS, Page>' could be found (are you missing a using directive or an assembly reference?) (CS1061)

    I have
    using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
    and
    On<Xamarin.Forms.PlatformConfiguration.iOS>().SetUseSafeArea(true);

    If it hasn't been release what is the ETA?

  • SebastianKruseSebastianKruse USMember ✭✭✭

    @BruceMartin I don't know from where this is coming because it is not how it is implemented in Xamarin. You have a few options currently to support the iPhone X as clean as possible (well still not everything is possible yet with Forms such as ShortGroupBindings are still on the wrong place if the ListView is not the only child element).

  • BruceMartinBruceMartin USMember ✭✭

    This must have changed. I removed those from my code behind and did not add:

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

    to the xaml file and it looks, at least on the simulator, like it is using the safeArea by default.

  • SebastianKruseSebastianKruse USMember ✭✭✭

    As for now they did not change a bit. But maybe I was not clear enough what the current problem is.

    As long as you use the ListView as Root-Child of your Page, it works as it should. But as soon as I wrap it into a Grid, StackLayout or some other Panel / Control, it ignores the SafeArea. Therefore you need a self implementation as soon as you have to place other controls on the page as well (such as Google AdMob View, SearchBar, etc.). And if you do so, you have no way to control the ShortGroup Area while the other things can be accessed with a few workarounds, this one is impossible as for now.

  • BruceMartinBruceMartin USMember ✭✭

    Ah my misunderstanding. I'll have to mess with it some more.

  • VolodymyrSavchenkoVolodymyrSavchenko UAMember ✭✭✭

    Problem is that with this option turned on app looks ugly. Especially in landscape mode.

  • @BruceMartin I am getting this same error:

    Error CS1061: 'IPlatformElementConfiguration<iOS, Page>' does not contain a definition for 'SetUseSafeArea'

    Did you ever resolve it?

  • bharatleelbharatleel Member
    edited December 2018

    using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
    On<Xamarin.Forms.PlatformConfiguration.iOS>().SetUseSafeArea(true);

    After implementing this, when I rotate simulator to left (Landscape mode), I see blank white space both side.
    Is there any way to avoid this?

    One more thing, do I need to write this piece of code on each ContentPage or is there any central place where I can write this and considered for all pages.

    Thanks in Advance!

Sign In or Register to comment.