En este artículo veremos de una manera fácil y rápida cómo implementar ventanas de despliegue personalizadas utilizando el paquete Rg.Plugins.Popup en una aplicación de Xamarin.Forms.
Introducción
Rg.Plugins.Popup es un complemento multiplataforma para Xamarin.Forms que permite abrir páginas de Xamarin.Forms como una ventana emergente que se puede compartir en iOS, Android y UWP (el soporte de macOS será pronto). Además, el complemento permite usar animaciones muy simples y flexibles para mostrar páginas emergentes.
Comencemos
Para este ejemplo voy a suponer que ya han creado su aplicación en Xamarin.Forms, una vez realizado esto, procedamos a agregar el NuGet Package, esto haciendo clic con el botón derecho sobre la solución y seleccionando “Manage NuGet Packages for Solution”…
Busquemos el plugin Rg.Plugins.Popup, ahora seleccionémoslo, posteriormente marquemos los proyectos en donde deseemos que se instale el complemento.
Se debe instalar una versión del complemento para cada proyecto nativo y PCL / Net.Standard antes de ser utilizado.
Hagamos clic en el botón “Install”.
Inicialización
Comencemos agregando una nueva Page, a la cual denominaremos PopupPage:
Hay que tener en cuenta que cada Popup que necesitemos en nuestra aplicación debe ser del tipo Rg.Plugins.Popup.PopupPage, es decir, no es muy distinto de crear una página normal para Xamarin.Forms, está la podemos definir en XAML o usando código. Para este ejemplo usaré solamente XAML.
Popup Básico
A continuación, tendremos definido un Popup que solo contiene un Label.
XAML
Para abrir el Popup creado en el paso anterior, deberemos crear un botón en nuestro archivo MainPage.xaml.cs y utilizar el siguiente código:
C#
PopupNavigation.PushAsync(new PopupPage());
Resultado
Ok, no se ve mucho como un popup, veamos otro ejemplo.
Popup personalizado
Para brindar una mejor visibilidad a nuestro Popup, agreguemos un Frame centrado en la pantalla y dentro de este añadamos el contenido que queramos mostrar:
XAML
Recordemos realizar la navegación correspondiente para este Popup creado, el código debe de ir en el archivo MainPage.xaml.cs.
Resultado
Propiedades del Componente
Como hemos visto, por default el popup se cierra cuando presionamos fuera del contenido que estamos mostrando, es decir, en el color del fondo, para indicarle que no lo haga, solo deberemos de establecer la propiedad CloseWhenBackgroundIsClicked en false.
Si deseamos editar el color del fondo, podemos hacerlo utilizando la propiedad BackgroundColor.
Además de estas dos, existe la propiedad Animation que trae las opciones de: Scale, Move y Fade.
Veamos un ejemplo con las dos primeras propiedades, en donde recordemos que si establecemos que el popup no debe cerrarse cuando demos click en el fondo, deberemos de brindar una opción para volver al estado anterior, por ejemplo, un botón.
El presente código deberá ir en el flujo de navegación correspondiente, el cual se encuentra en el .CS del MainPage, archivo que hemos modificado de igual manera hasta ahora:
C#
private void Button_Properties_Clicked(object sender, EventArgs e)
{
var propertiedPopup = new PopupPropertiesPage();</pre>
propertiedPopup.BackgroundColor = Color.FromRgba(1, 0, 0, 0.75); propertiedPopup.CloseWhenBackgroundIsClicked = false; PopupNavigation.PushAsync(propertiedPopup); }
PopupPropertiesPage
XAML
Para quitar un popup basta con llamar al método PopAsync del servicio de navegación:
C#
private async void Button_OnClicked(object sender, EventArgs e)
{
await PopupNavigation.PopAsync();
}
Resultado
Popup Animado
Este plugin nos permite como ya lo habíamos mencionado contar con animaciones, las cuales podemos personalizar o modificar algunas ya existentes, como a continuación se muestra:
XAML
Tal y como lo realizamos en el Popup Properties, el siguiente código deberá ir en el flujo de navegación del archivo MainPage.cs:
C#
private void Button_Animation_Clicked(object sender, EventArgs e)
{
var animationPopup = new PopupAnimationPage();
var scaleAnimation = new ScaleAnimation
{
PositionIn = MoveAnimationOptions.Top,
PositionOut = MoveAnimationOptions.Bottom,
ScaleIn = 1.2,
ScaleOut = 0.8,
DurationIn = 400,
DurationOut = 800,
EasingIn = Easing.BounceIn,
EasingOut = Easing.CubicOut,
HasBackgroundAnimation = false
};
animationPopup.Animation = scaleAnimation;
PopupNavigation.PushAsync(animationPopup);
}
Resultado
Listo, con esto hemos terminado, espero les haya servido para mejorar la UI/UX de sus aplicaciones. No olvides que esta biblioteca también es open source y puedes encontrar su código fuente en GitHub. Por cierto, no te olvides de descargar el código fuente de este post, también en GitHub.
¡Hasta la próxima!
