Visualización de elementos emergentes

Ejemplo de descarga Descarga del ejemplo

Mostrar una alerta, pedir a un usuario que elija una opción o mostrar un símbolo del sistema es una tarea común de la interfaz de usuario. Xamarin.Forms tiene tres métodos en la clase para interactuar con el usuario a través de un Page menú emergente: DisplayAlert , y DisplayActionSheetDisplayPromptAsync . Se representan con controles nativos adecuados en cada plataforma.

Visualización de una alerta

Todas Xamarin.Forms las plataformas compatibles tienen un menú emergente modal para alertar al usuario o hacer preguntas sencillas sobre ellas. Para mostrar estas alertas en Xamarin.Forms , use el método en cualquier DisplayAlertPage . En la siguiente línea de código, se muestra un mensaje sencillo al usuario:

await DisplayAlert ("Alert", "You have been alerted", "OK");

Cuadro de diálogo De alerta con un botón, en iOS y Android

En este ejemplo, no se recopila información del usuario. La alerta se muestra modalmente y, después de cerrarla, el usuario sigue interactuando con la aplicación.

El método DisplayAlert también se puede usar para capturar la respuesta de un usuario mediante la presentación de dos botones y la devolución de un elemento boolean. Para obtener una respuesta de una alerta, agregue texto para los dos botones y use await para esperar el método. Cuando el usuario seleccione una de las opciones, se devolverá la respuesta al código. Observe las palabras clave async y await en el código de ejemplo siguiente:

async void OnAlertYesNoClicked (object sender, EventArgs e)
{
  bool answer = await DisplayAlert ("Question?", "Would you like to play a game", "Yes", "No");
  Debug.WriteLine ("Answer: " + answer);
}

Cuadro de diálogo Alerta con dos botones

El método también tiene sobrecargas que aceptan un argumento que especifica la dirección en la que fluyen los elementos de la interfaz DisplayAlert de usuario dentro de la FlowDirection alerta. Para obtener más información sobre la dirección del flujo, vea Localización de derecha a izquierda.

Advertencia

De forma predeterminada en UWP, cuando se muestra una alerta, las claves de acceso definidas en la página detrás de la alerta todavía se pueden activar. Para obtener más información, vea Claves de acceso de VisualElement en Windows.

Guía a los usuarios a través de tareas

El elemento UIActionSheet es un elemento de interfaz de usuario común en iOS. El Xamarin.FormsDisplayActionSheet método permite incluir este control en aplicaciones entre plataformas, lo que representa alternativas nativas en Android y UWP.

Para mostrar una hoja de acción, use awaitDisplayActionSheet en cualquier elemento Page y pase el mensaje y las etiquetas de botón como cadenas. Este método devuelve la etiqueta de cadena del botón en el que hizo clic el usuario. A continuación, se muestra un ejemplo sencillo:

async void OnActionSheetSimpleClicked (object sender, EventArgs e)
{
  string action = await DisplayActionSheet ("ActionSheet: Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
  Debug.WriteLine ("Action: " + action);
}

Cuadro de diálogo ActionSheet, en iOS y Android

El botón se representa de forma diferente a los demás botones de iOS y se puede dejar o destroy especificar como tercer parámetro de null cadena. En el ejemplo siguiente, se usa el botón destroy:

async void OnActionSheetCancelDeleteClicked (object sender, EventArgs e)
{
  string action = await DisplayActionSheet ("ActionSheet: SavePhoto?", "Cancel", "Delete", "Photo Roll", "Email");
  Debug.WriteLine ("Action: " + action);
}

Cuadro de diálogo ActionSheet con el botón Destruir en iOS y Android

El método también tiene una sobrecarga que acepta un argumento que especifica la dirección en la que fluyen los elementos de la interfaz de DisplayActionSheet usuario dentro de la hoja de FlowDirection acciones. Para obtener más información sobre la dirección del flujo, vea Localización de derecha a izquierda.

mostrar un mensaje

Para mostrar un mensaje, llame a DisplayPromptAsync en cualquier , pasando un título y un mensaje como Pagestring argumentos:

string result = await DisplayPromptAsync("Question 1", "What's your name?");

El símbolo del sistema se muestra de forma modal:

sistema modal Captura de pantalla de un símbolo del sistema modal, en el símbolo del sistemamodal de iOS Android

Si se pulsa el botón Aceptar, la respuesta especificada se devuelve como string . Si se pulsa el botón Cancelar, null se devuelve .

La lista completa de argumentos para el DisplayPromptAsync método es:

  • title, de tipo string , es el título que se va a mostrar en el símbolo del sistema.
  • message, de tipo string , es el mensaje que se va a mostrar en el símbolo del sistema.
  • accept, de tipo string , es el texto del botón de aceptación. Se trata de un argumento opcional, cuyo valor predeterminado es Ok.
  • cancel, de tipo string , es el texto del botón cancelar. Se trata de un argumento opcional, cuyo valor predeterminado es Cancel.
  • placeholder, de tipo string , es el texto del marcador de posición que se va a mostrar en el símbolo del sistema. Se trata de un argumento opcional, cuyo valor predeterminado es null .
  • maxLength, de tipo int , es la longitud máxima de la respuesta del usuario. Se trata de un argumento opcional, cuyo valor predeterminado es -1.
  • keyboard, de tipo Keyboard , es el tipo de teclado que se va a usar para la respuesta del usuario. Se trata de un argumento opcional, cuyo valor predeterminado es Keyboard.Default .
  • initialValue, de tipo , es una respuesta predefinida que se mostrará string y que se puede editar. Se trata de un argumento opcional, cuyo valor predeterminado es un string vacío.

En el ejemplo siguiente se muestra cómo establecer algunos de los argumentos opcionales:

string result = await DisplayPromptAsync("Question 2", "What's 5 + 5?", initialValue: "10", maxLength: 2, keyboard: Keyboard.Numeric);

Este código muestra una respuesta predefinida de 10, limita el número de caracteres que se pueden introducir a 2 y muestra el teclado numérico para la entrada del usuario:

sistema modal Captura de pantalla de un símbolo del sistema modal opcional, en el símbolo del sistemamodal de iOS Android

Advertencia

De forma predeterminada en UWP, cuando se muestra un mensaje, las claves de acceso definidas en la página detrás del símbolo del sistema todavía se pueden activar. Para obtener más información, vea Claves de acceso de VisualElement en Windows.