Exercício: Usar recursos dinâmicos para atualizar elementos

Concluído

Neste exercício, você usará a extensão de marcação DynamicResource para atualizar a interface do usuário do TipCalculator quando os valores dos recursos forem alterados.

Este exercício é uma continuação do exercício anterior. Use sua solução existente como ponto de partida para essas etapas ou abra o projeto TipCalculator na pasta exercise2/TipCalculator no repositório clonado no exercício anterior.

Localizar código repetido

O aplicativo implementa esquemas de cores simples "claro" e "escuro" para a página StandardTipPage. Aqui, você examina o código usado para alterar as cores.

1. Abra o arquivo StandardTipPage.xaml.cs.

2. Localize os dois manipuladores de evento que atualizam as cores da interface do usuário.

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

   Observe como o código atualiza as cores de cada controle individualmente, resultando em código repetido.

Atualizar recursos do código

Você começa escrevendo um código que atualiza alguns recursos armazenados no dicionário de recursos de uma página.

1. Remova todo o código do método OnLight.

2. Adicione o código a seguir mostrado ao método OnLight. Esse código define o recurso fgColor no dicionário de recursos da página como o valor na variável colorNavy e define o recurso bgColor como o valor na variável colorSilver. As variáveis colorNavy e colorSilver usam o método estáticoColor.FromRgb, o que facilita a conversão de um valor hexadecimal em uma cor.

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

3. Repita as duas etapas anteriores para o método OnDark, mas reverta as cores; defina fgColor como colorSilver e bgColor como colorNavy.

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

4. Execute o aplicativo. Selecione os botões Escuro e Claro. A interface do usuário não se altera. Embora o código altere os valores de recurso no dicionário, o novo valor não é propagado para a interface do usuário. O problema é que você está usando a extensão de marcação StaticResource para definir os valores no código XAML.

Atualizar a interface do usuário dinamicamente

Para corrigir o problema, modifique o XAML para que os valores de recursos atualizados sejam carregados na interface do usuário.

1. Pare o aplicativo e abra o arquivo StandardTipPage.xaml.

2. Localize todos os locais em que você atribui cores de valores de recursos. Substitua o uso da extensão de marcação StaticResource por DynamicResource, conforme mostrado neste exemplo.

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

   Observação

   Não altere as propriedades FontSize de StaticResource para DynamicResource.

3. Execute o aplicativo. Selecione os botões Escuro e Claro. A interface do usuário agora é atualizada corretamente.