Learn About Xamarin.Forms Popup

Hello Xamarinians,

I am here with a new post on (Rg.Plugins.Popup). Popups are very important in mobile apps.

When I tried to use popups for the first time, I was confused about the kind of popup to use and how I could get them 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 popups in Xamarin.Forms. This plugin saves a lot of time and effort. In my next post, I will tell you about how to apply animation on Rg.Plugins.Popup.

Implementation

Open Visual Studio and select a "New Project".

Now, select Cross-Platform App, give the project a name and set the project path. Then, click OK.

Select the template as "Blank App" and code sharing as "PCL".

Step 1

Now, we can install Rg.Plugins.Popup. Right-click on the project, then click on NuGet Package.

Click Browse and search for Rg.Plugins.Popup, select Plugins and then check the projects in which we want to add this plugin.

Step 2

Now, we are going to the XAML code section and  writing some button click code in the 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 our 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);
      }

My Popup Page is working. 

If you want the full source code click on this URL https://github.com/xamarinskills/XF.Popup

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