Using Rg Plugins Popup with Xamarin Forms

Question

I am very new to Xamarin Forms development and I need a popup dialog. I found exactly what I am looking for in https://github.com/rotorgames/Rg.Plugins.Popup, but I cannot for the life of me figure out how to use it. Could someone point me to a working example or provide some direction on use? The README.md on the site is not helping me much.

I want the the popup dialog to appear when a info button is clicked in the top navigation bar. All the popup needs is 1-2 buttons (and labels) for setting user settings.

This is for Xamarin.Forms: iOS and Android.

Answer 1

In simple steps:

1. Install the plugin in all the projects
2. Add the PopUp in your Xaml
3. Use the methods they provide on the documentacion for Show/Hide the PopUp:
   • Task PushAsync(PopupPage page, bool animate = true)
   • Task PopAllAsync(bool animate = true)

They also provide a demo, check it: https://github.com/rotorgames/Rg.Plugins.Popup/tree/master/src/Demo

Answer 2

Add a reference to the library, i.e. from nuget, to all projects.

Within your Android project, add this Rg.Plugins.Popup.Popup.Init(this, savedInstanceState); inside the MainActivity.cs OnCreate method, before Xamarin Forms Inits.

And the same for the iOS project, inside AppDelegate.cs FinishedLaunching method()

 //Android
 protected override void OnCreate(Bundle savedInstanceState)
 {
    base.OnCreate(savedInstanceState);
    Rg.Plugins.Popup.Popup.Init(this, savedInstanceState);  /*Must add before the other Xamarin Inits*/
     Xamarin.Essentials.Platform.Init(this, savedInstanceState);
     Xamarin.Forms.Forms.Init(this, savedInstanceState);
 }

  //iOS
  public override bool FinishedLaunching(UIApplication app, NSDictionary options)
  {
      Rg.Plugins.Popup.Popup.Init();   /* place at the top*/
      ....
  }

Add a new ContentPage (.xaml) to your Views directory.

<?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:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
  xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;     assembly=Rg.Plugins.Popup"     
x:Class="MyProjectName.Views.MyContentPageName">
<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"/>
</pages:PopupPage.Animation>
  <StackLayout HorizontalAlignment="FillAndExpand" VerticalAlignment="FillAndExpand"> 
    <!-- place your layout content here ....fx a close popup button -->
     <Button Clicked="CloseBtn_Clicked" Text="Close" />
  </StackLayout>

</pages:PopupPage>

In the ContentPage (PopupPage) code behind file, add using Rg.Plugins.Popup.Services; and inherit from the following

using Rg.Plugins.Popup.Services;
using System;
using System.Threading.Tasks;
using Xamarin.Forms;

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MyContentPageName: Rg.Plugins.Popup.Pages.PopupPage
{
     public MyContentPageName()
    {
        InitializeComponent();            
    }      

      public void OnAnimationStarted(bool isPopAnimation)
    {
        // optional code here   
    }


    public void OnAnimationFinished(bool isPopAnimation)
    {
        // optional code here   
    }   

      protected override bool OnBackButtonPressed()
    {
        // Return true if you don't want to close this popup page when a back button is pressed
        return true;
    }


    // Invoked when background is clicked
    protected override bool OnBackgroundClicked()
    {
        // Return false if you don't want to close this popup page when a background of the popup page is clicked
        return false;
    }
    
    private async void CloseBtn_Clicked(object sender, EventArgs e)
    {
        await PopupNavigation.Instance.PopAsync(true);   
    }
}

From the .xaml.cs page, where you would like to open the popup, add this:

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using Rg.Plugins.Popup.Contracts;
using Rg.Plugins.Popup.Services;

public partial class MyOtherPage : ContentPage
{
   private IPopupNavigation _popup { get; set; }
   private MyContentPageName _modalPage;

    public MyOtherPage()    
    {
        _popup = PopupNavigation.Instance;
        _modalPage = new MyContentPageName();
    }   

   protected override void OnAppearing()
   {
       base.OnAppearing();          
       _popup.Popped += Popup_Popped;
   }

   protected override void OnDisappearing()
   {
       base.OnDisappearing();           
       _popup.Popped -= Popup_Popped;
   }

   private async void Tapped_OpenModal(object sender, EventArgs e)
   {
       await _popup.PushAsync(_modalPage);
   }
  
   /// <summary> Triggered when the MyContentPageName popup is closed "PopAsync()" </summary>
    private async void Popup_Popped(object sender, Rg.Plugins.Popup.Events.PopupNavigationEventArgs e)
    {
        /* add your logic here, if necessary  */
    }
}

*Note: If your modal simply displays static content, there is no need for a _popped event delegate within the OnAppearing()/OnDisappearing().