xamarin - 在 xamarin.forms 中弹出

Question

我想知道是否有可能在 xamarin.forms 中设计如下弹出窗口。

Answer 1

有很多方法可以做到这一点，这里是一种避免为每个平台编写自定义渲染的方法......

使用 NControl/Ngraphics 您可以创建一个 NControlView 子类来绘制弹出框(即 iOS 弹出框)。然后，您可以将其嵌入到 XAML 中，并在定位、在其顶部添加控件、模糊背景等方面执行您需要的操作...

public class PopDownControl : NControlView
{
    public PopDownControl()
    {
        BackgroundColor = Xamarin.Forms.Color.Transparent;
    }

    public static BindableProperty CornerRadiusProperty =
        BindableProperty.Create(nameof(CornerRadius), typeof(int), typeof(PopDownControl), 0,
            BindingMode.OneWay, null, (bindable, oldValue, newValue) =>
            {
                (bindable as PopDownControl).Invalidate();
            });

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

    public static BindableProperty InsetPositionProperty =
        BindableProperty.Create(nameof(InsetPosition), typeof(int), typeof(PopDownControl), 0,
            BindingMode.OneWay, null, (bindable, oldValue, newValue) =>
            {
                (bindable as PopDownControl).Invalidate();
            });

    public int InsetPosition
    {
        get { return (int)GetValue(InsetPositionProperty); }
        set { SetValue(InsetPositionProperty, value); }
    }

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

        var backgroundBrush = new SolidBrush(Colors.White);
        var pen = new Pen(Colors.White, 2);

        var width = rect.Width - CornerRadius;
        var height = rect.Height;
        var arcdia = CornerRadius * 2;
        var inset = InsetPosition;
        var insetWidth = 30;
        canvas.DrawPath(
          new PathOp[]
           {
                new MoveTo (arcdia + CornerRadius, CornerRadius),
                new LineTo (inset, CornerRadius),
                new LineTo (inset + (insetWidth / 2), 0),
                new LineTo (inset + insetWidth, CornerRadius),
                new LineTo (width-arcdia, CornerRadius),
                new ArcTo (new Size (arcdia), false, true, new Point (width, arcdia + CornerRadius)),
                new LineTo (width, height-arcdia),
                new ArcTo (new Size (arcdia), false, true, new Point (width-arcdia, height)),
                new LineTo (arcdia + CornerRadius, height),
                new ArcTo (new Size (arcdia), false, true, new Point (CornerRadius, height-arcdia)),
                new LineTo (arcdia / 2, arcdia + CornerRadius),
                new ArcTo (new Size (arcdia), false, true, new Point (arcdia + CornerRadius, CornerRadius)),
                new LineTo (arcdia + CornerRadius, CornerRadius),
                new ClosePath(),
           }, pen, backgroundBrush);
    }
}

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

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