Xamarin Forms : PopUp Page with RG.Plugins.Popup

How to Show PopUp Page In Xamarin Forms

Step 1

First, we need to add the Third Page Plugin to achieve the same. [Rg.Plugins.Popup]

Go to Manage Nuget Packages - > Search for Rg.Plugins.Popup

Once the plugin is installed in the Project

We need to configure same in Android and IOS Projects

In Android  - Go to MainActivity.cs

Code:   Rg.Plugins.Popup.Popup.Init(this, savedInstanceState);

In IOS –  Go to  - AppDelegate.cs

Code : Rg.Plugins.Popup.Popup.Init();

Now Back to Main Project (PCL)

Step – 1:  Add Page in Project

Once Added Page Change the Tag of Page

Default Page has Content page as Tag which needs to be replaced with PopUpPage Class : 

Default Page:- Class

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

Change To

<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"

This is how it should Look after making changes 

Step – 2 :  Add Class Reference to Page

Code

xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"

xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"  

Step – 3 : add Animation to Page loading and Closing

<pages:PopupPage.Animation>

        <animations:ScaleAnimation

            PositionIn="Center"

            PositionOut="Center"

            ScaleIn="1.2"

            ScaleOut="0.8"

            DurationIn="400"

            DurationOut="300"

            EasingIn="SinOut"

            EasingOut="SinIn"

            HasBackgroundAnimation="True">                           

        </animations:ScaleAnimation>

    </pages:PopupPage.Animation>

Step – 4 : Content to be Shown in popUp

<ContentPage.Content>

        <Frame BackgroundColor="#FFFF00" HasShadow="True" CornerRadius="10" 

                 Margin="20,20,20,20" VerticalOptions="Center">

            <StackLayout >

                <Label Text="This is Close Popup Window"

                   VerticalOptions="CenterAndExpand" 

                   HorizontalOptions="CenterAndExpand" />

                <Button Text="Close Popup" Clicked="Button_Clicked" />

            </StackLayout>

        </Frame>

    </ContentPage.Content>

XAML For Complete Page Design

<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"

                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

                 xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"

                 x:Class="PopUpSample.PagePopUp"

                 xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"  >

    <pages:PopupPage.Animation>

        <animations:ScaleAnimation

            PositionIn="Center"

            PositionOut="Center"

            ScaleIn="1.2"

            ScaleOut="0.8"

            DurationIn="400"

            DurationOut="300"

            EasingIn="SinOut"

            EasingOut="SinIn"

            HasBackgroundAnimation="True">                           

        </animations:ScaleAnimation>

    </pages:PopupPage.Animation>

    <ContentPage.Content>

        <Frame BackgroundColor="#FFFF00" HasShadow="True" CornerRadius="10" Margin="20,20,20,20" 

                 VerticalOptions="Center">

            <StackLayout >

                <Label Text="This is Close Popup Window"

                    VerticalOptions="CenterAndExpand" 

                    HorizontalOptions="CenterAndExpand" />

                <Button Text="Close Popup" Clicked="Button_Clicked" />

            </StackLayout>

        </Frame>

    </ContentPage.Content>

</pages:PopupPage>

Now to CS Side of Coding for PopUpPage  : 

Code behind or CS File for Page

Base Class of Page to be Changed to [Rg.Plugins.Popup.Pages.PopupPage]

          [XamlCompilation(XamlCompilationOptions.Compile)]

         public partial class PagePopUp :  Rg.Plugins.Popup.Pages.PopupPage

         {

                 public PagePopUp ()

                 {

                          InitializeComponent ();

                              CloseWhenBackgroundIsClicked = false;

                 }

                 private void Button_Clicked(object sender, EventArgs e)

                 {

                     PopupNavigation.Instance.PopAsync();

                 }

                 protected override bool OnBackButtonPressed()

                 {

                             return true; // Disable back button

                 }

             }

Now To Main Page: Place Button to show/Popup Page

Code

       private async void Button_Clicked(object sender, EventArgs e)

       {

            await PopupNavigation.Instance.PushAsync(new PagePopUp());

       }

Output