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:
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 (
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:
🔹 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.
Adding the animations
Good luck with your implementation! 😎
Click to see an example in my GitHub.