Boxview "LinearGradientBru sh"

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>

Мой Boxview в xamarin forms:

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

</BoxView>

Answer 1

Существует несколько способов сделать это. Вы можете использовать SkiaSharp для достижения результата. В противном случае вы можете написать собственные средства визуализации, чтобы сделать то же самое.

Обратитесь к документации Xamarin здесь, если вы хотите sh использовать библиотеку SkiaSharp.

См. Ссылки ниже, если вы используете sh для использования пользовательских средств визуализации для достижения результата.

• Добавление градиентного фона к макетам в визуальной студии Xamarin Forms
• Горизонтальный и вертикальный цвет градиента в 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.in 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>