演習 - .NET MAUI コンバーターを作成する

この演習では、前の演習で作成した天気アプリにコンバーターを追加します。 最初のコンバーターは、列挙体の値をイメージ リソースに変換します。 2 番目のコンバーターは、温度を華氏から摂氏に変換します。

イメージに変換する

天気アプリのページの、現在のバインド コンテキストは、天気予報を記述するプロパティを持つデータ オブジェクトです。 このプロパティの 1 つが、列挙体である空模様です。 気象情報が表示されるときに、空模様を視覚化するのに役立つアイコンをアプリに表示する必要があります。 これらのアイコンを表示するには、列挙型をイメージ リソースに変換する必要があります。

1. Visual Studio または Visual Studio Code で、前の演習の Weather Sample プロジェクトを開きます。

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

   このコードは、WeatherConditionToImageConverter 名前空間内の WeatherClient.Converters コンバーターを定義します。 このコンバーターは、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. <Image> で Grid.Row="0" コントロールを見つけます。

9. Source="question.png" プロパティを次のバインドに変更します。

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

10. プロジェクトを実行します。

[更新] ボタンを選択すると、[条件] フィールドがアイコンに変わります。