Previous

Next

Exercise - Create a .NET MAUI converter

Completed

In this exercise, you add a converter to the Weather app created in the previous exercise. The first converter converts an enumeration value to an image resource. The second converter converts the temperature from Farenheight to Celsius.

Convert to an image

The current binding context of the weather app's page is a data object with properties describing the weather forecast. One of those properties is the sky condition, which is an enumeration. When weather information is displayed, the app should show an icon to visualize the sky condition. This means that the enumeration needs to be converted to an image resource.

1. Open the Weather Sample project from the previous exercise in Visual Studio. If you don't have a copy, you can download it from GitHub.

2. Add a folder to the project named Converters.

3. Add a new class to the Converters folder named WeatherConditionToImageConverter.cs.

4. Open WeatherConditionToImageConverter.cs in the code editor and replace all the code with the following:

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

   This code defines the WeatherConditionToImageConverter converter in the WeatherClient.Converters namespace. This converter expects the WeatherType enumeration as the value, and returns an image resource based on that value.

5. Open the MainPage.xaml file.

6. On the root element, add a new XML namespace named cvt and map it to the .NET namespace 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. Add an instance of the WeatherConditionToImageConverter converter to the page's resources, with the key of WeatherConditionToImageConverter:

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

8. Find the <Image> control named imgCondition.

9. Change the Source="question.png" property to the following binding:

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

10. Run the project.

Notice that when you press the Refresh button, the Condition field changes to an icon:

Continue