Xamarin.Forms Didacticiel sur les fenêtres contextuelles

Article
Developer (Débutant)
6 minutes avant achèvement

Avant de tenter ce didacticiel, vous devez avoir suivi les guides et didacticiels suivants :

Créez votre premier Xamarin.Forms démarrage rapide d’application .
Didacticiel StackLayout.
Didacticiel Button.

Dans ce tutoriel, vous allez apprendre à :

Afficher une alerte pour demander à l’utilisateur de faire un choix.
Afficher une feuille d’action pour guider l’utilisateur tout au long d’une tâche.

Vous allez utiliser Visual Studio 2019 ou Visual Studio pour Mac pour créer une application simple qui montre comment afficher des fenêtres contextuelles dans Xamarin.Forms. Les captures d’écran suivantes montrent l’application finale :

Afficher une alerte

5 minutes restantes

Xamarin.Forms a une fenêtre contextuelle modale, appelée alerte, pour alerter l’utilisateur ou poser des questions simples. Dans cet exercice, vous allez utiliser la méthode DisplayAlert, à partir de la classe Page, pour afficher une alerte à l’utilisateur et lui poser une question simple.

Visual Studio
Visual Studio pour Mac

Pour suivre ce didacticiel, vous devez disposer de Visual Studio 2019 (dernière version) sur lequel est installée la charge de travail Développement mobile en .NET. Vous aurez également besoin d’un Mac couplé pour générer l’application du didacticiel sur iOS. Pour plus d’informations sur l’installation de la plateforme Xamarin, consultez Installation de Xamarin. Pour plus d’informations sur la connexion de Visual Studio 2019 à un hôte de build Mac, consultez l’article Appairer avec un Mac pour le développement Xamarin.iOS.

Lancez Visual Studio et créez une application vide Xamarin.Forms nommée PopupsTutorial.

Important

Pour les extraits C# et XAML de ce didacticiel, la solution doit se nommer PopupsTutorial. L’utilisation d’un autre nom entraîne des erreurs de build quand vous copiez le code à partir de ce didacticiel dans la solution.

Pour plus d’informations sur la bibliothèque .NET Standard créée, consultez Anatomie d’une Xamarin.Forms application dans le Xamarin.Forms guide de démarrage rapide Deep Dive.
Dans l’Explorateur de solutions, dans le projet PopupsTutorial, double-cliquez sur MainPage.xaml pour l’ouvrir. Puis, dans MainPage.xaml, supprimez tout le code du modèle et remplacez-le par le code suivant :
```
<?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>
```
Ce code définit de manière déclarative l’interface utilisateur de la page, qui comprend deux objets Button dans un StackLayout. Les propriétés Button.Text spécifient le texte qui apparaît dans chaque Button et les événements Clicked sont définis sur les gestionnaires d’événements qui seront créés à l’étape suivante.
Dans l’Explorateur de solutions, dans le projet PopupsTutorial, développez MainPage.xaml, puis double-cliquez sur MainPage.xaml.cs pour l’ouvrir. Puis, dans MainPage.xaml.cs, ajoutez les gestionnaires d’événements OnDisplayAlertButtonClicked et OnDisplayAlertQuestionButtonClicked à la classe :
```
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);
}
```
Lorsque vous appuyez sur un Button, la méthode de gestionnaire d’événements correspondante est exécutée. La méthode OnDisplayAlertButtonClicked appelle la méthode DisplayAlert pour afficher une alerte modale avec un seul bouton d’annulation. Si l’alerte est ignorée, l’utilisateur peut continuer d’interagir avec l’application.

La méthode OnDisplayAlertQuestionButtonClicked appelle une surcharge de la méthode DisplayAlert pour afficher une alerte modale avec un bouton d’acceptation et un bouton d’annulation. Lorsque l’utilisateur sélectionne l’un de ces boutons, son choix est retourné sous la forme d’un boolean.

Important

La méthode DisplayAlert est asynchrone et est toujours assortie d’un délai d’attente avec le mot clé await.
Dans la barre d’outils Visual Studio, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application à l’intérieur du simulateur iOS distant ou de l’émulateur Android de votre choix. Ensuite, appuyez sur le premier Button :

Ignorez l’alerte, puis appuyez sur le second Button :

Notez que, après avoir sélectionné une réponse à la question, la réponse s’affiche dans la fenêtre Sortie de Visual Studio. Si cette fenêtre n’est pas visible, elle peut être rendue visible en sélectionnant l’option Afficher > la sortie.

Dans Visual Studio, arrêtez l’application.

Pour plus d’informations sur l’affichage des alertes, voir Afficher une alerte dans le guide Afficher les fenêtres contextuelles.

Pour suivre ce didacticiel, vous devez disposer de Visual Studio pour Mac (dernière version) avec une prise en charge des plateformes iOS et Android. Vous aurez également besoin de Xcode (dernière version). Pour plus d’informations sur l’installation de la plateforme Xamarin, consultez Installation de Xamarin.

Lancez Visual Studio pour Mac et créez une application vide Xamarin.Forms nommée PopupsTutorial.

Important

Pour les extraits C# et XAML de ce didacticiel, la solution doit se nommer PopupsTutorial. L’utilisation d’un autre nom entraîne des erreurs de build quand vous copiez le code à partir de ce didacticiel dans la solution.

Pour plus d’informations sur la bibliothèque .NET Standard créée, consultez Anatomie d’une Xamarin.Forms application dans le Xamarin.Forms guide de démarrage rapide Deep Dive.
Dans Panneau Solutions, dans le projet PopupsTutorial, double-cliquez sur MainPage.xaml pour l’ouvrir. Puis, dans MainPage.xaml, supprimez tout le code du modèle et remplacez-le par le code suivant :
```
<?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>
```
Ce code définit de manière déclarative l’interface utilisateur de la page, qui comprend deux objets Button dans un StackLayout. Les propriétés Button.Text spécifient le texte qui apparaît dans chaque Button et les événements Clicked sont définis sur les gestionnaires d’événements qui seront créés à l’étape suivante.
Dans Panneau Solutions, dans le projet PopupsTutorial, développez MainPage.xaml, puis double-cliquez sur MainPage.xaml.cs pour l’ouvrir. Puis, dans MainPage.xaml.cs, ajoutez les gestionnaires d’événements OnDisplayAlertButtonClicked et OnDisplayAlertQuestionButtonClicked à la classe :
```
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);
}
```
Lorsque vous appuyez sur un Button, la méthode de gestionnaire d’événements correspondante est exécutée. La méthode OnDisplayAlertButtonClicked appelle la méthode DisplayAlert pour afficher une alerte modale avec un seul bouton d’annulation. Si l’alerte est ignorée, l’utilisateur peut continuer d’interagir avec l’application.

La méthode OnDisplayAlertQuestionButtonClicked appelle une surcharge de la méthode DisplayAlert pour afficher une alerte modale avec un bouton d’acceptation et un bouton d’annulation. Lorsque l’utilisateur sélectionne l’un de ces boutons, son choix est retourné sous la forme d’un boolean.

Important

La méthode DisplayAlert est asynchrone et est toujours assortie d’un délai d’attente avec le mot clé await.
Dans la barre d’outils Visual Studio pour Mac, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application dans le simulateur iOS ou dans l’émulateur Android de votre choix. Ensuite, appuyez sur le premier Button :

Ignorez l’alerte, puis appuyez sur le second Button :

Notez que, après avoir sélectionné une réponse à la question, la réponse s’affiche dans la fenêtre Sortie de l’application de Visual Studio pour Mac. Si cette fenêtre n’est pas visible, elle peut être rendue visible en sélectionnant l’option Afficher > la sortie d’une autre application Windows>.

Dans Visual Studio pour Mac, arrêtez l’application.

Pour plus d’informations sur l’affichage des alertes, voir Afficher une alerte dans le guide Afficher les fenêtres contextuelles.

Afficher une feuille d’actions

2 minutes restantes

Xamarin.Forms a une fenêtre contextuelle modale, appelée feuille d’action, qui peut être utilisée pour guider les utilisateurs via une tâche. Dans cet exercice, vous utiliserez la méthode DisplayActionSheet à partir de la classe Page afin d’afficher une feuille d’action guidant les utilisateurs dans une tâche.

Visual Studio
Visual Studio pour Mac

Dans MainPage.xaml, ajoutez une nouvelle déclaration Button qui affiche une feuille d’action :
```
<Button Text="Display action sheet"
        Clicked="OnDisplayActionSheetButtonClicked" />
```
La propriété Button.Text spécifie le texte qui apparaît dans l’élément Button. De plus, l’événement Clicked est défini sur un gestionnaire d’événements nommé OnDisplayActionSheetButtonClicked, qui sera créé à l’étape suivante.
Dans l’Explorateur de solutions, dans le projet PopupsTutorial, développez MainPage.xaml, puis double-cliquez sur MainPage.xaml.cs pour l’ouvrir. Puis, dans MainPage.xaml.cs, ajoutez le gestionnaire d’événements OnDisplayActionSheetButtonClicked à la classe :
```
async void OnDisplayActionSheetButtonClicked(object sender, EventArgs e)
{
    string action = await DisplayActionSheet("Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
    Console.WriteLine("Action: " + action);
}
```
Lorsque vous appuyez sur Button, la méthode OnDisplayActionSheetButtonClicked s’exécute. Cette méthode appelle la méthode DisplayActionSheet, afin de présenter un ensemble d’alternatives à l’utilisateur dans le cadre d’une tâche. Lorsque l’utilisateur sélectionne l’une de ces alternatives, son choix est retourné sous la forme de string.

Important

La méthode DisplayActionSheet est asynchrone et est toujours assortie d’un délai d’attente avec le mot clé await.
Dans la barre d’outils Visual Studio, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application à l’intérieur du simulateur iOS distant ou de l’émulateur Android de votre choix. Ensuite, appuyez sur l’élément Button que vous avez ajouté à ContentPage :

Remarquez qu’après avoir sélectionné une alternative dans la boîte de dialogue de la feuille d’action, la sélection est affichée dans la fenêtre de sortie de Visual Studio. Si cette fenêtre n’est pas visible, elle peut être rendue visible en sélectionnant l’option Afficher > la sortie.

Dans Visual Studio, arrêtez l’application.

Pour plus d’informations sur l’affichage des feuilles d’action, voir Guider les utilisateurs dans les tâches dans le guide Afficher les fenêtres contextuelles.

Dans MainPage.xaml, ajoutez une nouvelle déclaration Button qui affiche une feuille d’action :
```
<Button Text="Display action sheet"
        Clicked="OnDisplayActionSheetButtonClicked" />
```
La propriété Button.Text spécifie le texte qui apparaît dans l’élément Button. De plus, l’événement Clicked est défini sur un gestionnaire d’événements nommé OnDisplayActionSheetButtonClicked, qui sera créé à l’étape suivante.
Dans Panneau Solutions, dans le projet PopupsTutorial, développez MainPage.xaml, puis double-cliquez sur MainPage.xaml.cs pour l’ouvrir. Puis, dans MainPage.xaml.cs, ajoutez le gestionnaire d’événements OnDisplayActionSheetButtonClicked à la classe :
```
async void OnDisplayActionSheetButtonClicked(object sender, EventArgs e)
{
    string action = await DisplayActionSheet("Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
    Console.WriteLine("Action: " + action);
}
```
Lorsque vous appuyez sur Button, la méthode OnDisplayActionSheetButtonClicked s’exécute. Cette méthode appelle la méthode DisplayActionSheet, afin de présenter un ensemble d’alternatives à l’utilisateur dans le cadre d’une tâche. Lorsque l’utilisateur sélectionne l’une de ces alternatives, son choix est retourné sous la forme de string.

Important

La méthode DisplayActionSheet est asynchrone et est toujours assortie d’un délai d’attente avec le mot clé await.
Dans la barre d’outils Visual Studio pour Mac, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application dans le simulateur iOS ou dans l’émulateur Android de votre choix. Ensuite, appuyez sur l’élément Button que vous avez ajouté à ContentPage :

Remarquez qu’après avoir sélectionné une alternative dans la boîte de dialogue de la feuille d’action, la sélection est affichée dans la fenêtre de sortie de Visual Studio pour Mac. Si cette fenêtre n’est pas visible, elle peut être rendue visible en sélectionnant l’option Afficher > la sortie d’une autre application Windows>.

Dans Visual Studio pour Mac, arrêtez l’application.

Pour plus d’informations sur l’affichage des feuilles d’action, voir Guider les utilisateurs dans les tâches dans le guide Afficher les fenêtres contextuelles.

Partager via

Xamarin.Forms Didacticiel sur les fenêtres contextuelles

Afficher une alerte

Afficher une feuille d’actions

Félicitations !

Étapes suivantes

Partager via

Xamarin.Forms Didacticiel sur les fenêtres contextuelles

Afficher une alerte

Afficher une feuille d’actions

Félicitations !

Étapes suivantes

Liens connexes