Reputation: 414
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,
Upvotes: 4
Views: 15069
Reputation: 11
Yes, a custom popup can be added in Xamarin forms. Please follow these steps:
If you need code, I will update.
Upvotes: 0
Reputation: 5768
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);
}
}
Upvotes: 5
Reputation: 16199
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))
);
}
Upvotes: 3