Övning – Skapa en .NET MAUI-konverterare

Slutförd

I den här övningen lägger du till en konverterare i appen Väder som skapades i föregående övning. Den första konverteraren konverterar ett uppräkningsvärde till en bildresurs. Den andra konverteraren konverterar temperaturen från Fahrenheit till Celsius.

Konvertera till en bild

Den aktuella bindningskontexten för väderappens sida är ett dataobjekt med egenskaper som beskriver väderprognosen. En av dessa egenskaper är himmelsvillkoret, som är en uppräkning. När väderinformation visas bör appen visa en ikon som hjälper användaren att visualisera himlens villkor. Om du vill visa dessa ikoner måste uppräkningen konverteras till en bildresurs.

1. Öppna projektet Väderexempel från föregående övning i Visual Studio eller Visual Studio Code.

2. Lägg till en mapp i projektet med namnet Konverterare.

3. Lägg till en ny klass i mappen Konverterare med namnet WeatherConditionToImageConverter.cs.

4. Öppna WeatherConditionToImageConverter.cs i kodredigeraren och ersätt all kod med följande kod:

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

   Den här koden definierar WeatherConditionToImageConverter konverteraren i WeatherClient.Converters namnområdet. Den här konverteraren förväntar sig WeatherType uppräkning som värde och returnerar en bildresurs baserat på det värdet.

5. Öppna filen MainPage.xaml.

6. I rotelementet lägger du till ett nytt XML-namnområde med namnet cvt och mappar det till .NET-namnområdet 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. Lägg till en instans av WeatherConditionToImageConverter konverteraren till sidans resurser med nyckeln WeatherConditionToImageConverter:

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

8. <Image> Hitta kontrollen i Grid.Row="0".

9. Ändra egenskapen Source="question.png" till följande bindning:

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

10. Kör projektet.

Observera att när du trycker på knappen Uppdatera ändras fältet Villkor till en ikon: