Gradient stacklayout for xamarin forms

Question

I am working on Xamarin forms now. I have a requirement to have a gradient stacklayout view with some width set to the stack layout which is greater than the device's portrait width. Setting this width will ensure that the stacklayout will be fit in portrait view and in landscape the stacklayout with the width can be seen. Here I need a top to bottom gradient stacklayout. I have seen some of the posts with custom renderers for stacklayout and that works good.

But when i used those renderers, i could see that on changing the orientation from portrait to landscape in live scenario, the drawn gradient layout width is seen as the portrait width with the remaining area as empty. See the attached images for

portrait

[![portrait][1]][1]

and landscape

Here is the XAML code imageenter image description here

custom control:

public class GradientStack : StackLayout
{
    public Color StartColor { get; set; }
    public Color EndColor { get; set; }
}

custom Renderer:

public class GradientStackRenderer : VisualElementRenderer
{
    public override void Draw(CGRect rect)
    {
        base.Draw(rect);
        CAGradientLayer layer = new CAGradientLayer();
        layer.Frame = rect;
        layer.Colors = new CGColor[] {
            Element.StartColor.ToCGColor(),
            Element.EndColor.ToCGColor()
        };
        Layer.InsertSublayer(layer, 0);
    }
}

Yuri S · Accepted Answer

Here is the solution. When size of the stack layout changed we need to force redraw.

[assembly: ExportRenderer(typeof(GradientStack), typeof(GradientStackRenderer))]

namespace yournamespace.iOS
{
    class GradientStackRenderer : ViewRenderer
    {

        public override void Draw(CGRect rect)
        {
            base.Draw(rect);
            CAGradientLayer layer = new CAGradientLayer();
            layer.Frame = rect;
            layer.Colors = new CGColor[]
            {
                ((GradientStack)Element).StartColor.ToCGColor(),
                ((GradientStack)Element).EndColor.ToCGColor()
            };

            if(Layer.Sublayers[0] is CAGradientLayer)
                Layer.ReplaceSublayer(Layer.Sublayers[0], layer);
            else
                Layer.InsertSublayer(layer, 0);

        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if(e.PropertyName=="Width")
                SetNeedsDisplay();
        }


    }
}

We also don't want to add a layer every time we draw, so we check and replace our layer if already in sublayers.

I also would remove unnecessary size requests

Gradient stacklayout for xamarin forms

Answers (2)

Related Questions