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 No comments:
Labels: , ,

Sunday, 15 April 2018

Xamarin.Forms Custom Loader


Hello xamarians,
How are you all, Hope all are good. I am here with a new post on (Custom Loader). Popups are very important in mobile apps.

Please see my older article, before proceeding this article, and url is Click Here
You know very well activity indicator is to define the background process is going on. So start with my old project(Popup Demo).
We learned in the old article how do we create popups in xamarin.forms. So now, by moving forward from that project, we will create custom loader.



Implementation:-
In this demo, we are using GIF image, for this reason, we will use the ffimageloading plugin to display the GIF image.
Step-1
Now we can install "FFImageLoading" plugins
Now, Right click on project then click on Nuget Package.
Click  browse and then search “FFImageLoading” plugins
, select  Plugins and  then check projects in which we want to add  this plugin.

Now we create 4 buttons for the navigation to the indecats loader.
1.  CustomGIFLoader.xaml
2.  CustomLoaderPage.xaml
3.  LoadingPopupPage.xaml
4.  RandomColorLoader.xaml

CustomGIFLoader.xaml
Write some xaml code for customGIFLoader.xaml, it is used for animation loader. When we do GIF, we have to make sure that the ffimageloading reference.
CustomGIFLoader.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"
x:Class="MyPopupDemo.CustomGIFLoader"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
xmlns:local="clr-namespace:App2.CustomRenderer"
InputTransparent="False" HasSystemPadding="True"
CloseWhenBackgroundIsClicked="True" Padding="20,100"
xmlns:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms">
<pages:PopupPage.Animation>
<animations:MoveAnimation PositionIn="Center" PositionOut="Center"/>
</pages:PopupPage.Animation>
<Frame CornerRadius="15" OutlineColor="Black" HorizontalOptions="Center" VerticalOptions="Center">
<StackLayout HorizontalOptions="FillAndExpand" >
<Label Text="Please Wait..." TextColor="Black" FontSize="Large"/>
<BoxView HeightRequest="1" BackgroundColor="Gray"/>
<StackLayout Spacing="0" >
<ff:CachedImage Source="loader3.gif" HeightRequest="200" WidthRequest="200"/>
<Label Text="Loading......" TextColor="Black" />
</StackLayout>
</StackLayout>
</Frame>
</pages:PopupPage>

CustomLoaderPage.xaml
Write some xaml code for CustomLoaderPage.xaml. this is used for custom message loader.
CustomLoaderPage.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"
x:Class="MyPopupDemo.CustomLoaderPage"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
xmlns:local="clr-namespace:App2.CustomRenderer"
InputTransparent="False"
HasSystemPadding="True"
CloseWhenBackgroundIsClicked="True"
Padding="20,100">
<pages:PopupPage.Animation>
<animations:MoveAnimation
PositionIn="Center"
PositionOut="Center"/>
</pages:PopupPage.Animation>
<Frame CornerRadius="15" OutlineColor="Black" HorizontalOptions="Center" VerticalOptions="Center">
<StackLayout HorizontalOptions="FillAndExpand" >
<Label Text="In Progress" TextColor="Black" FontSize="Large"/>
<BoxView HeightRequest="1" BackgroundColor="Gray"/>
<StackLayout Spacing="0" Orientation="Horizontal">
<ActivityIndicator Color="Blue"
IsRunning="True"
IsEnabled="True"
VerticalOptions="Center"
HorizontalOptions="Center"
HeightRequest="70"
WidthRequest="70"/>
<Label Text="Loading......" TextColor="Black" FontSize="Large"/>
</StackLayout>
</StackLayout>
</Frame>
</pages:PopupPage>

LoadingPopupPage.xaml
Write code for LoadingPopupPage.xaml. this is used for simply indicate waiting.

LoadingPopupPage.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"
x:Class="MyPopupDemo.LoadingPopupPage"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
CloseWhenBackgroundIsClicked="False">
<ActivityIndicator Color="White" IsRunning="True" IsEnabled="True" VerticalOptions="Center"
HorizontalOptions="Center" HeightRequest="70" WidthRequest="70"/>
</pages:PopupPage>

RandomColorLoader.xaml
Write code for RandomColorLoader.xaml.
Use of random color in 1 second and write some c# code written for running every 1 second for changing the color.
RandomColorLoader.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"
x:Class="MyPopupDemo.RandomColorLoader"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
xmlns:local="clr-namespace:App2.CustomRenderer"
InputTransparent="False" HasSystemPadding="True"
CloseWhenBackgroundIsClicked="True" Padding="100">
<pages:PopupPage.Animation>
<animations:MoveAnimation PositionIn="Center" PositionOut="Center"/>
</pages:PopupPage.Animation>
<Frame CornerRadius="15" OutlineColor="Black" HorizontalOptions="Center" VerticalOptions="Center">
<StackLayout HorizontalOptions="FillAndExpand" >
<Label x:Name="customlbl" Text="In Progress" TextColor="Black" FontSize="Large"/>
<BoxView x:Name="custombox" HeightRequest="1" BackgroundColor="Gray"/>
<StackLayout Orientation="Horizontal">
<ActivityIndicator x:Name="customloader" Color="Blue"
IsRunning="True" IsEnabled="True"
VerticalOptions="Center" HorizontalOptions="Center"
HeightRequest="70" WidthRequest="70"/>
<Label x:Name="customsg" Text="Loading......" TextColor="Black" FontSize="Large"/>
</StackLayout>
</StackLayout>
</Frame>
</pages:PopupPage>


This is c# code for random color changing…..

public partial class RandomColorLoader : PopupPage
{
Random random = new Random();
public RandomColorLoader ()
{
InitializeComponent ();
Device.StartTimer(TimeSpan.FromSeconds(1), () =>
{
custombox.Color = customlbl.TextColor = customsg.TextColor =
customloader.Color =
Color.FromRgb(random.Next(0, 255), random.Next(0, 255), random.Next(0, 255));
// True = Repeat again, False = Stop the timer
return true;
});
}
}


Now we running ………….
TADDA!!!!!!!!!!!!



working custom loader successfully……

If you are lazzy download click here 

If you want to watch this video, Click Here  
at 3 comments:
Labels: ,
Subscribe to: Posts (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 Custom Switch Button
     Hello Xamarians, I am here with a new blog on Switch button. As you all know what is switch button and how it works. For example in g...
  • 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...
  • XF Styling With CSS
    Hello friends,         How are you, hope you all are fine. Today in this article I am telling you about the CSS in Xamarin.Forms, XAML...