Add Gradient background to layouts in Xamarin Forms visual studio

Issue

I am a newbie in Xamarin Forms, I create a ContentPage for Menu. I need linear gradient color at its background. But I can't find any link which tell me how to create background gradient color. I also want that color place at button background like selector in android. If you have any information please give reply.

Solution

In below code we can set Horizontal and Vertical Gradient(I put it in #region) for any Layout in below I write for StackLayout if you want to write another Layout just replace your Layout on StackLayout.

In PCL:

using System;
using Xamarin.Forms;

namespace GradientColor
 {
   public class GradientColorStack : StackLayout
    {
      public Color StartColor { get; set; }
      public Color EndColor { get; set; }
    }
 }

Xamarin.Android:

  using System;
  using GradientColor;
  using GradientColor.Droid;
  using Xamarin.Forms;
  using Xamarin.Forms.Platform.Android;
  [assembly: ExportRenderer(typeof(GradientColorStack), typeof(GradientColorStackRenderer))]

 namespace GradientColor.Droid
  {
     public class GradientColorStackRenderer : VisualElementRenderer<StackLayout>
       {
    private Color StartColor { get; set; }
    private Color EndColor { get; set; }

    protected override void DispatchDraw(global::Android.Graphics.Canvas canvas)
      {
        #region for Vertical Gradient
        //var gradient = new Android.Graphics.LinearGradient(0, 0, 0, Height,
        #endregion

        #region for Horizontal Gradient
     var gradient = new Android.Graphics.LinearGradient(0, 0, Width, 0,
          #endregion

            this.StartColor.ToAndroid(),
            this.EndColor.ToAndroid(),
            Android.Graphics.Shader.TileMode.Mirror);

        var paint = new Android.Graphics.Paint()
        {
            Dither = true,
        };
        paint.SetShader(gradient);
        canvas.DrawPaint(paint);
        base.DispatchDraw(canvas);
    }

    protected override void OnElementChanged(ElementChangedEventArgs<StackLayout> e)
    {
        base.OnElementChanged(e);

        if (e.OldElement != null || Element == null)
        {
            return;
        }
        try
        {
            var stack = e.NewElement as GradientColorStack;
            this.StartColor = stack.StartColor;
            this.EndColor = stack.EndColor;
        }
        catch (Exception ex)
        {
            System.Diagnostics.Debug.WriteLine(@"ERROR:", ex.Message);
        }
      }
   }
}

Xamarin.iOS:

  using System;
  using CoreAnimation;
  using CoreGraphics;
  using GradientColor;
  using GradientColor.iOS;
  using Xamarin.Forms;
  using Xamarin.Forms.Platform.iOS;
  [assembly: ExportRenderer(typeof(GradientColorStack), typeof(GradientColorStackRenderer))]

 namespace GradientColor.iOS
   {
public class GradientColorStackRenderer : VisualElementRenderer<StackLayout>
    {
      public override void Draw(CGRect rect)
      {
        base.Draw(rect);
        GradientColorStack stack = (GradientColorStack)this.Element;
        CGColor startColor = stack.StartColor.ToCGColor();

        CGColor endColor = stack.EndColor.ToCGColor();

        #region for Vertical Gradient

        var gradientLayer = new CAGradientLayer();

        #endregion

        #region for Horizontal Gradient

        //var gradientLayer = new CAGradientLayer()
        //{
        //  StartPoint = new CGPoint(0, 0.5),
        //  EndPoint = new CGPoint(1, 0.5)
        //};

        #endregion



        gradientLayer.Frame = rect;
        gradientLayer.Colors = new CGColor[] { startColor, endColor 
        };

        NativeView.Layer.InsertSublayer(gradientLayer, 0);
      }
    }
 }

In XAML:

 <?xml version="1.0" encoding="utf-8"?>
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:GradientColor; assembly:GradientColor" x:Class="GradientColor.GradientColorPage">
 <Grid VerticalOptions="FillAndExpand" RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" BackgroundColor="Olive">
         <StackLayout VerticalOptions="Center">
            <Label Text="Normal color for stacklayout" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"  TextColor="White"/>
         </StackLayout>
    </Grid>
    <Grid Grid.Row="1">
         <local:GradientColorStack StartColor="Green" EndColor="Red">
               <StackLayout VerticalOptions="CenterAndExpand">
               <Label Text="Gradient color for StackLayout" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"   TextColor="White"/>
               </StackLayout>

         </local:GradientColorStack>
     </Grid>
   </Grid>
  </ContentPage>

Answered By - Venkata Swamy Balaraju