Pop Up in xamarin.forms

Question

I would like to know is there any possibility to design the popup as below in xamarin.forms.

Answer 1

There are many ways to do this, here is one that avoids writing a custom render for each platform...

Using NControl/Ngraphics you can create an NControlView subclass that draws your popover (i.e. an iOS Popover). You can then embed it into XAML and do what ever you need in terms of positioning, add controls on top of it, blurring the background, etc...

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

Answer 2

Rg.Plugins.Popup is best plugin for your requirement. It is awesome plugin for Xamarin.Forms. You can find more detail here.

Answer 3

You can use slideOverkit component in Xamarin.Forms to implement slideover popup as per your design.