Övning: Använda dynamiska resurser för att uppdatera element

Slutförd

I den här övningen använder du markeringstillägget DynamicResource för att uppdatera TipCalculator-användargränssnittet när resursvärdena ändras.

Den här övningen är en fortsättning på föregående övning. Använd antingen din befintliga lösning som utgångspunkt för de här stegen eller öppna TipCalculator-projektet i mappen exercise2/TipCalculator på den lagringsplats som du klonade i föregående övning.

Hitta upprepad kod

Appen implementerar enkla "ljusa" och "mörka" färgscheman för sidan StandardTipPage . Här undersöker du koden som används för att ändra färgerna.

1. Öppna filen StandardTipPage.xaml.cs .

2. Leta upp de två händelsehanterare som uppdaterar användargränssnittets färger.

   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;
   }
   
   ...
   

   Observera hur koden uppdaterar färgerna för varje kontroll individuellt, vilket resulterar i upprepad kod.

Uppdatera resurser från kod

Du börjar med att skriva kod som uppdaterar några resurser som lagras i en sidas resursordlista.

1. Ta bort all kod från OnLight-metoden.

2. Lägg till följande kod som visas i metoden OnLight . Den här koden anger fgColor-resursen i sidans resursordlista till värdet i variabeln colorNavy och anger bgColor-resursen till värdet i variabeln colorSilver . Variablerna colorNavy och colorSilver använder metoden static Color.FromRgb , vilket gör det enkelt att konvertera ett hexadecimalt värde till en färg.

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

3. Upprepa de föregående två stegen för metoden OnDark , men ändra färgerna. Ange fgColor till colorSilver och bgColor till colorNavy.

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

4. Kör appen. Välj knapparna Mörk och Ljus . Användargränssnittet ändras inte. Även om koden ändrar resursvärdena i ordlistan sprids inte det nya värdet till användargränssnittet. Problemet är att du använder StaticResource-påläggstillägget för att ange värdena i XAML-koden.

Uppdatera användargränssnittet dynamiskt

Åtgärda problemet genom att ändra XAML så att uppdaterade resursvärden läses in i användargränssnittet.

1. Stoppa appen och öppna filen StandardTipPage.xaml .

2. Leta upp alla platser där du tilldelar färger från resursvärden. Ersätt användningen av StaticResource-påläggstillägget med DynamicResource, som du ser i det här exemplet.

   <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}" ... />
   ...
   

   Kommentar

   Ändra inte egenskaperna FontSize från StaticResource till DynamicResource.

3. Kör appen. Välj knapparna Mörk och Ljus . Användargränssnittet uppdateras nu korrekt.