在Xamarin.Forms中创建自定义弹出窗口

Question

有没有办法使用Xamarin Forms在iOS平台上创建带有编辑器的自定义弹出对话框。

我想要一个带有标题标签、文本框用于接受输入和错误标签用于显示错误消息的弹出窗口，还要有确定和取消按钮。

我想从输入弹出窗口中接受PIN码，并进行验证。如果验证失败，则必须在弹出窗口内显示错误消息。

谢谢！

- Naveen Bathina

---

您对所述弹出窗口有什么要求？它是否需要完全可定制化？ - Chase Florell

@ChaseFlorell：已更新文本，请查看是否符合我的要求。 - Naveen Bathina

Answer 1

这是一个很好的弹出窗口，可以在其中添加编辑器。同时，还有一个适用于Xamarin Forms的弹出页面插件可供使用。 点击这里 可以查看该插件的详细信息。

// Use these methods in PopupNavigation globally or Navigation in your pages

// Open new PopupPage
Task PushAsync(PopupPage page, bool animate = true) // Navigation.PushPopupAsync

// Hide last PopupPage
Task PopAsync(bool animate = true) // Navigation.PopPopupAsync

// Hide all PopupPage with animations
Task PopAllAsync(bool animate = true) // Navigation.PopAllPopupAsync

// Remove one popup page in stack
Task RemovePageAsync(PopupPage page, bool animate = true) // Navigation.RemovePopupPageAsync

XAML弹出页面

<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
             xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
             x:Class="Demo.Pages.MyPopupPage">
  <!--Animations use example-->
  <pages:PopupPage.Animation>
    <animations:ScaleAnimation 
      PositionIn="Center"
      PositionOut="Center"
      ScaleIn="1.2"
      ScaleOut="0.8"
      DurationIn="400"
      DurationOut="300"
      EasingIn="SinOut"
      EasingOut="SinIn"
      HasBackgroundAnimation="True"/>
  </pages:PopupPage.Animation>
  <!-- Content -->
</pages:PopupPage>

弹出页面

public partial class MyPopupPage : PopupPage
    {
        public SecondPopupPage()
        {
            InitializeComponent();
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();
        }

        protected override void OnDisappearing()
        {
            base.OnDisappearing();
        }

        // Method for animation child in PopupPage
        // Invoced after custom animation end
        protected virtual Task OnAppearingAnimationEnd()
        {
            return Content.FadeTo(0.5);
        }

        // Method for animation child in PopupPage
        // Invoked before custom animation begin
        protected virtual Task OnDisappearingAnimationBegin()
        {
            return Content.FadeTo(1);;
        }

        protected override bool OnBackButtonPressed()
        {
            // Prevent hide popup
            //return base.OnBackButtonPressed();
            return true; 
        }

        // Invoced when background is clicked
        protected override bool OnBackgroundClicked()
        {
            // Return default value - CloseWhenBackgroundIsClicked
            return base.OnBackgroundClicked();
        }
    }

主页

    // Main Page

    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        // Button Click
        private async void OnOpenPupup(object sender, EventArgs e)
        {
            var page = new MyPopupPage();

            await Navigation.PushPopupAsync(page);
            // or
            await PopupNavigation.PushAsync(page);
        }
    }

- Alessandro Caliaro

---

也许你的另一个答案被删除了，因为它只包含一个链接。您可以通过用户个人资料的活动选项卡中的“答案”下面的“最近删除的答案”来进行检查。 - Martin Zabel

我们能否不使用Nuget包和自定义渲染来完成它？ - Naveen Bathina

Answer 2

请查看 ACR 用户对话框。https://github.com/aritchie/userdialogs

Nuget 包：https://www.nuget.org/packages/Acr.UserDialogs/

然后，请查看提示示例：https://github.com/aritchie/userdialogs/blob/master/src/Samples/Samples/ViewModels/StandardViewModel.cs#L97

void Prompt()
        {
            UserDialogs.Instance.ActionSheet(new ActionSheetConfig()
                .SetTitle("Choose Type")
                .Add("Default", () => this.PromptCommand(InputType.Default))
                .Add("E-Mail", () => this.PromptCommand(InputType.Email))
                .Add("Name", () => this.PromptCommand(InputType.Name))
                .Add("Number", () => this.PromptCommand(InputType.Number))
                .Add("Number with Decimal", () => this.PromptCommand(InputType.DecimalNumber))
                .Add("Password", () => this.PromptCommand(InputType.Password))
                .Add("Numeric Password (PIN)", () => this.PromptCommand(InputType.NumericPassword))
                .Add("Phone", () => this.PromptCommand(InputType.Phone))
                .Add("Url", () => this.PromptCommand(InputType.Url))
            );
        }

- Adam

---

我已经尝试过这个了，我能够从弹出窗口中获取输入，但问题是如果输入无效，我必须在弹出窗口内显示错误消息，我该如何实现？ - Naveen Bathina

如果可能的话，我建议使用行为（Behaviors）来处理一些问题：https://blog.xamarin.com/behaviors-in-xamarin-forms/。或者至少使用某种内联错误消息。 - Adam

谢谢 @Adam Pedley，如何为 ACR 弹出窗口添加行为。 - Naveen Bathina

Answer 3

是的，在Xamarin Forms中可以添加自定义弹出窗口。请按照以下步骤操作：

1. 创建一个StackLayout。
2. 将字段添加到StackLayout中。
3. 创建一个新的Frame对象。
4. 将Frame对象背景设置为透明色。
5. 将StackLayout对象添加到Frame中。
6. 将Frame添加到主内容页。

如果您需要代码，我会更新。

- Rajesh

---

我对这个问题并不是专家，但是一般而言，应该添加代码（或至少一些结构）以帮助人们前进。 - Tom de Geus

这不会在主内容页面的内容上方显示弹出窗口。它将在主内容页面的内容中插入（.Insert或.Add）此新内容（框架），或者将替换整个主页面的内容（mainPage.Content = frame;）。有没有一种方法可以在主页面的内容上方显示此框架？ - Daulet Kshibekov