Latihan - Ganti kode dengan pengikatan .NET MAUI
Dalam latihan ini, Anda akan mengonversi aplikasi yang menggunakan peristiwa dan kode balik ke aplikasi yang sebagian besar menggunakan pengikatan data. Aplikasi sampel adalah aplikasi prakiraan cuaca yang menampilkan cuaca untuk hari itu.
Unduh dan jalankan sampel
Untuk memulai modul latihan ini, unduh proyek Sampel Cuaca. Proyek ini menampilkan cuaca dari layanan pelaporan cuaca palsu. Kode tidak berisi pengikatan data apa pun.
Unduh dan ekstrak proyek Sampel Cuaca ke folder sementara.
Navigasikan ke folder sebelumnya dan buka solusi WeatherClient.sln .
Buat dan jalankan proyek untuk memastikan proyek berfungsi. Pada layar yang ditampilkan, Anda akan melihat beberapa detail cuaca kosong. Tekan tombol Refresh dan Anda akan melihat pembaruan detail cuaca.
Sebagai referensi, berikut adalah ringkasan kelas dan file yang akan Anda kerjakan dalam latihan ini.
File Deskripsi MainPage.xaml Menentukan UI dan logika untuk halaman awal. File XAML mendefinisikan UI dengan menggunakan markup. MainPage.xaml.cs Menentukan UI dan logika untuk halaman awal. File code-behind terkait yang berisi kode yang terkait dengan UI yang ditentukan oleh MainPage.xaml. Services\WeatherService.cs Kelas ini mensimulasikan layanan pelaporan cuaca. Ini berisi satu metode bernama GetWeather
yang mengembalikanWeatherData
jenis.Model\WeatherData.cs Berisi data cuaca. Ini adalah jenis catatan sederhana yang menyediakan suhu, curah hujan, kelembaban, angin, dan kondisi hari itu. Model\WeatherType.cs Enumerasi kondisi cuaca, cerah atau berawan.
Mengatur konteks pengikatan
Anda harus mengedit kode di belakang untuk penangan aktivitas klik tombol Refresh . Kode saat ini mendapatkan data cuaca dan memperbarui kontrol secara langsung. Sebagai gantinya, dapatkan data cuaca dan atur sebagai konteks pengikatan untuk halaman.
Buka file kode MainPage.xaml.cs.
Tinjau metode .
btnRefresh_Clicked
Metode ini melakukan langkah-langkah berikut:- Menonaktifkan tombol dan mengaktifkan spinner "sibuk".
- Mendapatkan prakiraan cuaca dari layanan cuaca.
- Memperbarui kontrol pada halaman dengan informasi cuaca.
- Mengaktifkan tombol dan menonaktifkan spinner "sibuk".
Hapus kode yang memperbarui kontrol dengan data. Kode peristiwa Anda akan terlihat seperti cuplikan berikut:
private async void btnRefresh_Clicked(object sender, EventArgs e) { btnRefresh.IsEnabled = false; actIsBusy.IsRunning = true; Models.WeatherData weatherData = await Services.WeatherServer.GetWeather(txtPostalCode.Text); btnRefresh.IsEnabled = true; actIsBusy.IsRunning = false; }
Alih-alih menetapkan hasil metode layanan
GetWeather
ke variabel, tetapkan keBindingContext
halaman:private async void btnRefresh_Clicked(object sender, EventArgs e) { btnRefresh.IsEnabled = false; actIsBusy.IsRunning = true; BindingContext = await Services.WeatherServer.GetWeather(txtPostalCode.Text); btnRefresh.IsEnabled = true; actIsBusy.IsRunning = false; }
Jalankan proyek. Perhatikan bahwa ketika Anda menekan tombol Refresh dan layanan cuaca mengembalikan data, tidak ada kontrol yang diperbarui dengan prakiraan cuaca. Anda akan memperbaiki bug ini di bagian berikutnya.
Membuat pengikatan di XAML
Sekarang setelah code-behind mengatur konteks pengikatan untuk halaman, Anda dapat menambahkan pengikatan ke kontrol untuk menggunakan data pada konteks.
Buka file MainPage.xaml.
Temukan bagian dalam
Grid
yang berisi semuaLabel
kontrol.<Grid Grid.Row="2" RowDefinitions="Auto, Auto, Auto, Auto, Auto" ColumnDefinitions="Auto, Auto" Margin="0,5,0,0"> <Label Grid.Row="0" Grid.Column="0" Text="Condition" VerticalOptions="Center" /> <Image x:Name="imgCondition" Grid.Row="0" Grid.Column="1" HeightRequest="25" WidthRequest="25" Source="question.png" HorizontalOptions="Start" /> <Label Grid.Row="1" Grid.Column="0" Text="Temperature" Margin="0,0,20,0" /> <Label x:Name="lblTemperature" Grid.Row="1" Grid.Column="1" Text="0" /> <Label Grid.Row="2" Grid.Column="0" Text="Humidity" Margin="0,0,20,0" /> <Label x:Name="lblHumidity" Grid.Row="2" Grid.Column="1" Text="0" /> <Label Grid.Row="3" Grid.Column="0" Text="Precipitation" Margin="0,0,20,0" /> <Label x:Name="lblPrecipitation" Grid.Row="3" Grid.Column="1" Text="0" /> <Label Grid.Row="4" Grid.Column="0" Text="Wind" Margin="0,0,20,0" /> <Label x:Name="lblWind" Grid.Row="4" Grid.Column="1" Text="0" /> </Grid>
Tambahkan pengikatan ke masing-masing kontrol bernama
Label
. Ada empat.Properti
Label.Text
harus mengubah nilainya ke{Binding PROPERTY_NAME}
sintaks di manaPROPERTY_NAME
adalah properti dari jenis yangModels.WeatherData
ditentukan dalam Model\WeatherData.cs. Ingat, jenis ini adalah jenis data yang dikembalikan oleh layanan cuaca.Misalnya, bernama
Label
lblWind
(label terakhir dalam kisi) harus memilikiText
properti terlihat seperti kode berikut:<Label x:Name="lblWind" Grid.Row="4" Grid.Column="1" Text="{Binding Wind}" />
<Grid>
Dalam kontrol yang mencantumkan semua detail cuaca, hapus semuax:Name="..."
atribut.Nama tidak diperlukan sekarang karena kontrol tidak dirujuk di code-behind.
Verifikasi bahwa pengikatan XAML Anda cocok dengan cuplikan berikut:
<Grid Grid.Row="2" RowDefinitions="Auto, Auto, Auto, Auto, Auto" ColumnDefinitions="Auto, Auto" Margin="0,5,0,0"> <Label Grid.Row="0" Grid.Column="0" Text="Condition" VerticalOptions="Center" /> <Image Grid.Row="0" Grid.Column="1" HeightRequest="25" WidthRequest="25" Source="question.png" HorizontalOptions="Start" /> <Label Grid.Row="1" Grid.Column="0" Text="Temperature" Margin="0,0,20,0" /> <Label Grid.Row="1" Grid.Column="1" Text="{Binding Temperature}" /> <Label Grid.Row="2" Grid.Column="0" Text="Humidity" Margin="0,0,20,0" /> <Label Grid.Row="2" Grid.Column="1" Text="{Binding Humidity}" /> <Label Grid.Row="3" Grid.Column="0" Text="Precipitation" Margin="0,0,20,0" /> <Label Grid.Row="3" Grid.Column="1" Text="{Binding Precipitation}" /> <Label Grid.Row="4" Grid.Column="0" Text="Wind" Margin="0,0,20,0" /> <Label Grid.Row="4" Grid.Column="1" Text="{Binding Wind}" /> </Grid>
Jalankan aplikasi dan tekan tombol Refresh . Aplikasi ini berfungsi hampir seperti aslinya.
Perhatikan bahwa ikon yang mewakili Kondisi tidak diperbarui dari tanda tanya ke ikon matahari atau cloud. Mengapa ikon tidak berubah? Karena ikon adalah sumber daya gambar yang dipilih dalam kode berdasarkan WeatherData.Condition
nilai enumerasi. Nilai enumerasi tidak dapat diubah ke sumber daya gambar tanpa beberapa upaya tambahan Ini diperbaiki dalam latihan berikutnya setelah Anda mempelajari lebih lanjut tentang pengikatan.