Alert With Rg.Plugins.Popuppage

Hey Xamarians,
This is the second article on the "Rg.Plugins.Popuppage" plugin. With the help of this plugin, we are showing a warning or alert notification and we have to need to optimize it with the help of "Rg.Plugins.Popuppage".

Alert- Alerts have the responsibility of caution and warning. The warning works to show some information, caution, exception, and all other things, So that we can know what we have done wrong or what to do. As if the net connection is open or not?.

If you have not read my last article, Please see my old article before proceeding with this article. click here to see my old Rg.Plugin.Popup article.
So, start with my old project.

Implemantantion:-

Open Visual Studio and open project an "XFPopupAnimation"...

• Then, we are creating a page which name is AlertPopup
• Go to XFPopupAnimation project solution, right click on PCL project.
• Select Add and click on "New Item" then select Page.
• Here is showing a dialog box we select a page and then giving the name which is "AlertPopup.xaml" and click ok.
• Now firstly we have to change the "ContentPage" to "pages:PopupPage", this is a page type.

Here I am writing XAML code for the alert.

<?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.AlertPopup"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
BackgroundColor="Transparent"
InputTransparent="True"
HasSystemPadding="False"
CloseWhenBackgroundIsClicked="False">
<pages:PopupPage.Animation>
<animations:MoveAnimation PositionIn="Top" PositionOut="Top"/>
</pages:PopupPage.Animation>
<StackLayout x:Name="Mainstk" Orientation="Horizontal" BackgroundColor="#43A047" VerticalOptions="Start" HeightRequest="50" Padding="20,0">
<Image x:Name="imgAlert" Source="note" HeightRequest="24" WidthRequest="24"/>
<Label x:Name="LblMsg" TextColor="Black" FontSize="Micro" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</StackLayout>
</pages:PopupPage>

 
Now, we will write C # code and give a condition for error, warning, success, and notes.

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


namespace XFPopupAnimation
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class AlertPopup : PopupPage
{
public AlertPopup ()
{
InitializeComponent ();
}
public AlertPopup(string mtitle, string msg)
{
InitializeComponent();
ChangecolorMsg(mtitle, msg);
}
private async void ChangecolorMsg(string mtitle, string msg)
{
if (mtitle == "W")
{
imgAlert.Source = "warning";
Mainstk.BackgroundColor = Color.FromHex("#FCF8E3");
}
else if (mtitle == "S")
{
imgAlert.Source = "success";
Mainstk.BackgroundColor = Color.FromHex("#43A047");
}
else if (mtitle == "E")
{
imgAlert.Source = "error";
Mainstk.BackgroundColor = Color.FromHex("#F2DEDE");
}
else
{
imgAlert.Source = "note";
Mainstk.BackgroundColor = Color.FromHex("#D9EDF7");
}


LblMsg.Text = msg;
await Task.Delay(500);
await Task.WhenAll( imgAlert.ScaleTo(1.3, 400),
LblMsg.ScaleTo(1.1, 500),
imgAlert.RotateTo(360, 600)
);
}


protected override void OnAppearing()
{
base.OnAppearing();


HidePopup();
}


private async void HidePopup()
{
await Task.Delay(4000);
await PopupNavigation.RemovePageAsync(this);
}
}
}

Then, by returning to MainPage.xaml we will create buttons to show the alert and give them navigation.

<Button x:Name="btnError" Text="Error!" Clicked="btnError_Clicked"/>
<Button x:Name="btnWarn" Text="Warning!" Clicked="btnWarn_Clicked"/>
<Button x:Name="btnSucc" Text="Success!" Clicked="btnSucc_Clicked"/>
<Button x:Name="btnNote" Text="Note!" Clicked="btnNote_Clicked"/>

Here is the c# code.

private async void btnError_Clicked(object sender, EventArgs e)
{
await Navigation.PushPopupAsync(new AlertPopup("E", "Error!, Problem has been occurred while submitting your data."));
}


private async void btnWarn_Clicked(object sender, EventArgs e)
{
await Navigation.PushPopupAsync(new AlertPopup("W", "Warning!, There was a problem with your Network Connection"));
}


private async void btnSucc_Clicked(object sender, EventArgs e)
{
await Navigation.PushPopupAsync(new AlertPopup("S", "Success!, Your Message has been sent successfully."));
}


private async void btnNote_Clicked(object sender, EventArgs e)
{
//await Navigation.PushPopupAsync(new AlertPopup("N"));
await Navigation.PushPopupAsync(new AlertPopup("N", "Note!, Please read the comments carefully."));
}

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

AlertPopup is working successfully.
If you are lazy Click Here for download.
If you want to watch this video, Click Here.