Creating a Modal Popup (Dialog) in Xamarin.Forms

Xamarin.Forms is great for making cross-platform applications; however sometimes it can be difficult to create specific UI elements cross-platform. In this post, we will go over how one can create a modal dialog without having to write any custom renderers.

Looking through the Xamarin.Forms library, an obvious option would be to call the method Navigation.PushModalAsync and pass in the page that you want to display modally. Unfortunately, that method does not work like that. It will display the page full screen with no close or navigation buttons. Scouring the forums and documentation, there isn’t a way to customize this built-in method either.

After searching online, I found an open source project with a nuget package that already overcame this hurdle. The nuget package is called Popup Page Plugin for Xamarin.Forms. It provides quick samples for how to get started with this plugin. Currently, it supports iOS and Android with pre-release / beta support for windows.

First, install the nuget package into your platform projects and any PCL (Portable Class Library) that you are using for your UI. Also, make sure you initialize the plugin in your AppDelegate.cs in iOS by calling Rg.Plugins.Popup.IOS.Popup.Init(); or else you will get Null Reference Exceptions.

Once installed, it is time to start implementing the control. Create a new page and inherit from Rg.Plugins.Popup.Pages.PopupPage. This page will be the modal popup. Without specifying height or width, the popup seems to size to the content that is inside of it. As with any elements in Xamarin.Forms, without a margin or padding specified, the controls run right up to the edge of the popup and look funny on top of another page. Now add a couple of StackLayouts and a Frame to give a border and some padding.

In XAML:

<StackLayout VerticalOptions="Center" HorizontalOptions="Center" Padding="0" Margin="0">

	<Frame Margin="0" Padding="5" BackgroundColor="{x:Static helpers:StyleKit+Company.Color}">

		<Frame.Content>

			<StackLayout Padding="5" Margin="2" BackgroundColor="White" Orientation="Vertical">

			</StackLayout>

		</Frame.Content>

	</Frame>

</StackLayout>

This dialog will be just a few pixels wide since it auto-sizes to fit the inner content. Adding some arbitrary controls to give it some size will show this popup:

This makes a simple, quick and easy method for making a popup dialog in Xamarin.Forms. I spent several hours trying to make this on my own with no luck, but this nuget package made creating it a cinch. Download the package, add it to your project, and start adding dialogs to your mobile app today!

Want to learn more, or are you having the same discussions in your own department? We’re here to help! Sparkhound's in-house developers work with Xamarin and many other technologies every day. Get in touch with us so we can discuss how we can help your business achieve its goals through leadership and technology.

Information and material in our blog posts are provided "as is" with no warranties either expressed or implied. Each post is an individual expression of our Sparkies. Should you identify any such content that is harmful, malicious, sensitive or unnecessary, please contact  marketing@sparkhound.com