Navigation Bar with Gradient Background Using Xamarin Forms (iOS) and Renderer

Add following class in PCL.

public class CustomNavigationPage: NavigationPage
{
    public CustomNavigationPage(Page content): base(content) {}
}

in your .iOS project write renderer for it

In this render we will create image out of gradient color and we will set it to the background of Navigation Bar,

[assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(CustomNavigationPageRenderer))]
namespace TestApp.iOS.Custom_Renderes
{
        class CustomNavigationPageRenderer: NavigationRenderer
        {
            public CustomNavigationPageRenderer()
            {
                this.NavigationBarHidden = true;
            }
            public override void ViewDidLoad()
            {
                base.ViewDidLoad();
                var gradient = new CAGradientLayer();
                gradient.Frame = NavigationBar.Bounds;
                gradient.NeedsDisplayOnBoundsChange = true;
                gradient.MasksToBounds = true;
                view.BackgroundColor = UIColor.Black;
                gradient.Colors = new CGColor[]
                {
                    UIColor.From# f80000.CGColor, UIColor.From #8f0000.CGColor };
UIGraphics.BeginImageContext(gradient.Bounds.Size);
gradient.RenderInContext(UIGraphics.GetCurrentContext());
UIImage backImage = UIGraphics.GetImageFromCurrentImageContext();
                    UIGraphics.EndImageContext();
                    UINavigationBar.Appearance.SetBackgroundImage(backImage, UIBarMetrics.Default);
                }
            }
        }

we can now use our CustomNavigationPage in App.cs by using,

MainPage = = new CustomNavigationPage(new FirstPage());

Where FirstPage() is the starting page of the application.