Tipos de Alert (Xamarin)
En este tutorial vamos a utilizar los distintos tipos de alert en Xamarin. Estos «Cuadros de diálogo emergentes» son muy útiles para dar dinamismo a una aplicación Xamarin, ya sea para mostrar errores, para notificar al usuario o bien para realizar una acción concreta la cual quieres que aparezca sobre la pantalla principal.
Creación del Proyecto
Lo primero que debemos hacer es crear un nuevo proyecto Xamarin.Forms en Visual Studios.
Dejaremos todo por defecto, es decir, nos creará las aplicaciones para Android, IOS y Windows(UWP).
Plantilla XAML
A continuación, podremos copiar el código XAML para facilitar el proceso, ya que hemos creado un diseño parecido a una página de registro sobre MainPage.
<?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:EjemploAlert"
x:Class="EjemploAlert.MainPage">
<ContentPage.Content>
<StackLayout Margin="0,40,0,0">
<StackLayout Orientation="Horizontal"
HorizontalOptions="CenterAndExpand">
<Label Text="Registro"
HorizontalOptions="Center"
Font="40"
TextColor="Black"
/>
<Button x:Name="info"
Text="i"
TextColor="White"
Margin="0,5,0,20"
BackgroundColor="Black"
HorizontalOptions="CenterAndExpand"
FontSize="18"
WidthRequest="30"
HeightRequest="30"
BorderRadius="40"/>
</StackLayout>
<StackLayout Orientation="Horizontal"
HorizontalOptions="CenterAndExpand"
Margin="0,20,0,20">
<Entry x:Name="name"
Placeholder="Nombre"
HorizontalOptions="Start"
WidthRequest="150"/>
<Entry x:Name="surname"
HorizontalOptions="End"
Placeholder="Apellido"
WidthRequest="150"/>
</StackLayout>
<StackLayout Orientation="Horizontal"
HorizontalOptions="CenterAndExpand"
Margin="0,20,0,20">
<Button x:Name="sex"
Text="Seleccione un Sexo"
HorizontalOptions="Start"
TextColor="White"
BackgroundColor="Black"
WidthRequest="150"/>
<Entry x:Name="age"
HorizontalOptions="End"
Placeholder="Edad"
WidthRequest="150"
Keyboard="Telephone"
MaxLength="2"/>
</StackLayout>
<Button x:Name="terms"
Text="Condiciones de uso"
HorizontalOptions="CenterAndExpand"
TextColor="White"
BackgroundColor="Black"
WidthRequest="150"
Margin="0,20,0,20"/>
<Button x:Name="register"
Text="Registrar"
HorizontalOptions="CenterAndExpand"
TextColor="White"
BackgroundColor="Black"
WidthRequest="300"
Margin="0,20,0,20"/>
<Label x:Name="result"
TextColor="Green"
Margin="0,20,0,20"
HorizontalOptions="CenterAndExpand"
FontSize="35"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Hay que tener en cuenta los x:Name que tienen los elementos, ya que son los nombres que usaremos en el código C#.
Código C#
Lo primero que vamos hacer sobre MainPage.xaml.cs es crear en el constructor dos variables globales para almacenar los datos necesarios para el campo Sexo y el campo Términos de uso, ya que son los que van a disponer de un alert con acciones.
bool termresult = false;
String sexresult = null;En este ejemplo lo que queremos es que el usuario rellene los datos y nos los deje vacíos, por lo que cuando accionamos el botón de «Registrar» tendremos que validar si el resto de campos son null o no, y dependiendo de ellos, mostrar un texto o un alert de advertencia.
this.register.Clicked += async (sender, args) =>
{
this.result.Text = "";
if(this.name.Text != null && this.surname.Text != null
&& this.age.Text != null && sexresult != null)
{
if (termresult)
{
this.result.Text = "Registrado correctamente.";
}
else
{
await DisplayAlert("Advertencia", "No ha
aceptado los terminos.", "Cerrar");
}
}
else
{
await DisplayAlert("Advertencia", "Hay campos si
rellenar.", "Cerrar");
}
};DisplayAlert() muestra un «Cuadro de diálogo» simple, aunque también puede ser un «cuadro de diálogo» de sí y no, como en el caso del botón de términos de uso.
this.terms.Clicked += async (sender, args) =>
{
termresult = await DisplayAlert("Términos de Uso",
"¿Acepta nuestra política de uso de datos?", "Si",
"No");
};En el caso del botón para seleccionar sexo, el alert a mostrar tiene que permitirnos seleccionar una de entre varia opciones, este alert será un DisplayActionSheet().
this.sex.Clicked += async (sender, args) =>
{
sexresult = await DisplayActionSheet("Selección de
sexo", "Cancelar", null, "Hombre", "Mujer", "Prefiero
no contestar");
};Para el último tipo de alert, necesitaremos crear un nuevo ContentPage sobre el Proyecto principal, al cual vamos a llamar Info.xaml.
Info.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"
x:Class="EjemploAlert.Info">
<ContentPage.Content>
<StackLayout Margin="0,40,0,0">
<Label Text="Información Adicional"
HorizontalOptions="Center"
Font="40"
TextColor="Black"
/>
<Label Text="Esto es una pagina de información adicional, tiene que rellenar todos los campos para proceder al registro. Gracias."
HorizontalOptions="CenterAndExpand"
HorizontalTextAlignment="Center"/>
<Button x:Name="close"
Text="Cerrar"
HorizontalOptions="CenterAndExpand"
TextColor="White"
BackgroundColor="Black"
WidthRequest="200"
Margin="0,30,0,0"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>Info.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace EjemploAlert
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Info : ContentPage
{
public Info()
{
InitializeComponent ();
this.close.Clicked += async (sender, args) =>
{
await Navigation.PopModalAsync();
};
}
}
}En MainPage.xaml.cs añadiremos el evento para botón de información, el cual abrirá el alert de tipo modal.
this.info.Clicked += async (sender, args) =>
{
Info modal = new Info();
await Navigation.PushModalAsync(modal);
};Con esto ya tendríamos todo lo necesario para probar los distintos tipos de alert que hemos usado.
Ten en cuenta que si no estás muy familiarizado con el lenguaje XAML, puede resultar un poco lioso la creación del diseño, ya que el apartado de programación es igual que en C#.
Muchas gracias por seguir este tutorial paso a paso de cómo utilizar los distintos tipos de alert en Xamarin.
Autor/a: Daniel Pizarro Cuervo
Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin
Centro: Tajamar
Año académico: 2018-2019
Enlace del Proyecto: Github.
Enlace del vídeo: Video