Monday 7 May 2018

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
at
Labels: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Featured Post

Sliding Entry In Xamarin.Forms

  Today, I am going to show you how to create a Custom Slide entry in Xamarin.Forms with animation and also using gradient color. here is Y...

  • Xamarin.Forms Curved Entry
    Hello My Xamarin Friends, This is my new post in which I am going to tell you how  to customize the Entry.  Entry is a rectangular input...
  • Xamarin.Forms Custom Button
    Hello Friends, Today, in this post we are taking about button and how we can use it in xamarin project. Also I can demonstrate how to acce...
  • Xamarin.Forms Custom Slider
    Hello My Xamarin Friends, welcome back to my new post, today i would like to talk about xamarin forms CustomSlider, so let's start, ...