Sebelumnya

Berikutnya

Latihan - Membuat pengonversi .NET MAUI

Selesai

Dalam latihan ini, Anda menambahkan pengonversi ke aplikasi Cuaca yang dibuat di latihan sebelumnya. Pengonversi pertama mengonversi nilai enumerasi menjadi sumber daya gambar. Pengonversi kedua mengonversi suhu dari Farenheight ke Celcius.

Mengonversi ke gambar

Konteks pengikatan saat ini dari halaman aplikasi cuaca adalah objek data dengan properti yang menjelaskan prakiraan cuaca. Salah satu properti tersebut adalah kondisi langit, yang merupakan enumerasi. Saat informasi cuaca ditampilkan, aplikasi harus menampilkan ikon untuk membantu pengguna memvisualisasikan kondisi langit. Untuk menampilkan ikon ini, enumerasi perlu dikonversi ke sumber daya gambar.

1. Buka proyek Sampel Cuaca dari latihan sebelumnya di Visual Studio. Jika Anda tidak memiliki salinan, Anda dapat mengunduhnya dari GitHub.

2. Tambahkan folder ke proyek bernama Converters.

3. Tambahkan kelas baru ke folder Pengonversi bernama WeatherConditionToImageConverter.cs.

4. Buka WeatherConditionToImageConverter.cs di editor kode dan ganti semua kode dengan kode berikut:

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

   Kode ini mendefinisikan WeatherConditionToImageConverter pengonversi di WeatherClient.Converters namespace. Pengonversi ini mengharapkan WeatherType enumerasi sebagai nilai, dan mengembalikan sumber daya gambar berdasarkan nilai tersebut.

5. Buka file MainPage.xaml.

6. Pada elemen akar, tambahkan namespace XML baru bernama cvt dan petakan ke namespace WeatherClient.Converters.NET .

   <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. Tambahkan instans WeatherConditionToImageConverter pengonversi ke sumber daya halaman, dengan kunci :WeatherConditionToImageConverter

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

8. <Image> Temukan kontrol di Grid.Row="0".

9. Ubah properti menjadi Source="question.png" pengikatan berikut:

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

10. Jalankan proyek.

Perhatikan bahwa saat Anda menekan tombol Refresh , bidang Kondisi berubah menjadi ikon:

Lanjutkan