Boxview "LinearGradientBrush“

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来实现这个结果。否则，您可以编写自定义呈现程序来执行此操作。

如果希望使用Xamarin文档库，请参阅此处的SkiaSharp。

如果您希望使用自定义呈现器来实现此结果，请参阅下面的链接。

• 向Xamarin窗体visual studio中的布局添加渐变背景
• Xamarin.Forms中的水平和垂直渐变颜色

有一个非常棒的自定义控件MagicGradients可用于执行一些优秀的梯度工作，如果您喜欢编写更少的代码，这将非常方便。

请参阅以下链接：

• GitHub源代码- MagicGradients
• NuGet包- MagicGradients

如果您是初学者，也有一个优秀博客可用于相同的控件的使用。

我希望这能帮上忙。

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.在监督办项目中：

[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>