Ejercicio: creación de un convertidor de .NET MAUI

• 10 minutos

En este ejercicio, agrega un convertidor a la aplicación Tiempo creada en el ejercicio anterior. El primer convertidor convierte un valor de enumeración en un recurso de imagen. El segundo convertidor convierte la temperatura de Fahrenheit a Celsius.

Conversión a una imagen

El contexto de enlace actual de la página de la aplicación Tiempo es un objeto de datos con propiedades que describen la previsión meteorológica. Una de esas propiedades es la condición del cielo, que es una enumeración. Cuando se muestra información meteorológica, la aplicación debe mostrar un icono para facilitar al usuario la visualización de la condición del cielo. Para mostrar estos iconos, la enumeración se debe convertir en un recurso de imagen.

1. Abra el proyecto Weather Sample del ejercicio anterior en Visual Studio. Si no tiene una copia, puede descargarla desde GitHub.

2. Agregue una carpeta al proyecto denominado Converters.

3. Agregue una nueva clase a la carpeta Converters denominada WeatherConditionToImageConverter.cs.

4. Abra WeatherConditionToImageConverter.cs en el editor de código y reemplace todo el código por el siguiente:

   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 el convertidor WeatherConditionToImageConverter en el espacio de nombres WeatherClient.Converters. Este convertidor espera la enumeración WeatherType como valor y devuelve un recurso de imagen basado en ese valor.

5. Abra el archivo MainPage.xaml.

6. En el elemento raíz, agregue un nuevo espacio de nombres XML denominado cvt y asígnelo al espacio de nombres .NET WeatherClient.Converters.

   <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. Agregue una instancia del convertidor WeatherConditionToImageConverter a los recursos de la página, con la clave de WeatherConditionToImageConverter:

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

8. Busque el control <Image> en Grid.Row="0".

9. Cambie la propiedad Source="question.png" al enlace siguiente:

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

10. Ejecute el proyecto.

Observe que, al presionar el botón Actualizar, el campo Condición cambia a un icono: