Partager via

Afficher des fenêtres contextuelles

L’affichage d’une alerte, la demande à un utilisateur d’effectuer un choix ou l’affichage d’une invite est une tâche d’interface utilisateur courante. L’interface utilisateur de l’application multiplateforme .NET (.NET MAUI) a trois méthodes sur la Page classe pour interagir avec l’utilisateur via une fenêtre contextuelle : DisplayAlert, DisplayActionSheetet DisplayPromptAsync. Les fenêtres contextuelles sont rendues avec des contrôles natifs sur chaque plateforme.

Afficher une alerte

Toutes les plateformes prises en charge par .NET MAUI ont une fenêtre contextuelle pour alerter l’utilisateur ou poser des questions simples. Pour afficher des alertes, utilisez la méthode DisplayAlert sur n’importe quel Page. L’exemple suivant montre un message simple à l’utilisateur :

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

Capture d’écran d’une boîte de dialogue d’alerte avec un bouton.

Une fois l’alerte ignorée, l’utilisateur continue d’interagir avec l’application.

Remarque

Sur Android, les alertes peuvent être ignorées en appuyant sur la page en dehors de l’alerte. Sur les plateformes de bureau, les alertes peuvent être ignorées avec la clé d’échappement.

La DisplayAlert méthode peut également être utilisée pour capturer la réponse d’un utilisateur en présentant deux boutons et en retournant un bool. Pour obtenir une réponse d'une alerte, il faut fournir un texte pour chaque bouton et définir await la méthode :

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

Capture d’écran d’une boîte de dialogue d’alerte avec deux boutons.

Une fois que l’utilisateur sélectionne l’une des options retournées par la réponse en tant que bool.

La DisplayAlert méthode a également des surcharges qui acceptent un FlowDirection argument qui spécifie la direction dans laquelle les éléments d’interface utilisateur circulent dans l’alerte. Pour plus d’informations sur la direction du flux, consultez Localisation de droite à gauche.

Avertissement

Par défaut sur Windows, lorsqu’une alerte s’affiche toutes les clés d’accès définies sur la page derrière l’alerte peuvent toujours être activées. Pour plus d’informations, consultez les clés d’accès VisualElement sur Windows.

Guider les utilisateurs par le biais de tâches

Une feuille d’action présente à l’utilisateur un ensemble d’alternatives permettant de poursuivre une tâche. Pour afficher une feuille d’action, utilisez la DisplayActionSheet méthode sur n’importe quelle Page, en passant les étiquettes de message et de bouton sous forme de chaînes :

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

Capture d’écran d’une boîte de dialogue de feuille d’action.

Une fois que l’utilisateur appuie sur l’un des boutons, l’étiquette du bouton est retournée en tant que string.

Remarque

Les feuilles d’action peuvent être ignorées sur les plateformes tactiles et Mac Catalyst, en appuyant sur la page en dehors de la feuille d’action. Sur Windows, les feuilles d’action peuvent être ignorées avec la touche d’échappement et en cliquant sur la page en dehors de la feuille d’action.

Les feuilles d’action prennent également en charge un bouton de destruction, qui est un bouton qui représente un comportement destructeur. Le bouton de destruction peut être spécifié en tant que troisième argument de chaîne de la DisplayActionSheet méthode, ou peut être laissé null. L’exemple suivant spécifie un bouton de destruction :

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

Capture d’écran d’une feuille d’action avec un bouton détruire.

Remarque

Sur iOS, le bouton de destruction est rendu différemment des autres boutons de la feuille d’action.

La DisplayActionSheet méthode a également une surcharge qui accepte un FlowDirection argument qui spécifie la direction dans laquelle les éléments d’interface utilisateur circulent dans la feuille d’action. Pour plus d’informations sur la direction du flux, consultez Localisation de droite à gauche.

L’affichage d’une alerte, la demande à un utilisateur d’effectuer un choix ou l’affichage d’une invite est une tâche d’interface utilisateur courante. L’interface utilisateur de l’application multiplateforme .NET (.NET MAUI) a trois méthodes sur la Page classe pour interagir avec l’utilisateur via une fenêtre contextuelle : DisplayAlertAsync, DisplayActionSheetAsyncet DisplayPromptAsync. Les fenêtres contextuelles sont rendues avec des contrôles natifs sur chaque plateforme.

Afficher une alerte

Toutes les plateformes prises en charge par .NET MAUI ont une fenêtre contextuelle pour alerter l’utilisateur ou poser des questions simples. Pour afficher des alertes, utilisez la méthode sur n’importe DisplayAlertAsync quel Page. L’exemple suivant montre un message simple à l’utilisateur :

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

Capture d’écran d’une boîte de dialogue d’alerte avec un bouton.

Une fois l’alerte ignorée, l’utilisateur continue d’interagir avec l’application.

Remarque

Sur Android, les alertes peuvent être ignorées en appuyant sur la page en dehors de l’alerte. Sur les plateformes de bureau, les alertes peuvent être ignorées avec la clé d’échappement.

La DisplayAlertAsync méthode peut également être utilisée pour capturer la réponse d’un utilisateur en présentant deux boutons et en retournant un bool. Pour obtenir une réponse d’une alerte, fournissez du texte pour les deux boutons et await la méthode :

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

Capture d’écran d’une boîte de dialogue d’alerte avec deux boutons.

Une fois que l'utilisateur a sélectionné l'une des options, la réponse sera retournée sous forme de bool.

La DisplayAlertAsync méthode a également des surcharges qui acceptent un FlowDirection argument qui spécifie la direction dans laquelle les éléments d’interface utilisateur circulent dans l’alerte. Pour plus d’informations sur la direction du flux, consultez Localisation de droite à gauche.

Avertissement

Par défaut sur Windows, lorsqu’une alerte s’affiche toutes les clés d’accès définies sur la page derrière l’alerte peuvent toujours être activées. Pour plus d’informations, consultez les clés d’accès VisualElement sur Windows.

Guider les utilisateurs par le biais de tâches

Une feuille d’action présente à l’utilisateur un ensemble d’alternatives permettant de poursuivre une tâche. Pour afficher une feuille d’action, utilisez la DisplayActionSheetAsync méthode sur n’importe quelle Page, en passant les étiquettes de message et de bouton sous forme de chaînes :

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

Capture d’écran d’une boîte de dialogue de feuille d’action.

Une fois que l’utilisateur appuie sur l’un des boutons, l’étiquette du bouton est retournée en tant que string.

Remarque

Les feuilles d’action peuvent être ignorées sur les plateformes tactiles et Mac Catalyst, en appuyant sur la page en dehors de la feuille d’action. Sur Windows, les feuilles d’action peuvent être ignorées avec la touche d’échappement et en cliquant sur la page en dehors de la feuille d’action.

Les feuilles d’action prennent également en charge un bouton de destruction, qui est un bouton qui représente un comportement destructeur. Le bouton de destruction peut être spécifié en tant que troisième argument de chaîne de la DisplayActionSheetAsync méthode, ou peut être laissé null. L’exemple suivant spécifie un bouton de destruction :

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

Capture d’écran d’une feuille d’action avec un bouton détruire.

Remarque

Sur iOS, le bouton de destruction est rendu différemment des autres boutons de la feuille d’action.

La DisplayActionSheetAsync méthode a également une surcharge qui accepte un FlowDirection argument qui spécifie la direction dans laquelle les éléments d’interface utilisateur circulent dans la feuille d’action. Pour plus d’informations sur la direction du flux, consultez Localisation de droite à gauche.

Afficher un message

Pour afficher un prompt, appelez le DisplayPromptAsync sur n'importe quel Page, en passant un titre et un message en tant qu'arguments string :

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

Capture d’écran d’une invite.

Si le bouton OK est appuyé, la réponse entrée est retournée en tant que string. Si le bouton Annuler est appuyé, null est retourné.

Remarque

Sur Android, les invites peuvent être ignorées en appuyant sur la page en dehors de l’alerte. Sur les plateformes de bureau, les invites peuvent être ignorées avec la clé d’échappement.

La liste complète des arguments de la DisplayPromptAsync méthode est la suivante :

  • title, de type string, est le titre à afficher dans l’invite.
  • message, de type string, est le message à afficher dans l’invite.
  • accept, de type string, est le texte du bouton Accepter. Il s’agit d’un argument facultatif, dont la valeur par défaut est OK.
  • cancel, de type string, est le texte du bouton Annuler. Il s’agit d’un argument facultatif, dont la valeur par défaut est Cancel.
  • placeholder, de type string, est le texte d’espace réservé à afficher dans l’invite. Il s’agit d’un argument facultatif, dont la valeur par défaut est null.
  • maxLength, de type int, est la longueur maximale de la réponse de l’utilisateur. Il s’agit d’un argument facultatif, dont la valeur par défaut est -1.
  • keyboard, de type Keyboard, est le type de clavier à utiliser pour la réponse de l’utilisateur. Il s’agit d’un argument facultatif, dont la valeur par défaut est Keyboard.Default.
  • initialValue, de type string, est une réponse prédéfinie qui sera affichée et qui peut être modifiée. Il s’agit d’un argument facultatif, dont la valeur par défaut est vide string.

L’exemple suivant montre comment définir certains des arguments facultatifs :

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

Ce code affiche une réponse prédéfinie de 10, limite le nombre de caractères pouvant être entrés à 2 et affiche le clavier numérique pour l’entrée utilisateur :

Capture d’écran d’une invite facultative.

Avertissement

Par défaut, lorsqu’une invite s’affiche, toutes les clés d’accès définies sur la page derrière l’invite peuvent toujours être activées. Pour plus d’informations, consultez les clés d’accès VisualElement sur Windows.

Afficher une page sous la forme d’une fenêtre contextuelle

.NET MAUI prend en charge la navigation de page modale. Une page modale encourage les utilisateurs à effectuer une tâche autonome qui ne peut pas être parcourue tant que la tâche n’est pas terminée ou annulée. Par exemple, pour afficher un formulaire sous la forme d’une fenêtre contextuelle qui oblige les utilisateurs à entrer plusieurs éléments de données, créez un ContentPage élément qui contient l’interface utilisateur de votre formulaire, puis envoyez-le dans la pile de navigation en tant que page modale. Pour plus d’informations, consultez Effectuer une navigation modale.