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

Concluído

Neste exercício, você usa a extensão de marcação DynamicResource para atualizar a interface do usuário do TipCalculator quando os valores do recurso são 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.

Encontrar 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 eventos 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 para cada controle individualmente, resultando em código repetido.

Atualizar recursos a partir do código

Você começa escrevendo 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 seguinte código 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ático Color.FromRgb , 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 inverta as cores: defina fgColor como colorSilver e bgColor como colorNavy.

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

4. Executar a aplicação. Selecione os botões Escuro e Claro. A interface do usuário não muda. 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.

Atualize a interface do usuário dinamicamente

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

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

2. Localize todos os locais onde 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}" ... />
   ...
   

   Nota

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

3. Executar a aplicação. Selecione os botões Escuro e Claro. A interface do usuário agora é atualizada corretamente.