Xamarin Form Popup Page With Animation Effect

 

Github Project URL: https://github.com/mistrypragnesh40/RgPopupWithAnimation

Plugin Required.

Initialization of Plugin.

Xamarin.AndroidProject (MainActivity.cs)

using System;
using Android.App;
using Android.Content.PM;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
 
namespace RgPopupDemo.Droid
{
    [Activity(Label = "RgPopupDemo", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize )]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;
 
            base.OnCreate(savedInstanceState);
            Rg.Plugins.Popup.Popup.Init(this, savedInstanceState);
            Xamarin.Essentials.Platform.Init(this, savedInstanceState);
            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
            LoadApplication(new App());
        }
        public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
        {
            Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);
 
            base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
        }
    }
}

Xamarin.iOSProject (AppDelegate.cs)

using System;
using System.Collections.Generic;
using System.Linq;
 
using Foundation;
using UIKit;
 
namespace RgPopupDemo.iOS
{
    // The UIApplicationDelegate for the application. This class is responsible for launching the 
    // User Interface of the application, as well as listening (and optionally responding) to 
    // application events from iOS.
    [Register("AppDelegate")]
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        //
        // This method is invoked when the application has loaded and is ready to run. In this 
        // method you should instantiate the window, load the UI into it and then make the window
        // visible.
        //
        // You have 17 seconds to return from this method, or iOS will terminate your application.
        //
        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            Rg.Plugins.Popup.Popup.Init();
            global::Xamarin.Forms.Forms.Init();
            LoadApplication(new App());
 
            return base.FinishedLaunching(app, options);
        }
    }
}
 

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"
             x:Class="RgPopupDemo.MainPage">
 
    <StackLayout>
        <Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
            <Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
        </Frame>
        <Button Text="Click here to open Popup" Clicked="Button_Clicked" />
 
    </StackLayout>
 
</ContentPage>
 

MainPage.xaml.cs

using Rg.Plugins.Popup.Services;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
 
namespace RgPopupDemo
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
 
        private void Button_Clicked(object sender, EventArgs e)
        {
            Device.BeginInvokeOnMainThread(async () =>
            {
                await PopupNavigation.Instance.PushAsync(new PopupPage(), true);
            });
        }
    }
}
 

PopupPage.xaml

<?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="RgPopupDemo.PopupPage">
    <pages:PopupPage.Animation>
        <animations:MoveAnimation 
     PositionIn="Bottom"
     PositionOut="Bottom"
     DurationIn="500"
     DurationOut="500"
      EasingIn="BounceIn"
      EasingOut="BounceIn"
            />
    </pages:PopupPage.Animation>
    <ContentPage.Content>
        <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
            <Frame BackgroundColor="White" Margin="20"  HeightRequest="300"  CornerRadius="20" VerticalOptions="CenterAndExpand"  HorizontalOptions="CenterAndExpand">
                <StackLayout VerticalOptions="Center">
                    <Label VerticalTextAlignment="Center" Text="This Is Rg Popup Demo With Animation Effect"  />
                </StackLayout>
            </Frame>
        </StackLayout>
    </ContentPage.Content>
</pages:PopupPage>

PopupPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
 
namespace RgPopupDemo
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class PopupPage : Rg.Plugins.Popup.Pages.PopupPage
    {
        public PopupPage()
        {
            InitializeComponent();
        }
    }
}

How to Open Popup Page:

Device.BeginInvokeOnMainThread(async () =>
{
      await PopupNavigation.Instance.PushAsync(new PopupPage(), true);
});

How to Close Popup Page:

Device.BeginInvokeOnMainThread(async () =>
{
     await PopupNavigation.Instance.PopAsync();
});

Animation That you can Apply:

<pages:PopupPage.Animation>
        <animations:MoveAnimation 
     PositionIn="Bottom"
     PositionOut="Bottom"
     DurationIn="500"
     DurationOut="500"
      EasingIn="BounceIn"
      EasingOut="BounceIn"
            />

Note : namespace required in xml : 

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

Duration In / Duration Out : Specify Time in Millisecond 

PositionIn / PositionOut:

• Bottom
• Center
• Left
• Right
• Top

EasinIn / EasinOut:

• Linear
• SinOut
• SinIn
• SinInOut
• CubicIn
• CubicOut
• CubicInOut
• BounceOut
• BounceIn
• SpringIn
• SpringOut