XF Popup.Animation

Hello Xamarians,

Today, I am here with another post in which I am telling you about Xamarin forms Animation with PopupPage, before going through the article I would like to tell you about Rg.Plugins.Popup. It is very useful Plugin used to create popup window in xamarin forms. we can also put animations to these popups so that they look more attractive and enhance user experience. This article is about XF Animation with PopupPage.

In this article We will learn how to use XF Animation with popuppage.

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

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.

Now, we are going to do some  XAML coding and writing some button 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:XFPopupAnimation"
x:Class="XFPopupAnimation.MainPage">


<StackLayout>
<!-- Place new controls here -->
<Label Text="Welcome to Xamarin.Forms Popup Animation!" 
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />


<Button Text="Registration Page" Clicked="Button_Clicked_1"/>
<Button Text="Login Page" Clicked="Button_Clicked"/>
</StackLayout>
</ContentPage>

Then, write code for popup navigation:

private async void Button_Clicked(object sender, EventArgs e)
{
await Navigation.PushPopupAsync(new LoginPopupPage());
}


private async void Button_Clicked_1(object sender, EventArgs e)
{
await Navigation.PushPopupAsync(new RegPage());
} 

Now, we are creating "RegPage.xaml" PopupPages.

<?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="XFPopupAnimation.LoginPopupPage"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup" >
<pages:PopupPage.Resources>
<ResourceDictionary>
<Style x:Key="EntryStyle" TargetType="Entry">
<Setter Property="PlaceholderColor" Value="#9cdaf1"/>
<Setter Property="TextColor" Value="#7dbbe6"/>
</Style>
</ResourceDictionary>
</pages:PopupPage.Resources>
<pages:PopupPage.Animation>
<animations:ScaleAnimation PositionIn="Bottom" PositionOut="Center" ScaleIn="1" ScaleOut="0.7" DurationIn="700" EasingIn="BounceOut"/>
</pages:PopupPage.Animation>
<ScrollView HorizontalOptions="Center" VerticalOptions="Center">
<AbsoluteLayout>
<Frame x:Name="FrameContainer" Margin="15" HorizontalOptions="Center" BackgroundColor="White">
<StackLayout IsClippedToBounds="True" Padding="10, 5" Spacing="3">
<Image HorizontalOptions="Center" x:Name="OctocatImage" Margin="10" HeightRequest="150" WidthRequest="150" Source="Logo"/>


<Entry HorizontalOptions="Center" x:Name="UsernameEntry" Style="{StaticResource EntryStyle}" Placeholder="Username" />
<Entry HorizontalOptions="Center" x:Name="PasswordEntry" Style="{StaticResource EntryStyle}" Placeholder="Password" IsPassword="True"/>
<Button Margin="10, 5" BackgroundColor="#7dbbe6" HorizontalOptions="Fill" x:Name="LoginButton" Text="Login">
<Button.HeightRequest>
<OnPlatform x:TypeArguments="x:Double" Android="50" iOS="30" WinPhone="30"/>
</Button.HeightRequest>
</Button>
</StackLayout>
</Frame>
<ContentView AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="1, 0, -1, -1">
<ContentView.GestureRecognizers>
<TapGestureRecognizer Tapped="OnCloseButtonTapped"/>
</ContentView.GestureRecognizers>
<Image x:Name="CloseImage" HeightRequest="30" WidthRequest="30">
<Image.Source>
<OnPlatform x:TypeArguments="ImageSource" Android="close_circle_button.png" iOS="close_circle_button.png"/>
</Image.Source>
</Image>
</ContentView>
</AbsoluteLayout>
</ScrollView>
</pages:PopupPage>

Now, we are coding in C#.

using Rg.Plugins.Popup.Extensions;
using Rg.Plugins.Popup.Pages;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;


namespace XFPopupAnimation
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class LoginPopupPage : PopupPage
{
public LoginPopupPage ()
{
InitializeComponent ();
}
public bool IsAnimationEnabled { get; private set; } = true;
protected override void OnAppearing()
{
base.OnAppearing();


FrameContainer.HeightRequest = -1;
if (!IsAnimationEnabled)
{
CloseImage.Rotation = 0;
CloseImage.Scale = 1;
CloseImage.Opacity = 1;


LoginButton.Scale = 1;
LoginButton.Opacity = 1;


UsernameEntry.TranslationX = PasswordEntry.TranslationX = 0;
UsernameEntry.Opacity = PasswordEntry.Opacity = 1;


return;
}


CloseImage.Rotation = 380;
CloseImage.Scale = 0.3;
CloseImage.Opacity = 0;
LoginButton.Scale = 0.3;
LoginButton.Opacity = 0;
UsernameEntry.TranslationX = PasswordEntry.TranslationX = -10;
UsernameEntry.Opacity = PasswordEntry.Opacity = 0;
}


protected override async Task OnAppearingAnimationEnd()
{
if (!IsAnimationEnabled)
return;


var translateLength = 400u;


await Task.WhenAll(
UsernameEntry.TranslateTo(0, 0, easing: Easing.SpringOut, length: translateLength),
UsernameEntry.FadeTo(1),
(new Func<Task>(async () =>
{
await Task.Delay(200);
await Task.WhenAll(
PasswordEntry.TranslateTo(0, 0, easing: Easing.SpringOut, length: translateLength),
PasswordEntry.FadeTo(1));


}))());


await Task.WhenAll(
CloseImage.FadeTo(1),
CloseImage.ScaleTo(1, easing: Easing.SpringOut),
CloseImage.RotateTo(0),
LoginButton.ScaleTo(1),
LoginButton.FadeTo(1));
}


protected override async Task OnDisappearingAnimationBegin()
{
if (!IsAnimationEnabled)
return;


var taskSource = new TaskCompletionSource<bool>();


var currentHeight = FrameContainer.Height;


await Task.WhenAll(
UsernameEntry.FadeTo(0),
PasswordEntry.FadeTo(0),
LoginButton.FadeTo(0));


FrameContainer.Animate("HideAnimation", d =>
{
FrameContainer.HeightRequest = d;
},
start: currentHeight,
end: 170,
finished: async (d, b) =>
{
await Task.Delay(300);
taskSource.TrySetResult(true);
});


await taskSource.Task;
}


private void OnCloseButtonTapped(object sender, EventArgs e)
{
CloseAllPopup();
}


protected override bool OnBackgroundClicked()
{
CloseAllPopup();


return false;
}


private async void CloseAllPopup()
{
await Navigation.PopAllPopupAsync();
}
}
}

Now, we are creating "RegPage.xaml" PopupPages.

<?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="XFPopupAnimation.RegPage"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup" >
<pages:PopupPage.Resources>
<ResourceDictionary>
<Style x:Key="EntryStyle" TargetType="Entry">
<Setter Property="PlaceholderColor" Value="#9cdaf1"/>
<Setter Property="TextColor" Value="#7dbbe6"/>
</Style>
</ResourceDictionary>
</pages:PopupPage.Resources>


<pages:PopupPage.Animation>
<animations:ScaleAnimation PositionIn="Bottom" PositionOut="Center" ScaleIn="1" ScaleOut="0.7" DurationIn="700" EasingIn="BounceOut"/>
</pages:PopupPage.Animation>


<ScrollView HorizontalOptions="Center" VerticalOptions="Center">
<AbsoluteLayout>
<Frame x:Name="FrameContainer" Margin="15" HorizontalOptions="Center" BackgroundColor="White">
<StackLayout IsClippedToBounds="True" Padding="10, 5" Spacing="3">
<Image Source="Logo" HorizontalOptions="Center" x:Name="OctocatImage" Margin="10" HeightRequest="150" WidthRequest="150"/>
<Entry HorizontalOptions="Center" x:Name="FnameEntry" Style="{StaticResource EntryStyle}" Placeholder="First Name" />
<Entry HorizontalOptions="Center" x:Name="LnameEntry" Style="{StaticResource EntryStyle}" Placeholder="Last Name" />
<Entry HorizontalOptions="Center" x:Name="UsernameEntry" Style="{StaticResource EntryStyle}" Placeholder="Username" />
<Entry HorizontalOptions="Center" x:Name="PasswordEntry" Style="{StaticResource EntryStyle}" Placeholder="Password" IsPassword="True"/>
<Button Margin="10, 5" BackgroundColor="#7dbbe6"
HorizontalOptions="Fill" x:Name="LoginButton" Text="Login">
<Button.HeightRequest>
<OnPlatform x:TypeArguments="x:Double" Android="50" iOS="30" WinPhone="30"/>
</Button.HeightRequest>
</Button>
</StackLayout>
</Frame>
<ContentView AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="1, 0, -1, -1">
<ContentView.GestureRecognizers>
<TapGestureRecognizer Tapped="OnCloseButtonTapped"/>
</ContentView.GestureRecognizers>
<Image x:Name="CloseImage" HeightRequest="30" WidthRequest="30">
<Image.Source>
<OnPlatform x:TypeArguments="ImageSource" Android="close_circle_button.png" iOS="close_circle_button.png"/>
</Image.Source>
</Image>
</ContentView>
</AbsoluteLayout>
</ScrollView>
</pages:PopupPage>

Some white RegPage Code for animation...
We are using override method for the animation which name is

1.  override void OnAppearing()
2.  override async Task OnAppearingAnimationEnd()
3.  override async Task OnDisappearingAnimationBegin()
4.  override bool OnBackgroundClicked()

We white c# Code for what animation appearing when open registration page.

using Rg.Plugins.Popup.Extensions;
using Rg.Plugins.Popup.Pages;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;


using Xamarin.Forms;
using Xamarin.Forms.Xaml;


namespace XFPopupAnimation
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class RegPage : PopupPage
{
public RegPage ()
{
InitializeComponent ();
}
public bool IsAnimationEnabled { get; private set; } = true;
protected override void OnAppearing()
{
base.OnAppearing();


FrameContainer.HeightRequest = -1;
if (!IsAnimationEnabled)
{
CloseImage.Rotation = 0;
CloseImage.Scale = 1;
CloseImage.Opacity = 1;


LoginButton.Scale = 1;
LoginButton.Opacity = 1;


FnameEntry.TranslationX =
LnameEntry.TranslationX =
UsernameEntry.TranslationX =
PasswordEntry.TranslationX = 0;
FnameEntry.TranslationX =
LnameEntry.TranslationX =
UsernameEntry.Opacity =
PasswordEntry.Opacity = 1;


return;
}


CloseImage.Rotation = 380;
CloseImage.Scale = 0.3;
CloseImage.Opacity = 0;
LoginButton.Scale = 0.3;
LoginButton.Opacity = 0;
FnameEntry.TranslationX =
LnameEntry.TranslationX =
UsernameEntry.TranslationX =
PasswordEntry.TranslationX = -10;
FnameEntry.Opacity =
LnameEntry.Opacity =
UsernameEntry.Opacity =
PasswordEntry.Opacity = 0;
}


protected override async Task OnAppearingAnimationEnd()
{
if (!IsAnimationEnabled)
return;


var translateLength = 800u;


await Task.WhenAll(
FnameEntry.TranslateTo(0, 0, easing: Easing.SpringOut, length: translateLength),
FnameEntry.FadeTo(1),
(new Func<Task>(async () =>
{
await Task.Delay(400);
await Task.WhenAll(


LnameEntry.TranslateTo(0, 0, easing: Easing.SpringOut, length: translateLength),
LnameEntry.FadeTo(1),
Task.Delay(200),
UsernameEntry.TranslateTo(0, 0, easing: Easing.SpringOut, length: translateLength),
UsernameEntry.FadeTo(1),
Task.Delay(200),
PasswordEntry.TranslateTo(0, 0, easing: Easing.SpringOut, length: translateLength),
PasswordEntry.FadeTo(1));
}))());


await Task.WhenAll(
CloseImage.FadeTo(1),
CloseImage.ScaleTo(1, easing: Easing.SpringOut),
CloseImage.RotateTo(0),
LoginButton.ScaleTo(1),
LoginButton.FadeTo(1));
}


protected override async Task OnDisappearingAnimationBegin()
{
if (!IsAnimationEnabled)
return;


var taskSource = new TaskCompletionSource<bool>();


var currentHeight = FrameContainer.Height;


await Task.WhenAll(
FnameEntry.FadeTo(0),
LnameEntry.FadeTo(0),
UsernameEntry.FadeTo(0),
PasswordEntry.FadeTo(0),
LoginButton.FadeTo(0));


FrameContainer.Animate("HideAnimation", d =>
{
FrameContainer.HeightRequest = d;
},
start: currentHeight,
end: 170,
finished: async (d, b) =>
{
await Task.Delay(500);
taskSource.TrySetResult(true);
});


await taskSource.Task;
}


private void OnCloseButtonTapped(object sender, EventArgs e)
{
CloseAllPopup();
}


protected override bool OnBackgroundClicked()
{
CloseAllPopup();


return false;
}


private async void CloseAllPopup()
{
await Navigation.PopAllPopupAsync();
}
}
}

TADDA!!!!!!!!!!!!!!!

If you want the full source code click on this URL
The XF Popup.Animation is working successfully.

If you are lazy download Click Here
If you want to watch this video Click Here