在 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屋！