Exercice - Remplacer le code par des liaisons .NET MAUI

10 minutes

Dans cet exercice, vous allez convertir une application qui utilise des événements et du code-behind en une application qui utilise principalement la liaison de données. L’exemple d’application est une application de prévision météo qui affiche le temps de la journée.

Ouvrir la solution initiale

Clonez ou téléchargez le dépôt des exercices à partir de GitHub.

Remarque

Il est préférable de cloner ou de télécharger le contenu de l’exercice dans un chemin d’accès de dossier court, comme C:\dev, pour éviter que les fichiers générés par la build dépassent la longueur maximale des chemins d’accès.
Ouvrez la solution WeatherClient.sln à partir du dossier de démarrage à l’aide de Visual Studio ou ouvrez le dossier de démarrage dans Visual Studio Code.
Générez et exécutez le projet pour vérifier qu’il fonctionne. Sur l’écran affiché, vous voyez quelques détails météo vides. Entrez un code postal et sélectionnez le bouton Actualiser , et vous verrez la mise à jour des détails météorologiques.

Pour référence, voici un récapitulatif des classes et des fichiers que vous allez utiliser dans cet exercice.

Fichier	Description
MainPage.xaml	Définit l’interface utilisateur et la logique de la page initiale. Le fichier XAML définit l’interface utilisateur à l’aide du balisage.
MainPage.xaml.cs	Définit l’interface utilisateur et la logique de la page initiale. Fichier code-behind associé qui contient le code lié à l’interface utilisateur définie par MainPage.xaml.
Services\WeatherService.cs	Cette classe simule un service de rapport météo. Elle contient une seule méthode nommée `GetWeather` qui retourne un type `WeatherData`.
Models\WeatherData.cs	Contient les données météo. Il s’agit d’un type d’enregistrement simple qui fournit la température, les précipitations, l’humidité, le vent et la condition du jour.
Models\WeatherType.cs	Énumération de la condition météo, ensoleillé ou nuageux.

Définir le contexte de liaison

Vous devez modifier le code-behind du gestionnaire d’événements de clic du bouton Refresh. Le code obtient actuellement les données météo et met à jour les contrôles directement. Au lieu de cela, obtenez les données météo et définissez-les comme contexte de liaison pour la page.

Ouvrez le fichier de code MainPage.xaml.cs.
Passez en revue la méthode btnRefresh_Clicked. Cette méthode effectue les étapes suivantes :
- Désactive le bouton et active le compteur « busy ».
- Obtient les prévisions météo du service météo.
- Met à jour les contrôles de la page avec les informations météo.
- Active le bouton et désactive le compteur « busy ».

Supprimez le code qui met à jour les contrôles avec des données. Votre code d’événement devrait ressembler à l’extrait de code suivant :

private async void btnRefresh_Clicked(object sender, EventArgs e)
{
    btnRefresh.IsEnabled = false;
    actIsBusy.IsRunning = true;

    Models.WeatherData weatherData = await Services.WeatherServer.GetWeather(txtPostalCode.Text);

    btnRefresh.IsEnabled = true;
    actIsBusy.IsRunning = false;
}

Au lieu d’affecter le résultat de la méthode GetWeather du service à une variable, affectez-le à la page BindingContext :

private async void btnRefresh_Clicked(object sender, EventArgs e)
{
    btnRefresh.IsEnabled = false;
    actIsBusy.IsRunning = true;

    BindingContext = await Services.WeatherServer.GetWeather(txtPostalCode.Text);

    btnRefresh.IsEnabled = true;
    actIsBusy.IsRunning = false;
}

Exécutez le projet . Notez que lorsque vous sélectionnez le bouton Actualiser et que le service météo retourne les données, aucun des contrôles n’est mis à jour avec les prévisions météorologiques. Vous corrigerez ce bogue dans la prochaine section.

Créer des liaisons en XAML

Maintenant que le code-behind définit le contexte de liaison de la page, vous pouvez ajouter les liaisons aux contrôles pour utiliser les données sur le contexte.

Ouvrez le fichier MainPage.xaml.

Recherchez le Grid interne qui contient tous les contrôles Label.

<Grid Grid.Row="2" RowDefinitions="Auto, Auto, Auto, Auto, Auto" ColumnDefinitions="Auto, Auto" Margin="0,5,0,0">
    <Label Grid.Row="0" Grid.Column="0" Text="Condition" VerticalOptions="Center" />
    <Image x:Name="imgCondition" Grid.Row="0" Grid.Column="1" HeightRequest="25" WidthRequest="25" Source="question.png" HorizontalOptions="Start" />
    <Label Grid.Row="1" Grid.Column="0" Text="Temperature" Margin="0,0,20,0" />
    <Label x:Name="lblTemperature" Grid.Row="1" Grid.Column="1" Text="0" />
    <Label Grid.Row="2" Grid.Column="0" Text="Humidity" Margin="0,0,20,0" />
    <Label x:Name="lblHumidity" Grid.Row="2" Grid.Column="1" Text="0" />
    <Label Grid.Row="3" Grid.Column="0" Text="Precipitation" Margin="0,0,20,0" />
    <Label x:Name="lblPrecipitation" Grid.Row="3" Grid.Column="1" Text="0" />
    <Label Grid.Row="4" Grid.Column="0" Text="Wind" Margin="0,0,20,0" />
    <Label x:Name="lblWind" Grid.Row="4" Grid.Column="1" Text="0" />
</Grid>

Ajoutez des liaisons à chacun des contrôles nommés Label. Il y en a quatre.

La propriété Label.Text devrait avoir sa valeur remplacée par la syntaxe {Binding PROPERTY_NAME} où PROPERTY_NAME est une propriété du type Models.WeatherData défini dans Models\WeatherData.cs. N’oubliez pas que ce type est le type de données retourné par le service météo.

Par exemple, le Label nommé lblWind (la dernière étiquette de la grille) devrait avoir la propriété Text qui devrait ressembler au code suivant :
```
<Label x:Name="lblWind" Grid.Row="4" Grid.Column="1" Text="{Binding Wind}" />
```
Dans la <Grid> des contrôles qui liste tous les détails météo, supprimez tous les attributs x:Name="...".

Les noms ne sont plus obligatoires maintenant que les contrôles ne sont pas référencés dans le code-behind.

Vérifiez que vos liaisons XAML correspondent à l’extrait de code suivant :

<Grid Grid.Row="2" RowDefinitions="Auto, Auto, Auto, Auto, Auto" ColumnDefinitions="Auto, Auto" Margin="0,5,0,0">
    <Label Grid.Row="0" Grid.Column="0" Text="Condition" VerticalOptions="Center" />
    <Image Grid.Row="0" Grid.Column="1" HeightRequest="25" WidthRequest="25" Source="question.png" HorizontalOptions="Start" />
    <Label Grid.Row="1" Grid.Column="0" Text="Temperature" Margin="0,0,20,0" />
    <Label Grid.Row="1" Grid.Column="1" Text="{Binding Temperature}" />
    <Label Grid.Row="2" Grid.Column="0" Text="Humidity" Margin="0,0,20,0" />
    <Label Grid.Row="2" Grid.Column="1" Text="{Binding Humidity}" />
    <Label Grid.Row="3" Grid.Column="0" Text="Precipitation" Margin="0,0,20,0" />
    <Label Grid.Row="3" Grid.Column="1" Text="{Binding Precipitation}" />
    <Label Grid.Row="4" Grid.Column="0" Text="Wind" Margin="0,0,20,0" />
    <Label Grid.Row="4" Grid.Column="1" Text="{Binding Wind}" />
</Grid>

Exécutez l’application et sélectionnez le bouton Actualiser . L’application fonctionne presque comme l’original.

Notez que l’icône représentant la condition ne se met pas à jour pour remplacer le point d’interrogation par une icône de soleil ou de nuage. Pourquoi l’icône ne change-t-elle pas ? Parce que l’icône est une ressource d’image choisie dans le code en fonction de la valeur d’énumération WeatherData.Condition. La valeur d’énumération ne peut pas être modifiée en ressource d’image sans effort supplémentaire. Vous allez résoudre ce problème dans l’exercice suivant après avoir appris plus d’informations sur les liaisons.

Commentaires

Cette page a-t-elle été utile ?