Latihan - Ganti kode dengan pengikatan .NET MAUI

10 menit

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 mengembalikan `WeatherData` 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 ke BindingContext 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 semua Label 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 mana PROPERTY_NAME adalah properti dari jenis yang Models.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 memiliki Text 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 semua x: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.

Lanjutkan

Latihan - Ganti kode dengan pengikatan .NET MAUI

Unduh dan jalankan sampel

Mengatur konteks pengikatan

Membuat pengikatan di XAML

Saran dan Komentar