Custom Popup in Xamarin.Forms

Question

Is there any way to create custom popup dialog with Editor inside it using Xamarin Forms. Targeted to iOS platform.

I want a pop up with a Title Label ,Text box for accepting input and error Label for displaying error message, with OK and Cancel button.

I want to accept pin number from input pop up and have to validate pin. If validation fails I have to show a Error message inside pop up.

Thanks,

Answer 1

This is a good popup for XF that includes the ability to add an editor to the popup.

Popup Page Plugin for 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 POPUP PAGE

<?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>

POPUP PAGE

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();
        }
    }

MAINPAGE

    // 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);
        }
    }