How to work with advanced Pop-ups in Xamarin Forms

Normally, we can see some simple Pop-ups in applications that allow us display some information or some similar thing, but sometimes we need more power from them. In this post, I will show you how create advanced Pop-ups with Rg.Plugins.PopUp plugin in Xamarin Forms. We will cover the following topics:

✔ What plugin do I need

✔ Creating Pop-up page

✔ How to call the Pop-up

✔ Initializing on platforms

✔ Pop-up properties

First of all.. What do I need?

Add from NuGet Package the plugin: Rg.Plugins.PopUp:

Let’s Start!

Creating pop-up page

To create Pop-up page the first step that you have to do is to add the page with the pop-up: Pop-upPage (Namespace / Page type) in your XAML. You must to add this for each PopUp that you want to create.

The second step you must do is add following namespace in your Pop-up page:

Inside the pop-up page structure, you can add any layout that you want. It’s preferable to add inside the layout a Frame to create a better design from a Pop-up box.

How to call the Pop-up

You just have to add Pop-up Navigation class next to the PushAsync method with the name of your Pop-up, in this case new PopUp().

? Initializing on platforms

Android: In your MainActivity class, you must to add following line:

IOS: In your AppDelegate class, you must to add following line:

Pop-up properties

? BackgroundColor: Determines the background of the pop-up. Accepts/Returns a Color value.

? BackgroundImage: Determines the backaground image of the pop-up.

? Animation: Receives an ScaleAnimation value. Adds some tips of animation to your pop-up.

? CloseWhenBackgroundIsClicked: This property defines if the pop-up will close when you tap outside the control. Accepts/Returns a bool value. (Gets a True value by default).

Let’s dive into the animation property

You must add: using Rg.Plugins.Popup.Animations;

I will show up some animations behavior that you can add to your pop-up, let’s see:

? PositionIn: Sets the animation over the appearance of the pop-up. You can set this behavior with MoveAnimationOptions enum and have following values: Bottom, Center, Left, Right and Top.

? PositionOut: Sets the animation over the disappearance of the pop-up. You can set this behavior with MoveAnimationOptions enum and have following values: Bottom, Center, Left, Right and Top.