幀 XAML 元素中的漸變背景

Question

我正在開發一個 Xamarin.Forms 移動應用程序，該應用程序具有新的 UI 實現，需要許多特定的 XAML 元素才能具有漸變 XAML 元素具有漸變 Z82848E3ACE958

我無法實現某些東西或找到特定的解決方案來為 Frame 等元素應用線性漸變背景或類似內容。

我嘗試使用 SkiaSharp、MagicGradient 和許多其他實現，但沒有一個可以將漸變 colors 應用於特定的控制元素，例如 Xamarin.Z6450242531912981C6683CAE88A23 中的 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);
}
}

有沒有辦法對像 Frame 這樣的單個控件產生線性影響？

更新了圖像以查看所需的正確效果。

Answer 1

您可以使用自定義渲染器來實現它

共享項目

using Xamarin.Forms;

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

在 iOS

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

在 Android

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

    }
 
}

在 xaml

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

Answer 2

您可以使用此 NuGet 進行梯度實施。 https://github.com/tbaggett/xfgloss