Esercizio - Creare un convertitore .NET MAUI

Completato

In questo esercizio si aggiunge un convertitore all'app Meteo creata nell'esercizio precedente. Il primo convertitore converte un valore di enumerazione in una risorsa immagine. Il secondo convertitore converte la temperatura da Fahrenheit a Celsius.

Convertire in un'immagine

Il contesto di binding corrente della pagina dell'app Meteo è un oggetto dati con proprietà che descrivono le previsioni meteo. Una di queste proprietà è la condizione del cielo, ovvero un'enumerazione. Quando vengono visualizzate le informazioni meteo, l'app dovrebbe mostrare un'icona che consente all’utente di visualizzare la condizione del cielo. Affinché queste icone vengano mostrate, l'enumerazione deve essere convertita in una risorsa immagine.

1. Aprire il progetto Weather Sample dell'esercizio precedente in Visual Studio o Visual Studio Code.

2. Aggiungere al progetto una cartella denominata Converters.

3. Aggiungere alla cartella Converters una nuova classe denominata WeatherConditionToImageConverter.cs.

4. Aprire WeatherConditionToImageConverter.cs nell'editor di codice e sostituire tutto il codice con il codice seguente:

   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();
   }
   

   Questo codice definisce il convertitore WeatherConditionToImageConverter nello spazio dei nomi WeatherClient.Converters. Questo convertitore prevede l'enumerazione WeatherType come valore e restituisce una risorsa immagine basata su tale valore.

5. Aprire il file MainPage.xaml.

6. Nell'elemento radice aggiungere un nuovo spazio dei nomi XML denominato cvt ed eseguirne il mapping allo spazio dei nomi .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. Aggiungere un'istanza del convertitore WeatherConditionToImageConverter alle risorse della pagina, con la chiave di WeatherConditionToImageConverter:

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

8. Trovare il controllo <Image> in Grid.Row="0".

9. Modificare la proprietà Source="question.png" con il binding seguente:

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

10. Eseguire il progetto.

Si noti che quando si preme il pulsante Refresh, il campo Condition cambia in un'icona: