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.

Xamarin

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.


Xamarin

 

Implementation

 Open Visual Studio and select a "New Project".

 

Xamarin


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

 

 

Xamarin

 

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

Xamarin

 

Step 1

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

Xamarin

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

Xamarin

Step 2

Now, we are going to the XAML code section and  writing some button click code in the MainPage.xaml:

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:local="clr-namespace:MyPopupDemo"  
  5.              x:Class="MyPopupDemo.MainPage">  
  6.     <StackLayout>  
  7.         <Label Text="Pop Up Demo" Font="Bold,24"  
  8.                 VerticalOptions="CenterAndExpand"   
  9.                 HorizontalOptions="CenterAndExpand" />  
  10.         <Button VerticalOptions="StartAndExpand"   
  11.                 HorizontalOptions="CenterAndExpand"   
  12.                     Text="Popup"  
  13.                     Font="Bold,20"  
  14.                     Clicked="Button_Clicked"  
  15.                     BackgroundColor="Aqua"/>  
  16.     </StackLayout>  
  17. </ContentPage>  

Then, write code for popup navigation:

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

Step 3

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

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              x:Class="MyPopupDemo.ShowPopupDemo"  
  5.              xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"  
  6.                  xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"  
  7.              BackgroundColor="Transparent">  
  8.     <pages:PopupPage.Animation>  
  9.         <animations:ScaleAnimation   
  10.                       PositionIn="Center"  
  11.                       PositionOut="Center"  
  12.                       ScaleIn="1.2"  
  13.                       ScaleOut="0.8"  
  14.                       DurationIn="400"  
  15.                       DurationOut="300"  
  16.                       EasingIn="SinOut"  
  17.                       EasingOut="SinIn"  
  18.       HasBackgroundAnimation="False"/>  
  19.     </pages:PopupPage.Animation>  
  20.     <StackLayout VerticalOptions="Center"  Padding="20,0" HorizontalOptions="FillAndExpand" >  
  21.         <Frame CornerRadius="10" Padding="0" BackgroundColor="CadetBlue" >  
  22.             <StackLayout Padding="10">  
  23.                 <Label Text="First Popup Page" TextColor="Black" FontSize="20" HorizontalOptions="Center"></Label>  
  24.                 <ScrollView>  
  25.                     <StackLayout>  
  26.                         <Label Text="Hello Xamarin Guys" TextColor="Red"/>  
  27.                         <StackLayout Orientation="Horizontal">  
  28.                             <Label Text="This is Very Awesome Popup Plugins For Xamarin forms" TextColor="LightBlue"/>  
  29.                             <Button Text="Close" TextColor="Black" Clicked="Button_Clicked" ></Button>  
  30.                         </StackLayout>  
  31.                     </StackLayout>  
  32.                 </ScrollView>  
  33.             </StackLayout>  
  34.         </Frame>  
  35.     </StackLayout>  
  36. </pages:PopupPage>  

Now, we are coding in C#.

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

Xamarin

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

  1.        //Methods for supporting animations in your popup page   
  2.        // Invoked before an animation appearing  
  3.        void OnAppearingAnimationBegin()  
  4. ========================================================================================         
  5.        // Invoked after an animation appearing  
  6.        void OnAppearingAnimationEnd()  
  7. ========================================================================================  
  8.        // Invoked before an animation disappearing  
  9.         void OnDisappearingAnimationBegin()  
  10.       =========================================================================================  
  11.        // Invoked after an animation disappearing  
  12.         void OnDisappearingAnimationEnd()  
  13.       =========================================================================================  
  14. / Invoked  Async   
  15.         Task OnAppearingAnimationBeginAsync()  
  16.         
  17.         Task OnAppearingAnimationEndAsync()  
  18.         
  19.         Task OnDisappearingAnimationBeginAsync()  
  20.         
  21.         Task OnDisappearingAnimationEndAsync()  
  22.       =========================================================================================  
  23.        // Override methods which can prevent closing a popup page   
  24.   
  25.        // Invoked when a hardware back button is pressed  
  26.         bool OnBackButtonPressed()  
  27.   ========================================================================================  
  28.        // Invoked when background is clicked  
  29.         bool OnBackgroundClicked()        

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now