Exercício – criar um conversor do .NET MAUI

Neste exercício, você adicionará um conversor ao aplicativo Weather 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 em Celsius.

Converter em uma imagem

O contexto de associação atual da página do aplicativo de clima é 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 de Amostra de Clima do exercício anterior no Visual Studio ou Visual Studio Code.

2. Adicione uma pasta ao projeto chamado 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();
   }
   

   Esse código define o conversor WeatherConditionToImageConverter no namespace WeatherClient.Converters. Esse conversor espera a enumeração WeatherType 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 do .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 conversor WeatherConditionToImageConverter aos recursos da página, com a chave de WeatherConditionToImageConverter:

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

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

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

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

10. Execute o projeto .

Observe que quando você seleciona o botão Atualizar , o campo Condição é alterado para um ícone: