How to open a custom dialog / popup using Xamarin.Forms?

Question

I am new to Xamarin.Forms and am stuck in a situation where I want to open a pop-up window with my control data (for example, View employee details] when I click on the parent page.

How to open a custom dialog / popup using Xamarin.Forms?

Any sample code would be appreciated?

Thanks in advance!

Answer 1

The overall goal of what you are trying to achieve can be achieved using the PushModalAsync and PopModalAsync methods of Xamarin.Forms Navigation .

Most likely, this is good enough for what you need - however - it is not entirely modal. I will explain after a small piece of code: -

StackLayout objStackLayout = new StackLayout() { }; // Button cmdButton_LaunchModalPage = new Button(); cmdButton_LaunchModalPage.Text = "Launch Modal Window"; objStackLayout.Children.Add(cmdButton_LaunchModalPage); // cmdButton_LaunchModalPage.Clicked += (async (o2, e2) => { ContentPage objModalPage = new ContentPage(); objModalPage.Content = await CreatePageContent_Page2(); // await Navigation.PushModalAsync(objModalPage); // // Code will get executed immediately here before the page is dismissed above. }); // return objStackLayout; private async Task<StackLayout> CreatePageContent_Page2() { StackLayout objStackLayout = new StackLayout() { }; // Button cmdButton_CloseModalPage = new Button(); cmdButton_CloseModalPage.Text = "Close"; objStackLayout.Children.Add(cmdButton_CloseModalPage); // cmdButton_CloseModalPage.Clicked += ((o2, e2) => { this.Navigation.PopModalAsync(); }); // return objStackLayout; } 

The problem with the above is that

  await Navigation.PushModalAsync(objModalPage); 

will return immediately after the animation.

Although you cannot interact with the previous page, since we are showing a new NavigationPage with the Close button displayed - the parent Navigation Page is still running behind the scenes in parallel.

So, if you have any timers or something that they executed, they will still be called if you don't stop them.

You can also use the TaskCompletionSource approach, as indicated in the next post, as well How can I expect modal form rejection using Xamarin.Forms? .

Note that although you can now wait for the 2nd page to be displayed, and then when this page is missed to continue executing the code on the next line, this is still not a true modal form . Again, timers or something else will be called on the parent page.

Update 1: -

To display content on top of existing content, simply add it to the current page, however, make this section of the content invisible until you need it.

If you use an external container, such as a Grid , that supports multiple child controls in the same cell, you can achieve what you want.

You will also want to use something like a filled Box with transparency, which will also cover the entire page to control the visible, viewable section that surrounds your internal content section.

Answer 2

If you still want your pop-up code on your own page, you can configure some custom renderers using the following logic.

1. ModalPage and corresponding renderer

 public class ModalPage : ContentPage { } public class ModalPageRenderer : PageRenderer { protected override void OnElementChanged(VisualElementChangedEventArgs e) { base.OnElementChanged(e); this.View.BackgroundColor = UIColor.Clear; this.ModalPresentationStyle = UIModalPresentationStyle.OverCurrentContext; } public override void ViewDidLayoutSubviews() { base.ViewDidLayoutSubviews(); SetElementSize (new Size (View.Bounds.Width, View.Bounds.Height)); } } 

2. HostPage

 public class ModalHostPage : ContentPage, IModalHost { #region IModalHost implementation public Task DisplayPageModal(Page page) { var displayEvent = DisplayPageModalRequested; Task completion = null; if (displayEvent != null) { var eventArgs = new DisplayPageModalRequestedEventArgs(page); displayEvent(this, eventArgs); completion = eventArgs.DisplayingPageTask; } // If there is no task, just create a new completed one return completion ?? Task.FromResult<object>(null); } #endregion public event EventHandler<DisplayPageModalRequestedEventArgs> DisplayPageModalRequested; public sealed class DisplayPageModalRequestedEventArgs : EventArgs { public Task DisplayingPageTask { get; set;} public Page PageToDisplay { get; } public DisplayPageModalRequestedEventArgs(Page modalPage) { PageToDisplay = modalPage; } } } 

3. HostPage renderer

 public class ModalHostPageRenderer: PageRenderer { protected override void OnElementChanged(VisualElementChangedEventArgs e) { base.OnElementChanged(e); if(e.OldElement as ModalHostPage != null) { var hostPage = (ModalHostPage)e.OldElement; hostPage.DisplayPageModalRequested -= OnDisplayPageModalRequested; } if (e.NewElement as ModalHostPage != null) { var hostPage = (ModalHostPage)e.NewElement; hostPage.DisplayPageModalRequested += OnDisplayPageModalRequested; } } void OnDisplayPageModalRequested(object sender, ModalHostPage.DisplayPageModalRequestedEventArgs e) { e.PageToDisplay.Parent = this.Element; var renderer = RendererFactory.GetRenderer (e.PageToDisplay); e.DisplayingPageTask = this.PresentViewControllerAsync(renderer.ViewController, true); } } 

Then it is as simple as calling await ModalHost.DisplayPageModal(new PopUpPage()); from your main page or in this particular case from the ViewModel behind.

What Pete said about PushModalAsync / PopModalAsync is still valid for this solution (which, in my opinion, is not a drawback), but your popup will appear with a transparent background.

The main advantage of this approach, in my opinion, is that you can define your pop-up XAML / code definition separately from the main page and reuse it on any other page where you want to show this pop-up window.

Answer 3

I followed the above approach and could not work on iOS 7. I found this BTProgressHUD library that you can modify and use. I use its methods with the Dependency service. Actual popup library. https://github.com/nicwise/BTProgressHUD

In the following example, the BTProgressHUD library is used internally.

https://github.com/xximjasonxx/ScorePredictForms