연습 - .NET MAUI 변환기 만들기

완료됨

이 연습에서는 이전 연습에서 만든 날씨 앱에 변환기를 추가합니다. 첫 번째 변환기는 열거형 값을 이미지 리소스로 변환합니다. 두 번째 변환기는 화씨 온도를 섭씨로 변환합니다.

이미지로 변환

날씨 앱 페이지의 현재 바인딩 컨텍스트는 일기 예보를 설명하는 속성이 있는 데이터 개체입니다. 이러한 속성 중 하나는 열거형인 하늘 상태입니다. 날씨 정보가 표시되면 앱에 사용자가 하늘 상태를 시각화하는 데 도움이 되는 아이콘이 표시되어야 합니다. 이러한 아이콘을 표시하려면 열거형을 이미지 리소스로 변환해야 합니다.

1. 이전 연습의 날씨 샘플 프로젝트를 Visual Studio 또는 Visual Studio Code에서 엽니다.

2. Converters라는 프로젝트에 폴더를 추가합니다.

3. WeatherConditionToImageConverter.cs라는 Converters 폴더에 새 클래스를 추가합니다.

4. 코드 편집기에서 WeatherConditionToImageConverter.cs를 열고 모든 코드를 다음 코드로 바꿉다.

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

   이 코드는 WeatherClient.Converters 네임스페이스에서 WeatherConditionToImageConverter 변환기를 정의합니다. 이 변환기는 WeatherType 열거형을 값으로 예상하며 해당 값을 기반으로 이미지 리소스를 반환합니다.

5. MainPage.xaml 파일을 엽니다.

6. 루트 요소에서 cvt(으)로 명명된 새 XML 네임스페이스를 추가하고 .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. WeatherConditionToImageConverter 키를 사용하여 WeatherConditionToImageConverter 변환기의 인스턴스를 페이지의 리소스에 추가합니다.

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

8. Grid.Row="0"에서 <Image> 컨트롤을 찾습니다.

9. Source="question.png" 속성을 다음 바인딩으로 변경합니다.

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

10. 프로젝트를 실행합니다.

새로 고침 단추를 누르면 조건 필드가 아이콘으로 바뀝니다.