Exercice - Remplacer le code par des liaisons .NET MAUI - Training

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.

Télécharger et exécuter l’exemple

Pour démarrer ce module d’exercice, téléchargez le projet Weather Sample. Ce projet affiche la météo d’un faux service de rapport météo. Le code ne contient aucune liaison de données.

Téléchargez et extrayez le projet Weather Sample dans un dossier temporaire.
Accédez au dossier before et ouvrez la solution WeatherClient.sln.
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. Appuyez sur le bouton Refresh pour voir leur mise à jour.

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 en utilisant le 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 appuyez sur le bouton Refresh et que le service météo retourne des données, aucun des contrôles n’est mis à jour avec les prévisions météo. 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 (le dernier contrôle Label de la grille) devrait avoir la propriété Text sous la forme du 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 appuyez sur le bouton Refresh. 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 changée en ressource d’image sans faire un effort supplémentaire. Le problème sera résolu dans le prochain exercice quand vous en aurez appris davantage sur les liaisons.

Continuer

Exercice - Remplacer le code par des liaisons .NET MAUI

Télécharger et exécuter l’exemple

Définir le contexte de liaison

Créer des liaisons en XAML

Commentaires