BoxView gradient background doesn't fill entire available space

nerowareneroware USMember ✭✭

Hi, I'm trying to add a gradient background to a BoxView, and while I've almost got it, something's still not quite right. The gradient background isn't filling the entire available space like I'd expect it to. Any ideas?

Suppose the following Xamarin.Forms.Grid:

var labelGrid = new Grid {
Children = {
new GradientBgBoxView {
StartColor = Color.FromHex ("#00D07C"),
EndColor = Color.FromHex ("#1452E3")
},
new Grid {
Padding = new Thickness (10, 18, 10, 18),
Children = {
new Label {
Text = "News flash",
TextColor = Color.White
}
}
}
}
};

And the following custom iOS renderer for the GradientBgBoxView above:

public class GradientBgBoxViewRenderer : BoxRenderer
{
private CAGradientLayer gradientLayer;

protected override void OnElementChanged (ElementChangedEventArgs<BoxView> e)
{
    base.OnElementChanged (e);

    if (null != this.Element) {
        var boxView = this.Element as GradientBgBoxView;
        if (null != boxView) {
            this.gradientLayer = new CAGradientLayer {
                Bounds = boxView.Bounds.ToRectangleF (),
                Colors = new[] {
                    boxView.StartColor.ToCGColor (),
                    boxView.EndColor.ToCGColor ()
                },
                StartPoint = new CGPoint (0, 0.66),
                EndPoint = new CGPoint (1, 0.66)
            };

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

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

    var boxView = sender as GradientBgBoxView;
    if (null == boxView) {
        return;
    }

    if (null == this.gradientLayer) {
        return;
    }

    bool resetBounds = false;

    switch (e.PropertyName) {
    case "X":
    case "Y":
    case "Width":
    case "Height":
        resetBounds = true;
        break;
    }

    if (resetBounds) {
        gradientLayer.Bounds = new CGRect (boxView.X, boxView.Y, boxView.Width, boxView.Height);
        System.Diagnostics.Debug.WriteLine (gradientLayer.Bounds);
    }
}

}

Sign In or Register to comment.