title: Gradient Background in Frame XAML Element
body: <p>I am developing a Xamarin.Forms mobile application that has a new UI implementation that requires a number of specific XAML elements to have gradient colors.</p>
  
  <p>I have not been able to implement something or find a specific solution to apply linear-gradient background or similar for elements such as Frame.</p>
  
  <p>I have tried to make use of SkiaSharp, MagicGradient and a number of other implementations but none can apply gradient colors to specific control elements such as Frame in Xamarin.Forms.</p>
  
  <pre><code>public Login()
  {
   InitializeComponent();
  
   SKCanvasView canvasView = new SKCanvasView();
   canvasView.PaintSurface += OnCanvasViewPaintSurface;
   Content = canvasView;
  }
  
  private void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs e)
  {
   SKImageInfo info = e.Info;
   SKSurface surface = e.Surface;
   SKCanvas canvas = surface.Canvas;
  
   canvas.Clear();
  
   using (SKPaint paint = new SKPaint())
   {
    // Create 300-pixel square centered rectangle
    float x = (info.Width - 300) / 2;
    float y = (info.Height - 300) / 2;
    SKRect rect = new SKRect(x, y, x + 300, y + 300);
  
    // Create linear gradient from upper-left to lower-right
    paint.Shader = SKShader.CreateLinearGradient(
    new SKPoint(rect.Left, rect.Top),
    new SKPoint(rect.Right, rect.Bottom),
    new SKColor[] { SKColors.Red, SKColors.Blue },
    new float[] { 0, 1 },
    SKShaderTileMode.Repeat);
  
    // Draw the gradient on the rectangle
    canvas.DrawRect(rect, paint);
  }
  }
  </code></pre>
  
  <p>Is there a way to get a linear effect on individual controls like Frame?</p>
  
  <p>Updated with image to see the correct effect required.</p>
  
  <p><a href="https://i.stack.imgur.com/qTAu2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qTAu2.png" alt="Image showing the effect required for the UI."></a></p>