How to create a cross-platform popup dialog in Xamarin? - xamarin

Question

In our Xamarin mobile app, I need to display a popup dialog that is timer based. Basically, if the user does not click on OK button, the dialog should still go away within ten seconds.
On the net, there are references to creating custom dialogs for Android and for iOS. However, I did not find any reference to creating a cross-platform dialog.
There seems to be a third party nuget package that creates popup dialogs -
http://www.sparkhound.com/learn/blog/creating-a-modal-popup-dialog-in-xamarin-forms, However, I would prefer not to use a third party package. Plus, I don't know if the library supports timer-based dialogs.
Is there any way to create a simple cross-platform dialog? From usage perspective, here is the prototype I am thinking:
static void DisplayAlert(string title, string body, int msec);

Answer 1

Answer
Here's a custom popup that I've created in Xamarin.Forms. It includes some fancy animations and even blurs the background. I've used it successfully in a couple apps that I've built.
You can trigger this custom popup by calling ShowView. It has a timer and will dismiss itself in 10 seconds, or you can dismiss it by calling HideView.
Code
Custom Popup Base Class
using System;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace MyNamespace
{
public abstract class OverlayContentView : ContentView
{
#region Constant Fields
readonly BoxView _backgroundOverlayBoxView;
readonly Frame _overlayFrame;
readonly RelativeLayout _relativeLayout;
#endregion
#region Fields
View _overlayContent;
#endregion
#region Constructors
protected OverlayContentView(bool isChildOfNavigationPage)
{
_backgroundOverlayBoxView = new BoxView
{
BackgroundColor = ColorConstants.WhiteWith75Opacity
};
_backgroundOverlayBoxView.Opacity = 0;
_overlayFrame = new Frame
{
HasShadow = true,
BackgroundColor = Color.White
};
_overlayFrame.Scale = 0;
_relativeLayout = new RelativeLayout();
Func<RelativeLayout, double> getOverlayContentHeight = (p) => OverlayContent.Measure(p.Width, p.Height).Request.Height;
Func<RelativeLayout, double> getOverlayContentWidth = (p) => OverlayContent.Measure(p.Width, p.Height).Request.Width;
_relativeLayout.Children.Add(_backgroundOverlayBoxView,
Constraint.Constant(-10),
Constraint.Constant(0),
Constraint.RelativeToParent(parent => parent.Width + 20),
Constraint.RelativeToParent(parent => parent.Height)
);
_relativeLayout.Children.Add(_overlayFrame,
Constraint.RelativeToParent(parent => parent.Width / 2 - getOverlayContentWidth(parent) / 2 - 25),
Constraint.RelativeToParent(parent =>
{
switch (isChildOfNavigationPage)
{
case true:
return parent.Height / 4 - getOverlayContentHeight(parent) / 2;
default:
return parent.Height / 2 - getOverlayContentHeight(parent) / 2 - 10;
}
}),
Constraint.RelativeToParent(parent => getOverlayContentWidth(parent) + 50),
Constraint.RelativeToParent(parent => getOverlayContentHeight(parent) + 40)
);
}
#endregion
#region Properties
public View OverlayContent
{
get => _overlayContent;
set
{
_overlayContent = value;
_overlayContent.Scale = 0;
_overlayFrame.Content = _overlayContent;
Content = _relativeLayout;
}
}
#endregion
#region Methods
public void ShowView(bool shouldDisappearAfterTimeoutExpires = false, int timeoutInSeconds = 10)
{
const uint overlayContentViewAnimationTime = 300;
const double overlayContentViewMaxSize = 1.05;
const double overlayContentViewNormalSize = 1;
Device.BeginInvokeOnMainThread(async () =>
{
IsVisible = true;
_backgroundOverlayBoxView.Opacity = 1;
await Task.WhenAll(OverlayContent?.ScaleTo(overlayContentViewMaxSize, overlayContentViewAnimationTime, Easing.CubicOut),
_overlayFrame?.ScaleTo(overlayContentViewMaxSize, overlayContentViewAnimationTime, Easing.CubicOut));
await Task.WhenAll(OverlayContent?.ScaleTo(overlayContentViewNormalSize, overlayContentViewAnimationTime, Easing.CubicOut),
_overlayFrame?.ScaleTo(overlayContentViewNormalSize, overlayContentViewAnimationTime, Easing.CubicOut));
if (!shouldDisappearAfterTimeoutExpires)
return;
await Task.Delay(TimeSpan.FromSeconds(timeoutInSeconds));
HideView();
});
}
public void HideView()
{
Device.BeginInvokeOnMainThread(async () =>
{
await this.FadeTo(0);
IsVisible = false;
InputTransparent = true;
Opacity = 1;
_backgroundOverlayBoxView.Opacity = 0;
OverlayContent.Scale = 0;
_overlayFrame.Scale = 0;
});
}
#endregion
}
}
Implementation of Custom Popup
using Xamarin.Forms;
namespace MyNamespace
{
public class WelcomeView : OverlayContentView
{
public WelcomeView() : base(true)
{
const string titleText = "Welcome";
const string bodyText = "Enjoy InvestmentDataSampleApp";
const string okButtonText = "Ok, thanks!";
var titleLabel = new Label
{
FontAttributes = FontAttributes.Bold,
Text = titleText,
HorizontalTextAlignment = TextAlignment.Center
};
var bodyLabel = new Label
{
Text = bodyText,
HorizontalTextAlignment = TextAlignment.Center
};
var okButton = new Button
{
TextColor = Color.White,
FontAttributes = FontAttributes.Bold,
Margin = new Thickness(5),
Text = okButtonText,
BackgroundColor = new Color(0, 0, 0, 0.75),
TextColor = Color.White,
BorderWidthProperty = 1,
BorderColor = new Color(0, 0, 0, 0.75),
};
okButton.Clicked += (sender, e) => this.HideView();
var textAndButtonStack = new StackLayout
{
HorizontalOptions = LayoutOptions.CenterAndExpand,
Spacing = 20,
Children = {
titleLabel,
bodyLabel,
okButton
}
};
OverlayContent = textAndButtonStack;
}
}
}
Sample App
For reference, here's a sample app that has implemented the custom popup:
https://github.com/brminnick/InvestmentDataSampleApp

Answer 2

I would suggest having a look at this post, i answered some time ago: Display a popup with xamarin forms
Even though such a system takes some time to implement, it gives you the advantage to call any dialog from anywhere in your app without having to embed the dialog inside your content page(s).
If you want to have your dialog timed, you could simply call it with
Dialogs.ShowLoading();
Xamarin.Forms.Device.StartTimer(TimeSpan.FromSeconds(5), () => { Dialogs.Hide();
return false;
});