Afficher les fenêtres contextuelles

Télécharger l’exemple Télécharger l’exemple

L’affichage d’une alerte, la demande d’un utilisateur de faire un choix ou l’affichage d’une invite est une tâche courante de l’interface utilisateur. Xamarin.Forms a trois méthodes sur la Page classe pour interagir avec l’utilisateur via une fenêtre contextuelle : DisplayAlert, DisplayActionSheetet DisplayPromptAsync. Elles sont affichées avec les contrôles natifs appropriés sur chaque plateforme.

Afficher une alerte

Toutes les Xamarin.Formsplateformes prises en charge ont une fenêtre contextuelle modale pour alerter l’utilisateur ou lui poser des questions simples. Pour afficher ces alertes dans Xamarin.Forms, utilisez la DisplayAlert méthode sur n’importe quel Page. La ligne de code suivante présente un message simple à l’utilisateur :

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

Boîte de dialogue d’alerte avec un bouton, sur iOS et Android

Cet exemple ne recueille aucune information de l’utilisateur. L’alerte s’affiche de façon modale, et une fois qu’elle est fermée l’utilisateur continue à interagir avec l’application.

Vous pouvez également utiliser la méthode DisplayAlert pour capturer la réponse d’un utilisateur en présentant deux boutons et en retournant une valeur boolean. Pour obtenir une réponse à partir d’une alerte, fournissez du texte pour les deux boutons et attendez (await) la méthode. Une fois que l’utilisateur a sélectionné l’une des options, la réponse est retournée à votre code. Notez les mots clés async et await dans l’exemple de code ci-dessous :

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);
}

Boîte de dialogue d’alerte avec deux boutons

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 le sens du flux, consultez Localisation de droite à gauche.

Avertissement

Par défaut sur UWP, 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 Clés d’accès VisualElement sur Windows.

Guider les utilisateurs dans les tâches

UIActionSheet est un élément d’interface utilisateur courant dans iOS. La Xamarin.FormsDisplayActionSheet méthode vous permet d’inclure ce contrôle dans les applications multiplateformes, en rendant des alternatives natives dans Android et UWP.

Pour afficher une feuille d’action, attendez (await) DisplayActionSheet dans n’importe quelle Page, en passant les étiquettes de message et de bouton sous forme de chaînes. La méthode retourne l’étiquette de chaîne du bouton sur lequel l’utilisateur a cliqué. Voici un exemple simple :

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

Boîte de dialogue Feuille d’action, sur iOS et Android

Le destroy bouton est affiché différemment des autres boutons sur iOS et peut être gauche null ou spécifié comme troisième paramètre de chaîne. L’exemple suivant utilise le bouton destroy :

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

Boîte de dialogue Feuille d’action avec le bouton détruire, sur iOS et Android

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’actions. Pour plus d’informations sur le sens du flux, consultez Localisation de droite à gauche.

Afficher une invite

Pour afficher une invite, appelez dans DisplayPromptAsync 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?");

L’invite s’affiche de façon modale :

Capture d’écran d’une invite modale, sur une iOS et Android

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

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 s’affiche et qui peut être modifiée. Il s’agit d’un argument facultatif, dont la valeur par défaut est un 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 modale facultative, sur une iOS et Android

Avertissement

Par défaut sur UWP, 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 Clés d’accès VisualElement sur Windows.