C# 帧XAML元素中的梯度背景

我正在开发一个Xamarin.Forms移动应用程序，它有一个新的UI实现，需要许多特定的XAML元素具有渐变颜色

我还没有能够实现的东西或找到一个具体的解决方案，以适用于线性梯度背景或类似的元素，如帧

我曾尝试使用SkiaSharp、MagicGradient和许多其他实现，但没有一个可以将渐变颜色应用于特定的控制元素，例如Xamarin.Forms中的Frame

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);
}
}

有没有一种方法可以在单个控件（如帧）上获得线性效果

使用图像更新以查看所需的正确效果

---

您可以使用此NuGet实现渐变。

---

您可以通过使用自定义渲染器来实现它

股份制项目 在iOS中 在Android中

使用系统；
使用Android.Content；
使用Android.Graphics；
使用Android.Graphics.Drawables；
使用Android.Support.V4.Content.Res；
使用xxx；
使用xxx.Droid；
使用Xamarin.Forms；
使用Xamarin.Forms.Platform.Android；
[程序集：ExportRenderer（typeof（GradientColorFrame）、typeof（MyFrameRenderer））]
名称空间xxx.Droid
{
公共类MyFrameRenderer:FrameRenderer
{
公共MyFrameRenderer（上下文）：基础（上下文）
{
}
private Xamarin.Forms.Color StartColor{get；set；}
私有Xamarin.Forms.Color EndColor{get；set；}
公共覆盖无效绘制（画布）
{
绘制（画布）；
var gradient=new Android.Graphics.LinearGradient（0，0，Width，0，this.StartColor.ToAndroid（），this.EndColor.ToAndroid（），Android.Graphics.Shader.TileMode.Mirror）；
var paint=new Android.Graphics.paint（）
{
抖动=正确，
反别名=真
};
油漆.固色剂（梯度）；
var rect=new RectF（0，0，canvas.Width，canvas.Height）；
canvas.DrawRoundRect（rect，100f，100f，paint）；//在此处设置拐角半径
}
受保护的覆盖无效OnElementChanged（ElementChangedEventArgs e）
{
基础。一个要素发生变化（e）；
if（e.OldElement！=null | | Element==null）
{
返回；
}
尝试
{
var stack=e.NewElement作为GradientColorFrame；
this.StartColor=stack.StartColor；
this.EndColor=stack.EndColor；
}
捕获（例外情况除外）
{
System.Diagnostics.Debug.WriteLine（@“错误：”，例如消息）；
}
}
}
}

在xaml中

//...            

您是否尝试过将

网格

（或

绝对布局

）包装在框架中，将

SKSurface

添加到该

网格

，并将内容添加到相同的

网格

？这是可行的，但实施此操作后，CornerRadius不起作用。是否有办法确保框架的所有属性？@EdwardWhitehead

CornerRadius

不起作用的原因可能是您将

填充设置为0，然后没有将
Isclippedtobunds
设置为true。祝你好运@不幸的是，这也不起作用。CornerRadius=“10”Margin=“20，180，20，0”IsClippedToBounds=“True”Padding=“20”如果您有填充，请删除剪裁到边界的填充，并且它应该work@FreakyAli谢谢你的帮助，但不管我做什么，这仍然不起作用。我尝试了多种方法让它在没有运气的情况下工作。
using Xamarin.Forms;

namespace xxx
{
    public class GradientColorFrame:Frame
    {
        public Color StartColor { get; set; }
        public Color EndColor { get; set; }
    }
}


using xxx;
using xxx.iOS;
using CoreAnimation;
using CoreGraphics;
using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(GradientColorFrame), typeof(MyFrameRenderer))]
namespace xxx.iOS
{
    public class MyFrameRenderer : FrameRenderer
    {
        public override void Draw(CGRect rect)
        {
            base.Draw(rect);
            GradientColorFrame stack = (GradientColorFrame)this.Element;
            CGColor startColor = stack.StartColor.ToCGColor();

            CGColor endColor = stack.EndColor.ToCGColor();      

            var gradientLayer = new CAGradientLayer();

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

            NativeView.Layer.InsertSublayer(gradientLayer, 0);
            NativeView.Layer.MasksToBounds = true;
            NativeView.Layer.CornerRadius = 100;
        }
    }
}

using System;
using Android.Content;
using Android.Graphics;
using Android.Graphics.Drawables;
using Android.Support.V4.Content.Res;
using xxx;
using xxx.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;


[assembly: ExportRenderer(typeof(GradientColorFrame), typeof(MyFrameRenderer))]
namespace xxx.Droid
{
    public class MyFrameRenderer : FrameRenderer
    {
        public MyFrameRenderer(Context context) : base(context)
        {
        }

        private Xamarin.Forms.Color StartColor { get; set; }
        private Xamarin.Forms.Color EndColor { get; set; }


        public override void Draw(Canvas canvas)
        {
            base.Draw(canvas);



            var gradient = new Android.Graphics.LinearGradient(0, 0, Width, 0, this.StartColor.ToAndroid(), this.EndColor.ToAndroid(), Android.Graphics.Shader.TileMode.Mirror);



            var paint = new Android.Graphics.Paint()
            {
                Dither = true,
                AntiAlias = true
            };
            paint.SetShader(gradient);
            var rect = new RectF(0, 0, canvas.Width, canvas.Height);

            canvas.DrawRoundRect(rect, 100f, 100f, paint); // set CornerRadius  here 
        }

       
        protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
        {
           

            base.OnElementChanged(e);

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

    }
 
}

<local:GradientColorFrame StartColor="Blue" EndColor="Red" WidthRequest="300" HeightRequest="300">
   //...            
</local:GradientColorFrame>