Latihan - Membuat pengonversi .NET MAUI
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.
Buka proyek Sampel Cuaca dari latihan sebelumnya di Visual Studio. Jika Anda tidak memiliki salinan, Anda dapat mengunduhnya dari GitHub.
Tambahkan folder ke proyek bernama Converters.
Tambahkan kelas baru ke folder Pengonversi bernama WeatherConditionToImageConverter.cs.
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 diWeatherClient.Converters
namespace. Pengonversi ini mengharapkanWeatherType
enumerasi sebagai nilai, dan mengembalikan sumber daya gambar berdasarkan nilai tersebut.Buka file MainPage.xaml.
Pada elemen akar, tambahkan namespace XML baru bernama
cvt
dan petakan ke namespaceWeatherClient.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">
Tambahkan instans
WeatherConditionToImageConverter
pengonversi ke sumber daya halaman, dengan kunci :WeatherConditionToImageConverter
<ContentPage ... <ContentPage.Resources> <cvt:WeatherConditionToImageConverter x:Key="WeatherConditionToImageConverter" /> </ContentPage.Resources>
<Image>
Temukan kontrol diGrid.Row="0"
.Ubah properti menjadi
Source="question.png"
pengikatan berikut:Source="{Binding Condition, Converter={StaticResource WeatherConditionToImageConverter}}"
Jalankan proyek.
Perhatikan bahwa saat Anda menekan tombol Refresh , bidang Kondisi berubah menjadi ikon: