Exercice - Utiliser des ressources dynamiques pour mettre à jour des éléments

Effectué

Dans cet exercice, vous allez utiliser l’extension de balisage DynamicResource pour mettre à jour l’interface utilisateur TipCalculator lorsque les valeurs de la ressource changent.

Cet exercice est la suite de l’exercice précédent. Utilisez votre solution existante comme point de départ pour ces étapes, ou ouvrez le projet TipCalculator dans le dossier exercise2/TipCalculator du dépôt que vous avez cloné dans l’exercice précédent.

Rechercher le code répété

L’application implémente les modèles de couleurs simples « clair » (OnLight) et « foncé » (OnDark) pour la page StandardTipPage. Ici, vous consultez le code utilisé pour modifier les couleurs.

1. Ouvrez le fichier StandardTipPage.xaml.cs.

2. Recherchez les deux gestionnaires d’événements qui mettent à jour les couleurs de l’interface utilisateur.

   private Color colorNavy = Colors.Navy;
   private Color colorSilver = Colors.Silver;
   
   ...
   
   void OnLight(object sender, EventArgs e)
   {
       LayoutRoot.BackgroundColor = colorSilver;
   
       tipLabel.TextColor = colorNavy;
       billLabel.TextColor = colorNavy;
       totalLabel.TextColor = colorNavy;
       tipOutput.TextColor = colorNavy;
       totalOutput.TextColor = colorNavy;
   }
   
   void OnDark(object sender, EventArgs e)
   {
       LayoutRoot.BackgroundColor = colorNavy;
   
       tipLabel.TextColor = colorSilver;
       billLabel.TextColor = colorSilver;
       totalLabel.TextColor = colorSilver;
       tipOutput.TextColor = colorSilver;
       totalOutput.TextColor = colorSilver;
   }
   
   ...
   

   Notez que le code met à jour les couleurs de chaque contrôle individuellement, ce qui génère des répétitions de code.

Mettre à jour des ressources dans le code

Commencez par écrire un code qui met à jour quelques ressources stockées dans le dictionnaire de ressources d’une page.

1. Supprimez tout le code de la méthode OnLight.

2. Ajoutez le code suivant indiqué à la méthode OnLight. Ce code définit la ressource fgColor dans le dictionnaire de ressources de la page sur la valeur dans la variable colorNavy et définit la ressource bgColor sur la valeur dans la variable colorSilver. Les variables colorNavy et colorSilver utilisent la méthode statique Color.FromRgb, ce qui facilite la conversion d’une valeur hexadécimale en couleur.

   void OnLight(object sender, EventArgs e)
   {
       Resources["fgColor"] = colorNavy;
       Resources["bgColor"] = colorSilver;
   }
   

3. Répétez les deux étapes précédentes pour la méthode OnDark, mais inversez les couleurs ; définissez fgColor sur colorSilver et bgColor sur colorNavy.

   void OnDark(object sender, EventArgs e)
   {
       Resources["fgColor"] = colorSilver;
       Resources["bgColor"] = colorNavy;
   }
   

4. Exécutez l’application. Sélectionnez les boutons Dark (Foncé) et Light (Clair). L’interface utilisateur ne change pas. Bien que le code modifie les valeurs de la ressource dans le dictionnaire, les nouvelles valeurs ne sont pas répandues dans l’interface utilisateur. Le problème est que vous utilisez l’extension de balisage StaticResource pour définir les valeurs dans le code XAML.

Mettre à jour l’interface utilisateur de façon dynamique

Pour résoudre le problème, modifiez votre XAML afin que les valeurs de ressources mises à jour soient chargées dans votre interface utilisateur.

1. Arrêtez l’application et ouvrez le fichier StandardTipPage.xaml.

2. Recherchez tous les emplacements où des couleurs sont définies à partir des valeurs des ressources. Remplacez l’utilisation de l’extension de balisage StaticResource par DynamicResource, comme indiqué dans cet exemple.

   <Grid x:Name ="LayoutRoot" BackgroundColor="{DynamicResource bgColor}" Padding="10">
   ...
   <Label x:Name="billLabel"  Text="Bill"  TextColor="{DynamicResource fgColor}" ... />
   <Label x:Name="tipLabel"   Text="Tip"   TextColor="{DynamicResource fgColor}" ... />
   <Label x:Name="totalLabel" Text="Total" TextColor="{DynamicResource fgColor}" ... />
   ...
   

   Remarque

   Ne modifiez pas les propriétés FontSize de StaticResource à DynamicResource.

3. Exécutez l’application. Sélectionnez les boutons Dark (Foncé) et Light (Clair). L’interface utilisateur se met à présent à jour correctement.