Exercício - Criar um conversor .NET MAUI

Concluído

Neste exercício, você adiciona um conversor ao aplicativo Meteorologia criado no exercício anterior. O primeiro conversor converte um valor de enumeração em um recurso de imagem. O segundo conversor converte a temperatura de Fahrenheit para Celsius.

Converter em imagem

O contexto de vinculação atual da página do aplicativo de previsão do tempo é um objeto de dados com propriedades que descrevem a previsão do tempo. Uma dessas propriedades é a condição do céu, que é uma enumeração. Quando as informações meteorológicas são exibidas, o aplicativo deve mostrar um ícone para ajudar o usuário a visualizar a condição do céu. Para mostrar esses ícones, a enumeração precisa ser convertida em um recurso de imagem.

1. Abra o projeto Weather Sample do exercício anterior no Visual Studio ou Visual Studio Code.

2. Adicione uma pasta ao projeto chamada Conversores.

3. Adicione uma nova classe à pasta Conversores chamada WeatherConditionToImageConverter.cs.

4. Abra WeatherConditionToImageConverter.cs no editor de código e substitua todo o código pelo seguinte código:

   using System.Globalization;
   using WeatherClient.Models;
   
   namespace WeatherClient.Converters;
   
   internal class WeatherConditionToImageConverter : IValueConverter
   {
       public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
       {
           WeatherType weatherCondition = (WeatherType)value!;
   
           return weatherCondition switch
           {
               Models.WeatherType.Sunny => ImageSource.FromFile("sunny.png"),
               Models.WeatherType.Cloudy => ImageSource.FromFile("cloud.png"),
               _ => ImageSource.FromFile("question.png")
           };
       }
   
       public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture) =>
           throw new NotImplementedException();
   }
   

   Este código define o WeatherConditionToImageConverter conversor no WeatherClient.Converters namespace. Este conversor espera a WeatherType enumeração como o valor e retorna um recurso de imagem com base nesse valor.

5. Abra o arquivo MainPage.xaml .

6. No elemento raiz, adicione um novo namespace XML chamado cvt e mapeie-o para o namespace WeatherClient.Converters.NET.

   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:cvt="clr-namespace:WeatherClient.Converters"
                x:Class="WeatherClient.MainPage">
   

7. Adicione uma instância do WeatherConditionToImageConverter conversor aos recursos da página, com a chave de WeatherConditionToImageConverter:

   <ContentPage ...
   
       <ContentPage.Resources>
           <cvt:WeatherConditionToImageConverter x:Key="WeatherConditionToImageConverter" />
       </ContentPage.Resources>
   

8. Encontre o <Image> controle em Grid.Row="0".

9. Altere a Source="question.png" propriedade para a seguinte ligação:

   Source="{Binding Condition, Converter={StaticResource WeatherConditionToImageConverter}}"
   

10. Execute o projeto.

Observe que quando você pressiona o botão Atualizar , o campo Condição muda para um ícone: