Tutorial sobre los elementos emergentes Xamarin.Forms

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.

1. 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.

2. 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.

3. 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.

4. 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.

1. 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.

2. 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.

3. 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.

4. 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.

1. 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.

2. 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.

3. 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.

1. 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.

2. 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.

3. 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.