Xamarin.Forms Tutoriel sur le bouton

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

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

Démarrage rapide de la création de votre première Xamarin.Forms application .
Didacticiel StackLayout.

Dans ce tutoriel, vous allez apprendre à :

Créez un Xamarin.FormsButton en XAML.
Répondre à une activation du Button par pression.
Modifier l’apparence de l’élément Button.

Vous allez utiliser Visual Studio 2019 ou Visual Studio pour Mac pour créer une application simple qui montre comment personnaliser un Button. Les captures d’écran suivantes montrent l’application finale :

Vous utiliserez également des Rechargement à chaud XAML pour Xamarin.Forms afficher les modifications apportées à l’interface utilisateur sans regénérer votre application.

Créer un bouton

6 minutes restantes

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

Important

Pour les extraits C# et XAML de ce didacticiel, la solution doit se nommer ButtonTutorial. 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 Approfondi.
Dans l’Explorateur de solutions, dans le projet ButtonTutorial, 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="ButtonTutorial.MainPage">
   <StackLayout Margin="20,35,20,20">
       <Button Text="Click me" />
   </StackLayout>
</ContentPage>
```
Ce code définit de manière déclarative l’interface utilisateur de la page, qui comprend un élément Button dans StackLayout. La propriété Button.Text spécifie le texte qui apparaît dans l’élément Button.
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 :

Notez que, par défaut, un élément Button tend à occuper tout l’espace qui lui est accordé ; dans ce cas, la largeur totale de son parent (l’élément StackLayout).

Dans Visual Studio, arrêtez l’application.

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

Important

Pour les extraits C# et XAML de ce didacticiel, la solution doit se nommer ButtonTutorial. 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 Approfondi.
Dans le Panneau Solutions, dans le projet ButtonTutorial, 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="ButtonTutorial.MainPage">
   <StackLayout Margin="20,35,20,20">
       <Button Text="Click me" />
   </StackLayout>
</ContentPage>
```
Ce code définit de manière déclarative l’interface utilisateur de la page, qui comprend un élément Button dans StackLayout. La propriété Button.Text spécifie le texte qui apparaît dans l’élément Button.
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 :

Notez que, par défaut, un élément Button tend à occuper tout l’espace qui lui est accordé ; dans ce cas, la largeur totale de son parent (l’élément StackLayout).

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

Gérer les clics

4 minutes restantes

Visual Studio
Visual Studio pour Mac

Dans MainPage.xaml, modifiez la déclaration Button pour qu’elle définisse un gestionnaire pour l’événement Clicked :
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
Ce code définit l’événement Clicked sur un gestionnaire d’événements nommé OnButtonClicked qui sera créé à l’étape suivante.
Dans l’Explorateur de solutions, dans le projet ButtonTutorial, 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 OnButtonClicked à la classe :
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
Lorsque vous appuyez sur Button, la méthode OnButtonClicked s’exécute. L’argument sender est l’objet Button chargé de déclencher l’événement Clicked ; il peut être utilisé pour accéder à l’objet Button. Ce gestionnaire d’événements met à jour le texte affiché par Button.

Notes

Outre l’événement Clicked, Button définit également les événements Pressed et Released. Pour plus d’informations, consultez Appuyer et relâcher le bouton dans le Xamarin.Forms guide Bouton .
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. Cliquez sur Button. Vous remarquerez que le texte qui s’affiche change :

Pour plus d’informations sur la gestion des clics de bouton, consultez Gestion des clics de bouton dans le Xamarin.Forms guide bouton .

Dans MainPage.xaml, modifiez la déclaration Button pour qu’elle définisse un gestionnaire pour l’événement Clicked :
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
Ce code définit l’événement Clicked sur un gestionnaire d’événements nommé OnButtonClicked qui sera créé à l’étape suivante.
Dans Panneau Solutions, dans le projet ButtonTutorial, 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 OnButtonClicked à la classe :
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
Lorsque vous appuyez sur Button, la méthode OnButtonClicked s’exécute. L’argument sender est l’objet Button chargé de déclencher l’événement Clicked ; il peut être utilisé pour accéder à l’objet Button. Ce gestionnaire d’événements met à jour le texte affiché par Button.

Notes

Outre l’événement Clicked, Button définit également les événements Pressed et Released. Pour plus d’informations, consultez Appuyer et relâcher le bouton dans le Xamarin.Forms guide Bouton .
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. Cliquez sur Button. Vous remarquerez que le texte qui s’affiche change :

Pour plus d’informations sur la gestion des clics de bouton, consultez Gestion des clics de bouton dans le Xamarin.Forms guide bouton .

Changer l’apparence

2 minutes restantes

Visual Studio
Visual Studio pour Mac

Dans MainPage.xaml, modifiez la déclaration Button pour modifier son apparence visuelle :
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
Ce code définit les propriétés qui modifient l’apparence visuelle de Button. La propriété TextColor définit la couleur du texte Button et la propriété BackgroundColor définit la couleur de l’arrière-plan du texte. La propriété BorderColor définit la couleur de la zone qui entoure l’élément Button, et la propriété BorderWidth définit la largeur de la bordure. Par défaut, l’élément Button est rectangulaire, mais vous pouvez arrondir ses angles en définissant la propriété CornerRadius sur une valeur adéquate. En outre, la taille de l’élément Button peut être modifiée en définissant les propriétés WidthRequest et HeightRequest.
Si l’application est toujours en cours d’exécution, enregistrez les modifications dans le fichier : l’interface utilisateur de l’application est alors mise à jour automatiquement dans votre simulateur ou votre émulateur. Sinon, dans la barre d’outils de 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 que vous avez choisi. Vous remarquerez que l’apparence de l’élément Button a changé :

Dans Visual Studio, arrêtez l’application.

Pour plus d’informations sur la définition Button de l’apparence, consultez Apparence des boutons dans le Xamarin.Forms guide Bouton .

Dans MainPage.xaml, modifiez la déclaration Button pour modifier son apparence visuelle :
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
Ce code définit les propriétés qui modifient l’apparence visuelle de Button. La propriété TextColor définit la couleur du texte Button et la propriété BackgroundColor définit la couleur de l’arrière-plan du texte. La propriété BorderColor définit la couleur de la zone qui entoure l’élément Button, et la propriété BorderWidth définit la largeur de la bordure. Par défaut, l’élément Button est rectangulaire, mais vous pouvez arrondir ses angles en définissant la propriété CornerRadius sur une valeur adéquate. En outre, la taille de l’élément Button peut être modifiée en définissant les propriétés WidthRequest et HeightRequest.
Si l’application est toujours en cours d’exécution, enregistrez les modifications dans le fichier : l’interface utilisateur de l’application est alors mise à jour automatiquement dans votre simulateur ou votre émulateur. Sinon, dans la barre d’outils de 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 que vous avez choisi. Vous remarquerez que l’apparence de l’élément Button a changé :

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

Pour plus d’informations sur la définition Button de l’apparence, consultez Apparence de bouton dans le Xamarin.Forms guide Button .

Xamarin.Forms Tutoriel sur le bouton

Créer un bouton

Gérer les clics

Changer l’apparence

Félicitations !

Étapes suivantes

Xamarin.Forms Tutoriel sur le bouton

Créer un bouton

Gérer les clics

Changer l’apparence

Félicitations !

Étapes suivantes

Liens connexes