Alert With Rg.Plugins.Popuppage

Hey Xamarians,

This is my second article on the Rg.Plugins.Popuppage plugin. With the help of this plugin, we can create a warning notification and we need to customize our type.

Alert

Alert shows some information or warning such as exceptions, and whether there is an open net connection or not. So it warns me whether a network connection is available or not.

If you have not read my last article, before proceeding with this article please Click Here.

Implementation

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

Then, we are creating a page whose name is AlertPopup

=> Go to project solution
=> Right click on pcl project
=> Click on "New Item" then select Page.

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 can wirte C# code and it gives a condition for error, warning, success, and note.

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, we go back to MainPage.xaml and create buttons for alerts.

<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."));
}

TA DA!!!!!!!!!!!!!!!

AlertPopup is working successfully.

3 Comments

Join the conversation! Your thoughts help the community grow.

Achraf Ben Alaya8y ago
Tried this , awesome but tried to change the position in to Bottom but it doesn't work !
Arvind Chourasiya8y ago
It would be nice if you had provided screenshots of output.
Ahsan Siddique8y ago
Not bad Sumit Singh Sisodia...