Xamarin.Forms Tutoriel sur l’éditeur

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

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

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

Dans ce tutoriel, vous allez apprendre à :

Créez un Xamarin.FormsEditor dans XAML.
Répondre au texte dans la variable Editor.
Personnaliser le comportement de l’élément Editor.

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 Editor. Les captures d’écran suivantes montrent l’application finale :

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

Créer un éditeur

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

Important

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

Notes

Android indique la hauteur de l’élément Editor, mais ce n’est pas le cas d’iOS.

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, puis créez une application vide Xamarin.Forms nommée EditorTutorial.

Important

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

Notes

Android indique la hauteur de l’élément Editor, mais ce n’est pas le cas d’iOS.

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

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

Lorsque la modification est terminée, la méthode OnEditorCompleted s’exécute. Pour y parvenir, vous devez décentrer Editor ou appuyer sur le bouton « Terminé » sur iOS. L’argument sender est l’objet Editor chargé de déclencher l’événement TextChanged ; il peut être utilisé pour accéder à l’objet Editor.

Important

Tout texte saisi dans Editor 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, entrez du texte dans Editor et observez le déclenchement de l’événement TextChanged. Décentrez Editor pour observer le déclenchement de l’événement Completed.

Pour plus d’informations sur Editor les événements, consultez Événements et interactivité dans le guide de l’éditeurXamarin.Forms.

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

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

Lorsque la modification est terminée, la méthode OnEditorCompleted s’exécute. Pour y parvenir, vous devez décentrer Editor ou appuyer sur le bouton « Terminé » sur iOS. L’argument sender est l’objet Editor chargé de déclencher l’événement TextChanged ; il peut être utilisé pour accéder à l’objet Editor.

Important

Tout texte saisi dans Editor 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, entrez du texte dans Editor et observez le déclenchement de l’événement TextChanged. Décentrez Editor pour observer le déclenchement de l’événement Completed.

Pour plus d’informations sur Editor les événements, consultez Événements et interactivité dans le guide de l’éditeurXamarin.Forms.

Personnaliser le comportement

2 minutes restantes

Visual Studio
Visual Studio pour Mac

Dans MainPage.xaml, modifiez la déclaration Editor pour personnaliser son comportement :
```
<Editor Placeholder="Enter multi-line text here"
        AutoSize="TextChanges"
        MaxLength="200"
        IsSpellCheckEnabled="false"
        IsTextPredictionEnabled="false" />
```
Ce code définit les propriétés qui personnalisent le comportement de l’élément Editor. La propriété AutoSize est définie sur TextChanges, ce qui indique que la hauteur de l’élément Editor augmente lorsqu’il comporte du texte et diminue lorsqu’il est vide. La propriété MaxLength limite la longueur de l’entrée autorisée pour l’élément Editor. En outre, la propriété IsSpellCheckEnabled est définie sur false pour désactiver la vérification orthographique, tandis que la propriété IsTextPredictionEnabled est définie sur false pour désactiver la prédiction de texte (automatique ou non).
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 le texte dans Editor, et constatez que la hauteur de l’élément Editor augmente lorsqu’il contient du texte et diminue à mesure que le texte est supprimé. Le nombre maximal de caractères est de 200 :

Dans Visual Studio, arrêtez l’application.

Pour plus d’informations sur la personnalisation du Editor comportement, consultez le Guide de l’éditeurXamarin.Forms.

Dans MainPage.xaml, modifiez la déclaration Editor pour personnaliser son comportement :
```
<Editor Placeholder="Enter multi-line text here"
        AutoSize="TextChanges"
        MaxLength="200"
        IsSpellCheckEnabled="false"
        IsTextPredictionEnabled="false" />
```
Ce code définit les propriétés qui personnalisent le comportement de l’élément Editor. La propriété AutoSize est définie sur TextChanges, ce qui indique que la hauteur de l’élément Editor augmente lorsqu’il comporte du texte et diminue lorsqu’il est vide. La propriété MaxLength limite la longueur de l’entrée autorisée pour l’élément Editor. En outre, la propriété IsSpellCheckEnabled est définie sur false pour désactiver la vérification orthographique, tandis que la propriété IsTextPredictionEnabled est définie sur false pour désactiver la prédiction de texte (automatique ou non).
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 le texte dans Editor, et constatez que la hauteur de l’élément Editor augmente lorsqu’il contient du texte et diminue à mesure que le texte est supprimé. Le nombre maximal de caractères est de 200 :

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

Pour plus d’informations sur la personnalisation du Editor comportement, consultez le Guide de l’éditeurXamarin.Forms.

Xamarin.Forms Tutoriel sur l’éditeur

Créer un éditeur

Répondre à des modifications de texte

Personnaliser le comportement

Félicitations !

Étapes suivantes

Xamarin.Forms Tutoriel sur l’éditeur

Créer un éditeur

Répondre à des modifications de texte

Personnaliser le comportement

Félicitations !

Étapes suivantes

Liens connexes