Compartir a través de

Mostrar ventanas emergentes

Mostrar una alerta, pedir a un usuario que elija o mostrar un mensaje es una tarea de interfaz de usuario común. La interfaz de usuario de aplicación multiplataforma de .NET (.NET MAUI) tiene tres métodos en la Page clase para interactuar con el usuario a través de un elemento emergente: DisplayAlert, DisplayActionSheety DisplayPromptAsync. Las ventanas emergentes se representan con controles nativos en cada plataforma.

Mostrar una alerta

Todas las plataformas compatibles con .NET MAUI tienen un elemento emergente para alertar al usuario o hacerles preguntas sencillas. Para mostrar alertas, use el DisplayAlert método en cualquier Page. En el ejemplo siguiente se muestra un mensaje sencillo para el usuario:

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

Captura de pantalla de un cuadro de diálogo de alerta con un botón.

Una vez descartada la alerta, el usuario continúa interactuando con la aplicación.

Nota:

En Android, las alertas se pueden descartar pulsando en la página fuera de la alerta. En las plataformas de escritorio, las alertas se pueden descartar con la clave de escape.

El DisplayAlert método 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 bool. Para obtener una respuesta de una alerta, proporcione texto para los botones y await el método :

bool answer = await DisplayAlert("Question?", "Would you like to play a game", "Yes", "No");
Debug.WriteLine("Answer: " + answer);

Captura de pantalla de un cuadro de diálogo de alerta con dos botones.

Después de que el usuario seleccione una de las opciones, la respuesta se devolverá como .bool

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

Advertencia

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

Guiar a los usuarios a través de tareas

Una hoja de acciones presenta al usuario un conjunto de alternativas para continuar con una tarea. Para mostrar una hoja de acciones, use el DisplayActionSheet método en cualquier Page, pasando el mensaje y las etiquetas de botón como cadenas:

string action = await DisplayActionSheet("ActionSheet: Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
Debug.WriteLine("Action: " + action);

Captura de pantalla del cuadro de diálogo de una hoja de acciones.

Una vez que el usuario pulsa uno de los botones, la etiqueta del botón se devolverá como .string

Nota:

Las hojas de acción se pueden descartar en plataformas táctiles y en Mac Catalyst al pulsar en la página fuera de la hoja de acción. En Windows, las hojas de acción se pueden descartar con la clave de escape y haciendo clic en la página fuera de la hoja de acciones.

Las hojas de acción también admiten un botón destruir, que es un botón que representa un comportamiento destructivo. El botón destruir se puede especificar como el tercer argumento de cadena para el DisplayActionSheet método o se puede dejar null. En el ejemplo siguiente se especifica un botón destruir:

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

Captura de pantalla de una hoja de acciones con un botón destruir.

Nota:

En iOS, el botón destruir se representa de forma diferente a los otros botones de la hoja de acciones.

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

Mostrar una alerta, pedir a un usuario que elija o mostrar un mensaje es una tarea de interfaz de usuario común. La interfaz de usuario de aplicación multiplataforma de .NET (.NET MAUI) tiene tres métodos en la Page clase para interactuar con el usuario a través de un elemento emergente: DisplayAlertAsync, DisplayActionSheetAsyncy DisplayPromptAsync. Los elementos emergentes se representan con controles nativos en cada plataforma.

Mostrar una alerta

Todas las plataformas compatibles con .NET MAUI tienen un elemento emergente para alertar al usuario o hacerles preguntas sencillas. Para mostrar alertas, use el DisplayAlertAsync método en cualquier Page. En el ejemplo siguiente se muestra un mensaje sencillo para el usuario:

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

Captura de pantalla de un cuadro de diálogo de alerta con un botón.

Una vez descartada la alerta, el usuario continúa interactuando con la aplicación.

Nota:

En Android, las alertas se pueden descartar pulsando en la página fuera de la alerta. En las plataformas de escritorio, las alertas se pueden descartar con la clave de escape.

El DisplayAlertAsync método 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 bool. Para obtener una respuesta de una alerta, proporcione texto para ambos botones y await el método:

bool answer = await DisplayAlertAsync("Question?", "Would you like to play a game", "Yes", "No");
Debug.WriteLine("Answer: " + answer);

Captura de pantalla de un cuadro de diálogo de alerta con dos botones.

Después de que el usuario seleccione una de las opciones, la respuesta se devolverá como .bool

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

Advertencia

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

Guiar a los usuarios a través de tareas

Una hoja de acciones presenta al usuario un conjunto de alternativas para continuar con una tarea. Para mostrar una hoja de acciones, use el DisplayActionSheetAsync método en cualquier Page, pasando el mensaje y las etiquetas de botón como cadenas:

string action = await DisplayActionSheetAsync("ActionSheet: Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
Debug.WriteLine("Action: " + action);

Captura de pantalla del cuadro de diálogo de una hoja de acciones.

Una vez que el usuario pulsa uno de los botones, la etiqueta del botón se devolverá como .string

Nota:

Las hojas de acción se pueden descartar en plataformas táctiles y Mac Catalyst pulsando en la página fuera de la hoja de acciones. En Windows, las hojas de acción se pueden descartar con la clave de escape y haciendo clic en la página fuera de la hoja de acciones.

Las hojas de acción también admiten un botón destruir, que es un botón que representa un comportamiento destructivo. El botón destruir se puede especificar como el tercer argumento de cadena para el DisplayActionSheetAsync método o se puede dejar null. En el ejemplo siguiente se especifica un botón destruir:

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

Captura de pantalla de una hoja de acciones con un botón destruir.

Nota:

En iOS, el botón destruir se representa de forma diferente a los otros botones de la hoja de acciones.

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

Mostrar un aviso

Para mostrar una ventana de aviso, llame a DisplayPromptAsync en cualquier Page, pasando un título y un mensaje como argumentos de string:

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

Captura de pantalla de un mensaje.

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

Nota:

En Android, los mensajes se pueden descartar pulsando en la página fuera de la alerta. En las plataformas de escritorio, se pueden descartar las indicaciones con la tecla Escape.

La lista de argumentos completa del DisplayPromptAsync método es:

  • title, de tipo string, es el título que se va a mostrar en el mensaje.
  • message, de tipo string, es el mensaje que se va a mostrar en el mensaje emergente.
  • accept, de tipo string, es el texto del botón Aceptar. Se trata de un argumento opcional, cuyo valor predeterminado es Ok.
  • cancel, de tipo string, es el texto del botón Cancelar. Este es un argumento opcional, cuyo valor predeterminado es Cancel.
  • placeholder, de tipo string, es el texto de relleno que se va a mostrar en el mensaje. Este es 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. Este es un argumento opcional, cuyo valor predeterminado es Keyboard.Default.
  • initialValue, de tipo string, es una respuesta predefinida que se mostrará y que se puede editar. Se trata de un argumento opcional, cuyo valor predeterminado es un vacío string.

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 pueden ser de entrada a 2 y muestra el teclado numérico para la entrada del usuario:

Captura de pantalla de un aviso opcional.

Advertencia

De forma predeterminada en Windows, cuando se muestra un mensaje, se pueden activar las teclas de acceso definidas en la página detrás del mensaje. Para obtener más información, consulte Claves de acceso de VisualElement en Windows.

Mostrar una página como una ventana emergente

.NET MAUI admite la navegación de página modal. Una página modal anima a los usuarios a completar una tarea autocontenida de la que no se puede salir hasta que la tarea se complete o cancele. Por ejemplo, para mostrar un formulario como un elemento emergente que requiere que los usuarios escriban varios fragmentos de datos, cree un ContentPage que contenga la interfaz de usuario del formulario y, a continuación, insértelo en la pila de navegación como una página modal. Para obtener más información, vea Realizar navegación modal.