弹出xamarin.forms [英] Pop Up in xamarin.forms

问题描述

我想知道有没有可能在xamarin.forms中设计如下所示的弹出窗口.

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

推荐答案

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

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

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

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

  这篇关于弹出xamarin.forms的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！