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

Yes, a custom popup can be added in Xamarin forms. Please follow these steps:

1. Create one stacklayout.
2. Add the fields in to the stacklayout.
3. Create one new Frame object.
4. Make the Frame object background with transaprent color.
5. Add the Stacklayout object into frame.
6. Add the frame to main content page.

If you need code, I will update.

Answer 2

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

Answer 3

Have a look at ACR User Dialogs. https://github.com/aritchie/userdialogs

Nuget Package: https://www.nuget.org/packages/Acr.UserDialogs/

Then have a look at the Prompt Examples: 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))
            );
        }