Boxview“线性渐变画笔”

Question

我怎样才能在xamarin forms下面的代码中做同样的渐变效果？

WPF中同样的效果：

<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

xamarin forms 中的我的 Boxview：

<BoxView WidthRequest="100" Grid.RowSpan="2">

</BoxView>

Answer 1

有不止一种方法可以做到这一点。您可以使用 SkiaSharp 来实现结果。否则，您可以编写自定义渲染器来做同样的事情。

如果您想使用SkiaSharp 库，请参阅此处的Xamarin documentation。

如果您希望使用自定义渲染器来实现结果，请参阅以下链接。

• Add Gradient background to layouts in Xamarin Forms visual studio
• Horizontal And Vertical Gradient Color In Xamarin.Forms

有一个很棒的自定义控件MagicGradients 可用于执行一些出色的渐变工作，如果您希望编写更少的代码，这将非常方便。

参考以下链接：

• GitHub source code - MagicGradients
• NuGet Package - MagicGradients

如果您是初学者，还有一个excellent blog 可用于介绍如何使用该控件。

我希望这会有所帮助。

Answer 2

如果要使用BoxView来实现效果，可以使用customRenderer。

1.在您的 PCL 项目中：

public class GradientColorView :BoxView
{
    public Color StartColor { get; set; }
    public Color MidOneColor { get; set; }
    public Color MidTwoColor { get; set; }
    public Color EndColor { get; set; }
}

2.在Android项目中：

[assembly: ExportRenderer(typeof(GradientColorView), typeof(GradientColorViewRenderer))]
namespace App18.Droid
{
  public class GradientColorViewRenderer : VisualElementRenderer<BoxView>
   {

    public GradientColorViewRenderer(Context context) : base(context) { }
    private Color StartColor { get; set; }
    public Color MidOneColor { get; set; }
    public Color MidTwoColor { 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,new int[] {
               this.StartColor.ToAndroid(),
               this.MidOneColor.ToAndroid(),
               this.MidTwoColor.ToAndroid(),
               this.EndColor.ToAndroid()},new float[] {0.0f,0.25f,0.75f,1.0f },
        #endregion

               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<BoxView> e)
    {
        base.OnElementChanged(e);

        if (e.OldElement != null || Element == null)
        {
            return;
        }
        try
        {
            var view = e.NewElement as GradientColorView;
            this.StartColor = view.StartColor;
            this.MidOneColor = view.MidOneColor;
            this.MidTwoColor = view.MidTwoColor;
            this.EndColor = view.EndColor;
        }
        catch (Exception ex)
        {

        }
    }
 }
}

3.在ios项目中：

[assembly: ExportRenderer(typeof(GradientColorView), typeof(GradientColorViewRenderer))]
namespace App18.iOS
{
  public class GradientColorViewRenderer : VisualElementRenderer<BoxView>
  {
    public override void Draw(CGRect rect)
    {
        base.Draw(rect);
        GradientColorView stack = (GradientColorView)this.Element;
        CGColor startColor = stack.StartColor.ToCGColor();
        CGColor midOneColor = stack.MidOneColor.ToCGColor();
        CGColor midTwoColor = stack.MidTwoColor.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,midOneColor,midTwoColor,endColor
    };

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

4.在您的页面 xaml 中：

 <local:GradientColorView HeightRequest="100" HorizontalOptions="FillAndExpand" StartColor="Yellow" MidOneColor="Red" MidTwoColor="Blue"  EndColor="LimeGreen"></local:GradientColorView>