How do I remove the extra padding when displaying the MasterDetail Master view

When opening the Master portion of a Xamarin Forms MasterDetail window in Landscape mode on iPhoneX it looks like the padding meant to accommodate the safe area is not removed, resulting in a huge gap between the hamburger and master view. This does not exist running on an iPhone 8.

iPhone X:

iPhone X hamburger

iPhone 8:

iPhone 8 hamburger

Also, the color of the safe area to the left of the master area is the same color as the detail view, how do I make the colors of the master view extend into this area?

1 answer

  • answered 2018-01-11 20:54 Nick

    For the color to extend you just have to set the background color of your page and as for the insets, you can adjust them.

    public YourPage()
    {
        InitializeComponent();
    
        On<Xamarin.Forms.PlatformConfiguration.iOS>().SetUseSafeArea(true);
        BackgroundColor = Color.YourColor;
    }
    
    protected override void OnAppearing()
    {
        base.OnAppearing();
    
        var inset = On<Xamarin.Forms.PlatformConfiguration.iOS>().SafeAreaInsets();
        inset.Left = 24;
        Padding = inset;
    }
    

    Keep in mind if your app can rotate between portrait and landscape you may have to override OnSizeAllocated to handle setting the insets there as well.