Xamarin.Forms - How To Achieve 45 deg. Angled Background Color

Question

Using Xamarin.Forms, how would I achieve the following angled background without using an image:

Answer 1

A 100% Xamarin.Forms with no "custom renderer" involved solution:

In the example below, the solid blue portion of the semi-transparent box behind the Labels on the screen is a NControl , you can also do gradients, simple animations, etc... but in this case just a solid polygon is being drawn within a semi-transperent rectangle:

Using NGraphics via NControl you can do a lot in terms of drawing custom controls in Xamarin.Forms without custom renderers. It is not a solution in every use-case, but its clean and works cross-platform (iOS/Android/WinPhone).

var overlay = new NControlView()
{
    BackgroundColor = Xamarin.Forms.Color.Black.MultiplyAlpha(.3f),
    DrawingFunction = (canvas, rect) =>
    {
        canvas.FillPath(new PathOp[] {
            new MoveTo (NGraphics.Point.Zero),
            new LineTo ((rect.Width / 3), 0),
            new LineTo ((rect.Width / 3) * 2, rect.Height),
            new LineTo (0, rect.Height),
            new ClosePath ()
        }, Colors.Blue);
    }
};

Rendered in Red with a heavier alpha setting so you can see the control better:

This control is embedded in an AbsoluteLayout that uses dynamic bounds so even orientation changes are handled cleanly:

AbsoluteLayout.SetLayoutFlags(overlay, AbsoluteLayoutFlags.All);
AbsoluteLayout.SetLayoutBounds(overlay, new Xamarin.Forms.Rectangle(0, 1, 1, 0.3));

• https://github.com/praeclarum/NGraphics

• https://github.com/chrfalch/NControl

Answer 2

There is no way to define a gradient in Xamarin Forms. Your best bet would be to use an image. However, you could also try writing a custom renderer that used the underlying platform API to draw a gradient background.

Here is a thread that discusses using the custom renderer approach.