在角落Xamarin表格中创建三角形形状

时间:2018-09-08 07:18:55

标签: xamarin xamarin.forms

我需要在标签/框架的拐角处创建一个三角形,如下图所示,其中带有数字/小文本。但是绘制拐角的一种方法将是一个不错的开始。

您如何做到这一点? 任何地方的任何样品。非常感谢

enter image description here

2 个答案:

答案 0 :(得分:0)

您可以仅使用BoxView并将其旋转到135,然后使用-Ve余量,而仅使用三角形,而不使用仅用于Triangle的插件。

答案 1 :(得分:0)

我使用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));
    }
}

然后在XAML中使用它

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

enter image description here