Tutorial sobre los elementos emergentes Xamarin.Forms

Artículo
Developer (Principiante)
Tiempo para finalizar: 6 minutos

Antes de intentar este tutorial, debe haber completado correctamente lo siguiente:

Inicio rápido Compilación de la primera aplicación de Xamarin.Forms.
Tutorial sobre el diseño de pila (StackLayout).
Tutorial sobre los botones (Button).

En este tutorial, aprenderá a:

Mostrar una alerta para solicitar al usuario que realice una selección.
Mostrar una hoja de acción para guiar al usuario a través de una tarea.

Va a usar Visual Studio 2019, o Visual Studio para Mac, para crear una aplicación sencilla que demuestre cómo mostrar elementos emergentes en Xamarin.Forms. En las capturas de pantalla siguientes se muestra la aplicación final:

Visualización de una alerta

5 minutos restantes

Xamarin.Forms tiene una ventana emergente modal, conocida como alerta, para mostrar alertas al usuario o realizar preguntas sencillas. En este ejercicio, usará el método DisplayAlert, de la clase Page, para mostrar una alerta al usuario y formular una pregunta sencilla.

Visual Studio
Visual Studio para Mac

Para completar este tutorial debe tener Visual Studio 2019 (versión más reciente), con la carga de trabajo Desarrollo para dispositivos móviles con .NET instalada. Además, necesita un equipo Mac emparejado para compilar la aplicación del tutorial en iOS. Para obtener información sobre la instalación de la plataforma de Xamarin, consulte Instalación de Xamarin. Para obtener información sobre cómo conectar Visual Studio 2019 a un host de compilación de Mac, consulte Emparejar con Mac para el desarrollo de Xamarin.iOS.

Inicie Visual Studio y cree una aplicación de Xamarin.Forms en blanco llamada PopupsTutorial.

Importante

Los fragmentos de XAML y C# en este tutorial requieren que la solución se denomine PopupsTutorial. El uso de otro nombre dará como resultado errores de compilación al copiar el código de este tutorial en la solución.

Para obtener más información sobre la biblioteca de .NET Standard creada, vea Anatomía de una aplicación de Xamarin.Forms en Análisis detallado de inicio rápido de Xamarin.Forms.
En el Explorador de soluciones, en el proyecto PopupsTutorial, haga doble clic en MainPage.xaml para abrirlo. Después, en MainPage.xaml, quite todo el código de plantilla y sustitúyalo por el código siguiente:
```
<?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="PopupsTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Button Text="Display alert"
                Clicked="OnDisplayAlertButtonClicked" />
        <Button Text="Display alert question"
                Clicked="OnDisplayAlertQuestionButtonClicked" />
    </StackLayout>
</ContentPage>
```
Este código define mediante declaración la interfaz de usuario de la página, que consta de dos objetos Button de un elemento StackLayout. Las propiedades de Button.Text especifican el texto que aparece en cada Button y los eventos Clicked se establecen en los controladores de eventos que se crearán en el siguiente paso.
En el Explorador de soluciones, en el proyecto PopupsTutorial, expanda MainPage.xaml y haga doble clic en MainPage.xaml.cs para abrirlo. Después, en MainPage.xaml.cs, agregue los controladores de eventos OnDisplayAlertButtonClicked y OnDisplayAlertQuestionButtonClicked a la clase:
```
async void OnDisplayAlertButtonClicked(object sender, EventArgs e)
{
    await DisplayAlert("Alert", "This is an alert.", "OK");
}

async void OnDisplayAlertQuestionButtonClicked(object sender, EventArgs e)
{
    bool response = await DisplayAlert("Save?", "Would you like to save your data?", "Yes", "No");
    Console.WriteLine("Save data: " + response);
}
```
Cuando se pulsa Button, se ejecuta el método de controlador de evento correspondiente. El método OnDisplayAlertButtonClicked llamada al método DisplayAlert para mostrar una alerta modal con un botón Cancelar único. Una vez que se descarta la alerta, el usuario puede seguir interactuando con la aplicación.

El método OnDisplayAlertQuestionButtonClicked llama a una sobrecarga del método DisplayAlert para mostrar una alerta modal con un botón Aceptar y un botón Cancelar. Una vez que el usuario seleccione uno de los botones, la selección se devuelve como un elemento boolean.

Importante

El método DisplayAlert es asincrónico y siempre se debe esperar por él con la palabra clave await.
En la barra de herramientas de Visual Studio, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador remoto de iOS elegido. Después, pulse el primer elemento Button:

Después de descartar la alerta, pulse el segundo elemento Button:

Observe que, después de seleccionar una respuesta a la pregunta, la respuesta se muestra en la ventana Salida de Visual Studio. Si esta ventana no está visible, puede mostrarse seleccionando la opción de menú Ver > Salida.

En Visual Studio, detenga la aplicación.

Para más información sobre cómo mostrar alertas, consulte Visualización de una alerta en la guía Mostrar elementos emergentes.

Para completar este tutorial debe tener instalado Visual Studio para Mac (versión más reciente) con compatibilidad con la plataforma de iOS y Android. Además, también necesitará Xcode (versión más reciente). Para obtener más información sobre la instalación de la plataforma de Xamarin, consulte Instalación de Xamarin.

Inicie Visual Studio para Mac y cree una aplicación de Xamarin.Forms en blanco llamada PopupsTutorial.

Importante

Los fragmentos de XAML y C# en este tutorial requieren que la solución se denomine PopupsTutorial. El uso de otro nombre dará como resultado errores de compilación al copiar el código de este tutorial en la solución.

Para obtener más información sobre la biblioteca de .NET Standard creada, vea Anatomía de una aplicación de Xamarin.Forms en Análisis detallado de inicio rápido de Xamarin.Forms.
En el Panel de solución, en el proyecto PopupsTutorial, haga doble clic en MainPage.xaml para abrirlo. Después, en MainPage.xaml, quite todo el código de plantilla y sustitúyalo por el código siguiente:
```
<?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="PopupsTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Button Text="Display alert"
                Clicked="OnDisplayAlertButtonClicked" />
        <Button Text="Display alert question"
                Clicked="OnDisplayAlertQuestionButtonClicked" />
    </StackLayout>
</ContentPage>
```
Este código define mediante declaración la interfaz de usuario de la página, que consta de dos objetos Button de un elemento StackLayout. Las propiedades de Button.Text especifican el texto que aparece en cada Button y los eventos Clicked se establecen en los controladores de eventos que se crearán en el siguiente paso.
En el Panel de solución, en el proyecto PopupsTutorial, expanda MainPage.xaml y haga doble clic en MainPage.xaml.cs para abrirlo. Después, en MainPage.xaml.cs, agregue los controladores de eventos OnDisplayAlertButtonClicked y OnDisplayAlertQuestionButtonClicked a la clase:
```
async void OnDisplayAlertButtonClicked(object sender, EventArgs e)
{
    await DisplayAlert("Alert", "This is an alert.", "OK");
}

async void OnDisplayAlertQuestionButtonClicked(object sender, EventArgs e)
{
    bool response = await DisplayAlert("Save?", "Would you like to save your data?", "Yes", "No");
    Console.WriteLine("Save data: " + response);
}
```
Cuando se pulsa Button, se ejecuta el método de controlador de evento correspondiente. El método OnDisplayAlertButtonClicked llamada al método DisplayAlert para mostrar una alerta modal con un botón Cancelar único. Una vez que se descarta la alerta, el usuario puede seguir interactuando con la aplicación.

El método OnDisplayAlertQuestionButtonClicked llama a una sobrecarga del método DisplayAlert para mostrar una alerta modal con un botón Aceptar y un botón Cancelar. Una vez que el usuario seleccione uno de los botones, la selección se devuelve como un elemento boolean.

Importante

El método DisplayAlert es asincrónico y siempre se debe esperar por él con la palabra clave await.
En la barra de herramientas de Visual Studio para Mac, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador de iOS elegido. Después, pulse el primer elemento Button:

Después de descartar la alerta, pulse el segundo elemento Button:

Observe que, después de seleccionar una respuesta a la pregunta, la respuesta se muestra en la ventana Salida de Visual Studio para Mac. Si esta ventana no está visible, puede mostrarse seleccionando la opción de menú Ver > Otras ventanas > Salida de la aplicación.

En Visual Studio para Mac, detenga la aplicación.

Para más información sobre cómo mostrar alertas, consulte Visualización de una alerta en la guía Mostrar elementos emergentes.

Visualización de una hoja de acciones

2 minutos restantes

Xamarin.Forms tiene un elemento emergente modal, conocido como una hoja de acciones, que se puede usar para guiar a los usuarios en la realización de una tarea. En este ejercicio, usará el método DisplayActionSheet de la clase Page para mostrar una hoja de acciones que guía a los usuarios en la realización de una tarea.

Visual Studio
Visual Studio para Mac

En MainPage.xaml, agregue una nueva declaración Button que mostrará una hoja de acciones:
```
<Button Text="Display action sheet"
        Clicked="OnDisplayActionSheetButtonClicked" />
```
La propiedad Button.Text especifica el texto que aparece en el elemento Button. Además, el evento Clicked se establece en un controlador de eventos denominado OnDisplayActionSheetButtonClicked que se creará en el paso siguiente.
En el Explorador de soluciones, en el proyecto PopupsTutorial, expanda MainPage.xaml y haga doble clic en MainPage.xaml.cs para abrirlo. Después, en MainPage.xaml.cs, agregue el controlador de eventos OnDisplayActionSheetButtonClicked a la clase:
```
async void OnDisplayActionSheetButtonClicked(object sender, EventArgs e)
{
    string action = await DisplayActionSheet("Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
    Console.WriteLine("Action: " + action);
}
```
Cuando se pulsa Button, se ejecuta el método OnDisplayActionSheetButtonClicked. Este método llama al método DisplayActionSheet para presentar al usuario un conjunto de alternativas relacionadas con cómo realizar una tarea. Una vez que el usuario seleccione una de las alternativas, la selección se devuelve como una string.

Importante

El método DisplayActionSheet es asincrónico y siempre se debe esperar por él con la palabra clave await.
En la barra de herramientas de Visual Studio, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador remoto de iOS elegido. Después, pulse el Button que ha agregado a la ContentPage:

Tenga en cuenta que, tras seleccionar una alternativa en el cuadro de diálogo de la hoja de acciones, la selección aparece en la ventana Salida de Visual Studio. Si esta ventana no está visible, puede mostrarse seleccionando la opción de menú Ver > Salida.

En Visual Studio, detenga la aplicación.

Para más información sobre cómo mostrar hojas de acciones, consulte Guiar a los usuarios a través de tareas en la guía Mostrar elementos emergentes.

En MainPage.xaml, agregue una nueva declaración Button que mostrará una hoja de acciones:
```
<Button Text="Display action sheet"
        Clicked="OnDisplayActionSheetButtonClicked" />
```
La propiedad Button.Text especifica el texto que aparece en el elemento Button. Además, el evento Clicked se establece en un controlador de eventos denominado OnDisplayActionSheetButtonClicked que se creará en el paso siguiente.
En el Panel de solución, en el proyecto PopupsTutorial, expanda MainPage.xaml y haga doble clic en MainPage.xaml.cs para abrirlo. Después, en MainPage.xaml.cs, agregue el controlador de eventos OnDisplayActionSheetButtonClicked a la clase:
```
async void OnDisplayActionSheetButtonClicked(object sender, EventArgs e)
{
    string action = await DisplayActionSheet("Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
    Console.WriteLine("Action: " + action);
}
```
Cuando se pulsa Button, se ejecuta el método OnDisplayActionSheetButtonClicked. Este método llama al método DisplayActionSheet para presentar al usuario un conjunto de alternativas relacionadas con cómo realizar una tarea. Una vez que el usuario seleccione una de las alternativas, la selección se devuelve como una string.

Importante

El método DisplayActionSheet es asincrónico y siempre se debe esperar por él con la palabra clave await.
En la barra de herramientas de Visual Studio para Mac, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador de iOS elegido. Después, pulse el Button que ha agregado a la ContentPage:

Tenga en cuenta que, tras seleccionar una alternativa en el cuadro de diálogo de la hoja de acciones, la selección aparece en la ventana Salida de la aplicación de Visual Studio para Mac. Si esta ventana no está visible, puede mostrarse seleccionando la opción de menú Ver > Otras ventanas > Salida de la aplicación.

En Visual Studio para Mac, detenga la aplicación.

Para más información sobre cómo mostrar hojas de acciones, consulte Guiar a los usuarios a través de tareas en la guía Mostrar elementos emergentes.

Tutorial sobre los elementos emergentes Xamarin.Forms

Visualización de una alerta

Visualización de una hoja de acciones

¡Enhorabuena!

Pasos siguientes

Tutorial sobre los elementos emergentes Xamarin.Forms

Visualización de una alerta

Visualización de una hoja de acciones

¡Enhorabuena!

Pasos siguientes

Vínculos relacionados