Grey bar on top and bottom of storyboard năm 2024

there appears to be some lag where the top of the bar is gray for a second and then turns back to white when first opening the navigation page. This is where the status bar is at the top.

Yes, I can reproduce this issue. Please add UINavigationBar.Appearance.ShadowImage = new UIImage(); in your AppDelegate.cs like following code. And remove following NavigationRenderer solution. I test it in my device. Here is no grey status bar after navigating.

[Register("AppDelegate")]
public class AppDelegate : MauiUIApplicationDelegate
{
    protected override MauiApp CreateMauiApp()
    {
       UINavigationBar.Appearance.ShadowImage = new UIImage();
         return   MauiProgram.CreateMauiApp();
    }
}

\=========NavigationRenderer solution=============

I tested all the platforms, and only iOS platform has bottom grey border on the top navigation bar.

You can create a custom NavigationRenderer in the Platfroms/iOS folder, then set NavigationBar.ShadowImage to a new UIImage like following code.

using UIKit;
using Microsoft.Maui.Controls.Handlers.Compatibility;
namespace MauiSwipeViewDemo.Platforms.iOS
{
    public class MyNavigationPageRenderer : NavigationRenderer
    {
        public MyNavigationPageRenderer()
        {
        }
        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            NavigationBar.ShadowImage = new UIImage();
            NavigationBar.ClipsToBounds = true; // optional
        }
    }
}

In the end, you can register the custom renderer by ConfigureMauiHandlers in the MauiProgram.cs

builder.ConfigureMauiHandlers((hanlders) =>
                {

# if IOS
                    hanlders.AddHandler(typeof(NavigationPage),typeof(MauiSwipeViewDemo.Platforms.iOS.MyNavigationPageRenderer));

# endif
               })

Best Regards,

Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

From iOS 11 onwards, the top and bottom layout guide properties have been deprecated and Apple introduced the safe area layout guide. Top and bottom layout guides were introduced in iOS 7 and their main intention was to guide us in aligning our views with top or bottom of our root view so that our views are not obscured from top or bottom bars.

Top and bottom layout guides are replaced by a single property ‘safeAreaLayoutGuide’ defined on a UIView (as compared to top and bottom layout guides that were the properties of UIViewController).

It is an instance of UILayoutGuide class which makes it very easy to use especially with layout anchors. If you are unfamiliar with UILayoutGuides, you can find a detailed discussion on it in my article ‘The Ultimate Guide to UILayoutGuide’. Or if you have never used the NSLayoutAnchors, I also wrote an extensive article about it.

Safe Area Layout Guide

Safe area layout guide gives an area of the view that will remain unobscured and you can align views with it for maximum visibility. The area is adjusted according to the availability of top and bottom bars. It is an instance of UILayoutGuide which provides several properties to bind your view with. Here is an extensive guide on UILayoutGuide.

Unlike top and bottom layout guides which were only available in a view controller, safe area layout guide is also available in a standalone view.

Adding Constraints with Safe Area Layout Guide

In Xcode:

You can bind your view with safe area layout guide just like you bound it with top or bottom layout guides previously.

Programatically:

Adding with safe area layout guide is vary easy.

Enabling/Disabling Safe Area Layout Guide

Safe area layout guide is enabled for your main storyboard by default. If you are creating a new xib or an storyboard in Xcode 9, safe area layout guide option is already enabled. You can disable this option explicitly by going into file inspector menu of Interface Builder and unchecking the option Use Safe Area Layout Guide.

Disabling the ‘Use Safe Area Layout Guide’ in the file inspector menu replaces the constraints attached to safe area layout guide with top and bottom layout guides or if it was a view, the constraints are replaced with top and bottom constraints of the view.

Changing Safe Area

You can override the additionalSafeAreaInsets property of UIViewController to specify your own safe area.

Changing the safe area also results in the new safe area for the subviews too. In the above image, the safe area of the grey subview changes and aligns itself with the safe area of the super view. The green and red rectangles show safe area and layout margins guides of our root view respectively. Blue and yellow rectangles represent safe area and layout margins of our subview.

Conclusion

Safe area layout guide leverages the advantages of UILayoutGuide API. Its easy to implement both in IB or programmatically. So its time to say good bye to our old friends top and bottom layout guides.