Popup in Xamarin.Forms

Hello Xamarians,

How are you all, Hope all are good. I am here with a new post on (Rg.Plugins.Popup). Popups are very important in mobile apps.

Friends, when I came for the first time to use popup, I was confused about the kind of popup to use and how can I get that into the xamarin forms. I searched a lot on the internet and found a plugin (RG.plugin popup) to design a popup. With the help of this plugin, we can easily create Popup in Xamarin forms. This plugin save a lot of time and effort. In my next post I will tell you about how to apply animation on Rg.Plugins.Popup.

Implementation:-

1.  Open Visual Studio and select a New Project.
2.  Now, select Cross-Platform App, give project name and set the project path. Then click OK.
3.  Select the template as "Blank App" and code sharing as "PCL".

Step-1

Now we can install Rg.Plugins.Popup

1.  Right click on project then click on Nuget Package.
2.  Click  browse and then search Rg.Plugins.Popup, select Plugins and  then check projects in which we want to add  this plugin.

Step-2

Now we are going to xaml Code section and  write some button click code in MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyPopupDemo"
x:Class="MyPopupDemo.MainPage">
<StackLayout>
<Label Text="Pop Up Demo" Font="Bold,24"
VerticalOptions="CenterAndExpand" 
HorizontalOptions="CenterAndExpand" />
<Button VerticalOptions="StartAndExpand" 
HorizontalOptions="CenterAndExpand" 
Text="Popup"
Font="Bold,20"
Clicked="Button_Clicked"
BackgroundColor="Aqua"/>
</StackLayout>
</ContentPage>

Then write code for popup navigation..

private async void Button_Clicked(object sender, EventArgs e)
{
await PopupNavigation.PushAsync(new ShowPopupDemo());
}

Step-3

Now we are creating ShowPopupDemo.xaml for creating popup..

<?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"
x:Class="MyPopupDemo.ShowPopupDemo"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
BackgroundColor="Transparent">
<pages:PopupPage.Animation>
<animations:ScaleAnimation 
PositionIn="Center"
PositionOut="Center"
ScaleIn="1.2"
ScaleOut="0.8"
DurationIn="400"
DurationOut="300"
EasingIn="SinOut"
EasingOut="SinIn"
HasBackgroundAnimation="False"/>
</pages:PopupPage.Animation>
<StackLayout VerticalOptions="Center" Padding="20,0" HorizontalOptions="FillAndExpand" >
<Frame CornerRadius="10" Padding="0" BackgroundColor="CadetBlue" >
<StackLayout Padding="10">
<Label Text="First Popup Page" TextColor="Black" FontSize="20" HorizontalOptions="Center"></Label>
<ScrollView>
<StackLayout>
<Label Text="Hello Xamarin Guys" TextColor="Red"/>
<StackLayout Orientation="Horizontal">
<Label Text="This is Very Awesome Popup Plugins For Xamarin forms" TextColor="LightBlue"/>
<Button Text="Close" TextColor="Black" Clicked="Button_Clicked" ></Button>
</StackLayout>
</StackLayout>
</ScrollView>
</StackLayout>
</Frame>
</StackLayout>
</pages:PopupPage> 

Now we are coding in C#

  private async void Button_Clicked(object sender, EventArgs e)
{
await PopupNavigation.PopAsync(true);
}

TADDA!!!!!!!!!!!!!!

My Popup Page is working… :)

If you want to full source code click Here

and video url click Here

If you are lazzy download click here  

If you want to watch this video, Click here 
=============================================================

Rg.Plugins.Popup Override Methods

        //Methods for supporting animations in your popup page

        // Invoked before an animation appearing

        void OnAppearingAnimationBegin()

=============================================================      

        // Invoked after an animation appearing

        void OnAppearingAnimationEnd()

=============================================================

        // Invoked before an animation disappearing

         void OnDisappearingAnimationBegin()

=============================================================

        // Invoked after an animation disappearing

         void OnDisappearingAnimationEnd()

=============================================================

         // Invoked  Async

         Task OnAppearingAnimationBeginAsync()

         Task OnAppearingAnimationEndAsync()
         Task OnDisappearingAnimationBeginAsync()
         Task OnDisappearingAnimationEndAsync()

=============================================================

        // Override methods which can prevent closing a popup page

        // Invoked when a hardware back button is pressed

         bool OnBackButtonPressed()   ============================================================

        // Invoked when background is clicked

         bool OnBackgroundClicked()