Frame XAML 元素中的渐变背景 [英] Gradient Background in Frame XAML Element

问题描述

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

我无法实现某些内容或找到特定解决方案来为 Frame 等元素应用线性渐变背景或类似方法.

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

公共登录(){初始化组件();SKCanvasView canvasView = 新 SKCanvasView();canvasView.PaintSurface += OnCanvasViewPaintSurface;内容 = 画布视图；}私有无效 OnCanvasViewPaintSurface(对象发送者，SKPaintSurfaceEventArgs e){SKImageInfo info = e.Info;SKSurface 表面 = e.Surface;SKCanvas 画布 = surface.Canvas;画布.清除()；使用 (SKPaint 油漆 = 新 SKPaint()){//创建 300 像素的方形居中矩形浮动 x = (info.Width - 300)/2;浮动 y = (info.Height - 300)/2;SKRect rect = new SKRect(x, y, x + 300, y + 300);//创建从左上角到右下角的线性渐变Paint.Shader = SKShader.CreateLinearGradient(新 SKPoint(rect.Left, rect.Top),新 SKPoint(rect.Right, rect.Bottom),新 SKColor[] { SKColors.Red, SKColors.Blue },新浮点[] { 0, 1 },SKShaderTileMode.Repeat);//在矩形上绘制渐变canvas.DrawRect(rect,paint);}}

有没有办法在像 Frame 这样的单个控件上获得线性效果?

更新了图片以查看所需的正确效果.

解决方案

您可以使用自定义渲染器

来实现

共享项目

使用 Xamarin.Forms;命名空间xxx{公共类 GradientColorFrame:Frame{公共颜色起始颜色 { 获取；放;}公共颜色结束颜色 { 获取；放;}}}

在 iOS 中

<预><代码>使用xxx；使用 xxx.iOS；使用核心动画；使用 CoreGraphics；使用基金会；使用 UIKit；使用 Xamarin.Forms；使用 Xamarin.Forms.Platform.iOS；[组装:ExportRenderer(typeof(GradientColorFrame), typeof(MyFrameRenderer))]命名空间 xxx.iOS{公共类 MyFrameRenderer : FrameRenderer{公共覆盖无效绘制(CGRect rect){base.Draw(rect);GradientColorFrame stack = (GradientColorFrame)this.Element;CGColor startColor = stack.StartColor.ToCGColor();CGColor endColor = stack.EndColor.ToCGColor();var gradientLayer = new CAGradientLayer();渐变层.Frame = rect;gradientLayer.Colors = new CGColor[] { startColor, endColor};NativeView.Layer.InsertSublayer(gradientLayer, 0);NativeView.Layer.MasksToBounds = true;NativeView.Layer.CornerRadius = 100;}}}

在安卓中

使用系统；使用 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(上下文上下文):基础(上下文){}私人 Xamarin.Forms.Color StartColor { get;放;}私人 Xamarin.Forms.Color EndColor { 获取；放;}公共覆盖无效绘制(画布画布){base.Draw(画布)；var gradient = new Android.Graphics.LinearGradient(0, 0, Width, 0, this.StartColor.ToAndroid(), this.EndColor.ToAndroid(), Android.Graphics.Shader.TileMode.Mirror);varpaint = new Android.Graphics.Paint(){抖动 = 真，抗锯齿 = 真};Paint.SetShader(渐变)；var rect = new RectF(0, 0, canvas.Width, canvas.Height);canvas.DrawRoundRect(rect, 100f, 100f, 油漆);//这里设置 CornerRadius}protected override void OnElementChanged(ElementChangedEventArgs<Frame> e){base.OnElementChanged(e);if (e.OldElement != null || Element == null){返回;}尝试{var stack = e.NewElement as GradientColorFrame;this.StartColor = stack.StartColor;this.EndColor = stack.EndColor;}捕获(异常前){System.Diagnostics.Debug.WriteLine(@"ERROR:", ex.Message);}}}}

在 xaml 中

//...</local:GradientColorFrame>

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.

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.

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.

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

Is there a way to get a linear effect on individual controls like Frame?

Updated with image to see the correct effect required.

解决方案

You can implement it by using Custom Renderer

in share Project

using Xamarin.Forms;

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

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

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

    }
 
}

in xaml

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

这篇关于Frame XAML 元素中的渐变背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！