CODEWITHSUNDEEP
xamarinxamarin.forms
developer9969
developer9969

Reputation: 5226

Create triangle shape in a corner xamarin forms

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

enter image description here

Upvotes: 4

Views: 2793

Answers (3)

Khagesh Dewangan
Khagesh Dewangan

Reputation: 41

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.

Upvotes: 4

Shaw
Shaw

Reputation: 929

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

<Path
    HorizontalOptions="End"
    VerticalOptions="Start"
    Data="M 0,0 L 36,0 36,36Z"
    Fill="#70a33e"
    Stroke="Gray" />

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

enter image description here

Upvotes: 1

Leonard
Leonard

Reputation: 31

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

<customviews:DiagonalControl
                            x:FieldModifier="Public"
                            HeightRequest="50"
                            HorizontalOptions="End"
                            VerticalOptions="Start"
                            WidthRequest="50" />

enter image description here

Upvotes: 1

Related Questions