Xamarin Forms : How to Show PopUp Page In Xamarin Forms

  How to Show PopUp Page In Xamarin Forms 

Step 1

We need Third Page Plugin to achieve same.

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

Once Installed in 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  : Need to Replace ContentPage with Pages:PopupPage
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
Change To 
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"




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
<?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"
                 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>

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());
       }