Xamarin.Forms Tutoriel d’entrée

Article
Developer (Débutant)
8 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.FormsEntry en XAML.
Répondre au texte dans la variable Entry.
Personnaliser le comportement de l’élément Entry.

Vous allez utiliser Visual Studio 2019 ou Visual Studio pour Mac pour créer une application simple qui montre comment personnaliser le comportement d’une Entry. 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 une entrée

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

Important

Pour les extraits C# et XAML de ce didacticiel, la solution doit se nommer EntryTutorial. 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 EntryTutorial, 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="EntryTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Entry Placeholder="Enter text" />
    </StackLayout>
</ContentPage>
```
Ce code définit de manière déclarative l’interface utilisateur de la page, qui comprend un élément Entry dans StackLayout. La propriété Entry.Placeholder spécifie le texte d’espace réservé qui apparaît lorsque Entry s’affiche pour la première fois.
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 :

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

Important

Pour les extraits C# et XAML de ce didacticiel, la solution doit se nommer EntryTutorial. 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 Panneau Solutions, dans le projet EntryTutorial, 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="EntryTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Entry Placeholder="Enter text" />
    </StackLayout>
</ContentPage>
```
Ce code définit de manière déclarative l’interface utilisateur de la page, qui comprend un élément Entry dans StackLayout. La propriété Entry.Placeholder spécifie le texte d’espace réservé qui apparaît lorsque l’élément Entry s’affiche pour la première fois.
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 :

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

Répondre à des modifications de texte

5 minutes restantes

Visual Studio
Visual Studio pour Mac

Dans MainPage.xaml, modifiez la déclaration Entry pour qu’elle définisse un gestionnaire pour les événements TextChanged et Completed :
```
<Entry Placeholder="Enter text"
       TextChanged="OnEntryTextChanged"
       Completed="OnEntryCompleted" />
```
Ce code définit l’événement TextChanged sur un gestionnaire d’événements nommé OnEntryTextChanged et l’événement Completed sur un gestionnaire d’événements nommé OnEntryCompleted. Les deux gestionnaires d’événements seront créés à l’étape suivante.
Dans l’Explorateur de solutions, dans le projet EntryTutorial, 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 OnEntryTextChanged et OnEntryCompleted à la classe :
```
void OnEntryTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
}

void OnEntryCompleted(object sender, EventArgs e)
{
    string text = ((Entry)sender).Text;
}
```
Lorsque le texte de Entry change, la méthode OnEntryTextChanged s’exécute. L’argument sender est l’objet Entry chargé de déclencher l’événement TextChanged ; il peut être utilisé pour accéder à l’objet Entry. L’argument TextChangedEventArgs fournit les anciennes et les nouvelles valeurs de texte, avant et après le changement de texte.

Lorsque vous finalisez le texte dans Entry avec la touche Retour, la méthode OnEntryCompleted s’exécute. L’argument sender est l’objet Entry chargé de déclencher l’événement TextChanged ; il peut être utilisé pour accéder à l’objet Entry.

Important

Tout texte saisi dans Entry est stocké dans la propriété Text.
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 :

Définissez des points d’arrêt dans les deux gestionnaires d’événements et entrez du texte dans Entry pour observer le déclenchement des événements TextChanged et Completed.

Pour plus d’informations sur Entry les événements, consultez Événements et interactivité dans le guide d’entréeXamarin.Forms.

Dans MainPage.xaml, modifiez la déclaration Entry pour qu’elle définisse un gestionnaire pour les événements TextChanged et Completed :
```
<Entry Placeholder="Enter text"
       TextChanged="OnEntryTextChanged"
       Completed="OnEntryCompleted" />
```
Ce code définit l’événement TextChanged sur un gestionnaire d’événements nommé OnEntryTextChanged et l’événement Completed sur un gestionnaire d’événements nommé OnEntryCompleted. Les deux gestionnaires d’événements seront créés à l’étape suivante.
Dans Panneau Solutions, dans le projet EntryTutorial, 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 OnEntryTextChanged et OnEntryCompleted à la classe :
```
void OnEntryTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
}

void OnEntryCompleted(object sender, EventArgs e)
{
    string text = ((Entry)sender).Text;
}
```
Lorsque le texte de Entry change, la méthode OnEntryTextChanged s’exécute. L’argument sender est l’objet Entry chargé de déclencher l’événement TextChanged ; il peut être utilisé pour accéder à l’objet Entry. L’argument TextChangedEventArgs fournit les anciennes et les nouvelles valeurs de texte, avant et après le changement de texte.

Lorsque vous finalisez le texte dans Entry avec la touche Retour, la méthode OnEntryCompleted s’exécute. L’argument sender est l’objet Entry chargé de déclencher l’événement TextChanged ; il peut être utilisé pour accéder à l’objet Entry.

Important

Tout texte saisi dans Entry est stocké dans la propriété Text.
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 :

Définissez des points d’arrêt dans les deux gestionnaires d’événements et entrez du texte dans Entry pour observer le déclenchement des événements TextChanged et Completed.

Pour plus d’informations sur Entry les événements, consultez Événements et interactivité dans le guide d’entréeXamarin.Forms.

Personnaliser le comportement

2 minutes restantes

Visual Studio
Visual Studio pour Mac

Dans MainPage.xaml, modifiez la déclaration Entry pour personnaliser son comportement :
```
<Entry Placeholder="Enter password"
       MaxLength="15"
       IsSpellCheckEnabled="false"
       IsTextPredictionEnabled="false"
       IsPassword="true" />
```
Ce code définit les propriétés qui personnalisent le comportement de l’élément Entry. La propriété MaxLength limite la longueur d’entrée autorisée pour Entry, et la propriété IsSpellCheckEnabled est définie sur false pour désactiver la vérification orthographique. De même, la propriété IsTextPredictionEnabled est définie sur false pour désactiver la prédiction de texte et la prédiction de texte automatique. Par ailleurs, la propriété IsPassword permet de s’assurer que les caractères saisis seront masqués par un caractère de mot de passe (un cercle noir).

Notes

Dans certains scénarios de saisie de texte (saisie d’un mot de passe, par exemple), la vérification orthographique et la prédiction de texte produisent une expérience négative et doivent donc être désactivées.
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. Entrez du texte dans Entry. Vous remarquerez que chaque caractère est remplacé par un caractère de masque de mot de passe et que 15 caractères maximum peuvent être saisis :

Dans Visual Studio, arrêtez l’application.

Pour plus d’informations sur la personnalisation du Entry comportement, consultez le Xamarin.Forms Guide d’entrée .

Dans MainPage.xaml, modifiez la déclaration Entry pour personnaliser son comportement :
```
<Entry Placeholder="Enter password"
       MaxLength="15"
       IsSpellCheckEnabled="false"
       IsTextPredictionEnabled="false"
       IsPassword="true" />
```
Ce code définit les propriétés qui personnalisent le comportement de l’élément Entry. La propriété MaxLength limite la longueur d’entrée autorisée pour Entry, et la propriété IsSpellCheckEnabled est définie sur false pour désactiver la vérification orthographique. De même, la propriété IsTextPredictionEnabled est définie sur false pour désactiver la prédiction de texte et la prédiction de texte automatique. Par ailleurs, la propriété IsPassword permet de s’assurer que les caractères saisis seront masqués par un caractère de mot de passe (un cercle noir).

Notes

Dans certains scénarios de saisie de texte (saisie d’un mot de passe, par exemple), la vérification orthographique et la prédiction de texte produisent une expérience négative et doivent donc être désactivées.
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. Entrez du texte dans Entry. Vous remarquerez que chaque caractère est remplacé par un caractère de masque de mot de passe et que 15 caractères maximum peuvent être saisis :

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

Pour plus d’informations sur la personnalisation du Entry comportement, consultez le Xamarin.Forms Guide d’entrée .

Xamarin.Forms Tutoriel d’entrée

Créer une entrée

Répondre à des modifications de texte

Personnaliser le comportement

Félicitations !

Étapes suivantes

Xamarin.Forms Tutoriel d’entrée

Créer une entrée

Répondre à des modifications de texte

Personnaliser le comportement

Félicitations !

Étapes suivantes

Liens connexes