Question

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

Answer 1

有许多方法，这是避免为每个平台编写自定义渲染的方法......

使用NControl / Ngraphics您可以创建一个NControlView子类来绘制您的popover（即iOS Popover）。然后，您可以将其嵌入到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);
    }
}

Answer 2

Rg.Plugins.Popup 是您需求的最佳插件。它是Xamarin.Forms的绝佳插件。您可以找到更多详细信息here。

Answer 3

您可以使用Xamarin.Forms中的slideOverkit组件按照您的设计实现slobver popup。

在xamarin.forms中弹出

3 个答案: