Create triangle shape in a corner xamarin forms

Question

I need to create a triangle at the corner of a label/frame like the pic below with a number/small text in it.But just a way to draw the corner would be a great start.

How Can you do you do that ? Any sample anywhere. Many thanks

user_11825383 · Answer

Instead Using Plugin for just Triangle you can just use BoxView and rotate it with 135 and give negative margin so half portion will only get visible.

user_6514045 · Answer

I achieved this using NControl https://github.com/chrfalch/NControl

public class DiagonalControl : NControlView
{
    public static readonly BindableProperty CornerRadiusBindableProperty =
        BindableProperty.Create(nameof(CornerRadius), typeof(int), typeof(DiagonalControl), 8);

    private Xamarin.Forms.Color _backgroundColor;

    public DiagonalControl()
    {
        base.BackgroundColor = Xamarin.Forms.Color.Transparent;
    }

    public new Xamarin.Forms.Color BackgroundColor
    {
        get
        {
            return _backgroundColor;
        }
        set
        {
            _backgroundColor = value;
            Invalidate();
        }
    }

    public int CornerRadius
    {
        get
        {
            return (int)GetValue(CornerRadiusBindableProperty);
        }
        set
        {
            SetValue(CornerRadiusBindableProperty, value);
        }
    }

    public override void Draw(ICanvas canvas, Rect rect)
    {
        base.Draw(canvas, rect);

        canvas.FillPath(new PathOp[] {
            new MoveTo (0,0),
            new LineTo (rect.Width, rect.Height),
            new LineTo (rect.Width, 0),
            new ClosePath ()
        }, new NGraphics.Color((Xamarin.Forms.Color.White).R, (Xamarin.Forms.Color.White).G, (Xamarin.Forms.Color.White).B));
    }
}

Then in the XAML use it like

user_10366303 · Answer

Draw path directly in xaml from Xamarin.Forms 4.7.0
(bump into the same request, and have an update for others)

And more details:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/shapes/ https://devblogs.microsoft.com/xamarin/xamarin-forms-shapes-and-paths/

Create triangle shape in a corner xamarin forms

3 Answers