Oefening: een .NET MAUI-conversieprogramma maken

Voltooid

In deze oefening voegt u een conversieprogramma toe aan de Weer-app die u in de vorige oefening hebt gemaakt. Met het eerste conversieprogramma wordt een opsommingswaarde geconverteerd naar een afbeeldingsresource. De tweede converter converteert de temperatuur van Fahrenheit naar Celsius.

Converteren naar een afbeelding

De huidige bindingscontext van de pagina van de weer-app is een gegevensobject met eigenschappen die de weersvoorspelling beschrijven. Een van deze eigenschappen is de luchtvoorwaarde, een opsomming. Wanneer er weerinformatie wordt weergegeven, moet de app een pictogram weergeven om de gebruiker te helpen de skyvoorwaarde te visualiseren. Als u deze pictogrammen wilt weergeven, moet de opsomming worden geconverteerd naar een afbeeldingsresource.

1. Open het weervoorbeeldproject uit de vorige oefening in Visual Studio of Visual Studio Code.

2. Voeg een map toe aan het project met de naam Conversieprogramma's.

3. Voeg een nieuwe klasse toe aan de map Conversieprogramma's met de naam WeatherConditionToImageConverter.cs.

4. Open WeatherConditionToImageConverter.cs in de code-editor en vervang alle code door de volgende code:

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

   Deze code definieert het WeatherConditionToImageConverter conversieprogramma in de WeatherClient.Converters naamruimte. Dit conversieprogramma verwacht de inventarisatie als de WeatherType waarde en retourneert een afbeeldingsresource op basis van die waarde.

5. Open het bestand MainPage.xaml .

6. Voeg op het hoofdelement een nieuwe XML-naamruimte toe met de naam cvt en wijs deze toe aan de .NET-naamruimte 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. Voeg een exemplaar van het WeatherConditionToImageConverter conversieprogramma toe aan de resources van de pagina, met de sleutel van WeatherConditionToImageConverter:

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

8. Zoek het <Image> besturingselement in Grid.Row="0".

9. Wijzig de Source="question.png" eigenschap in de volgende binding:

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

10. Voer het project uit.

Wanneer u op de knop Vernieuwen drukt, verandert het veld Voorwaarde in een pictogram: