Membuat antarmuka pengguna interaktif
Dalam pelajaran sebelumnya, Anda membuat UI formulir sederhana, meminta pengguna untuk memasukkan nama dan, dengan tombol, menampilkan salam. Dalam pelajaran ini, Anda membuat formulir sedikit lebih mudah digunakan dengan menonaktifkan atau menyembunyikan tombol Kirim hingga setidaknya tiga karakter telah dimasukkan.
Pertama, mari kita periksa dengan tepat kapan MainPageLogic.UserName nilai diatur melalui pengikatan.
1. Tempatkan titik henti
Buka MainPageLogic.cs file dan temukan baris yang berisi UserName properti .
public string UserName { get; set; }
Atur titik henti pada setter dengan memindahkan tanda sisipan di set dalam teks dan menekan F9. Ini juga dapat dicapai dengan mengklik set kanan dan memilih Titik Henti / Sisipkan Titik Henti.
2. Jalankan aplikasi dalam mode debug
Selanjutnya, jalankan aplikasi dalam mode debug (F5 atau Debug / Mulai Debugging). Ketik sesuatu di TextBox dan perhatikan bahwa titik henti tidak tertembak. Jika Anda menekan tombol Tab , tombol akan memindahkan fokus input ke kontrol berikutnya (dalam kasus kami, tombol ). Kehilangan fokus pada TextBox pembaruan pengikatan, sehingga titik henti terpukul.
3. Ubah pengikatan sehingga diperbarui pada setiap penekanan tombol
Hentikan penelusuran kesalahan dengan menekan Shift+F5 atau pilih Debug/ Hentikan Penelusuran Kesalahan.
Untuk memberikan umpan balik yang akurat tentang kapan tombol Kirim diaktifkan, kita tidak dapat menunggu sampai fokus hilang pada TextBox. Untungnya, ada cara untuk mengubah perilaku pengikatan. Anda dapat memaksanya untuk memperbarui UserName properti (yang merupakan sumbernya, karena kita berbicara tentang TwoWay pengikatan) setiap kali properti teks berubah. Kita perlu mengubah UpdateSourceTrigger pengikatan, yang diatur ke LostFocus secara default. UpdateSourceTrigger menentukan keadaan yang menyebabkan sumber diperbarui.
Buka MainPage.xaml, dan temukan TextBox. Kemudian, ubah pengikatan dengan menambahkan UpdateSourceTrigger=PropertyChanged. Seluruh TextBox tag sekarang akan terlihat seperti ini:
<TextBox Name="tbUserName"
Margin="10"
Width="150"
VerticalAlignment="Center"
Text="{x:Bind Logic.UserName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
Jika Anda men-debug aplikasi sekarang, Anda dapat melihat bahwa titik henti terpukul dengan setiap penekanan tombol dan perubahan teks. Bagus!
Anda mungkin ingat bahwa ketika kami menggunakan pengikatan UI-ke-UI untuk menampilkan salam, setiap penekanan tombol dilepaskan dari pengikatan. Dalam hal ini, pengikatan didefinisikan pada TextBlock, dan oleh karena itu sumbernya adalah TextBox.Text properti , yang berubah dengan setiap penekanan tombol. UpdateSourceTrigger mempengaruhi aliran data ke arah lain. Ini mengalir dari sumber pengikatan ke kontrol tempat pengikatan ditentukan (target pengikatan).
5. Tambahkan IsSubmitAllowed properti
Selanjutnya, Anda menambahkan properti Boolean yang menunjukkan apakah mengirimkan formulir diizinkan. Buka MainPageLogic.cs, dan tambahkan properti baru ke MainPageLogic kelas .
public bool IsSubmitAllowed => UserName?.Trim().Length > 2;
Ini adalah validasi yang sangat sederhana: jika teks yang dimasukkan, dipangkas dari karakter spasi putih terkemuka dan berikutnya, berisi lebih dari dua karakter, kami menerimanya sebagai nama pengguna.
6. Mengevaluasi IsSubmitAllowed ulang setelah setiap perubahan UserName
Kita harus memberi tahu kerangka kerja UI kapan harus mengevaluasi ulang properti ini dan mencerminkannya pada UI. Cara terbaik untuk memicu reevaluasi ini adalah dengan memanggil RaisePropertyChanged di setter UserName properti. Agar dapat menambahkan kode ke setter, kode perlu dikonversi ke properti lengkap. UserName Ganti properti dengan kode berikut:
private string _userName;
public string UserName
{
get { return _userName; }
set
{
_userName = value;
RaisePropertyChanged(nameof(IsSubmitAllowed));
}
}
Kami tidak menggunakan INotifyPropertyChanged untuk properti ini karena kami belum memiliki situasi di mana UserName properti diubah dari kode. Namun, setiap kali teks berubah dalam TextBox, kita harus memberi tahu UI bahwa IsSubmitAllowed properti mungkin telah berubah dan harus dievaluasi ulang.
7. Ikat IsSubmitAllowed properti ke properti tombol IsEnabled
Sekarang Anda sudah selesai dengan kode. Kembali ke MainPage.xaml dan temukan tombol Kirim . IsEnabled Tambahkan atribut sehingga XAML tombol sekarang terlihat seperti ini:
<Button Margin="10"
VerticalAlignment="Center"
Click="{x:Bind Logic.Submit}"
IsEnabled="{x:Bind Logic.IsSubmitAllowed, Mode=OneWay}">Submit</Button>
8. Jalankan aplikasi
Jika Anda menjalankan aplikasi sekarang, Anda akan melihat bahwa tombol Kirim dinonaktifkan secara default. Ini tetap dinonaktifkan jika Anda mengetik beberapa spasi, dan hanya diaktifkan ketika setidaknya ada tiga karakter spasi non-putih yang dimasukkan.
Meskipun contoh ini melakukan beberapa validasi, UWP memiliki serangkaian fitur validasi yang kaya yang akan ditampilkan dalam modul selanjutnya.
9. Sembunyikan tombol Kirim
Anda atau desainer Anda mungkin memutuskan untuk melangkah lebih jauh, dan benar-benar menyembunyikan tombol Kirim hingga dapat ditekan. Ini adalah perubahan mudah untuk dilakukan, jadi mari kita lakukan sekarang. Cukup edit XAML, dan ubah IsEnabled ke Visibility.
Namun, jika Anda mengetik beberapa karakter, Anda akan melihat bahwa seluruh UI melompat. Ini karena sekitarnya StackPanel berpusat secara horizontal (HorizontalAlignment="Center"), dan lebarnya StackPanel lebih kecil ketika Button diciutkan. Untuk memperbaiki masalah ini, Anda dapat menempatkan Button dalam lebar Border100 unit , seperti ini.
<Border Width="100">
<Button Margin="10"
VerticalAlignment="Center"
Click="{x:Bind Logic.Submit}"
Visibility="{x:Bind Logic.IsSubmitAllowed, Mode=OneWay}">Submit</Button>
</Border>
Dengan ini, lebar StackPanel tidak berubah ketika di Button dalam muncul Border kembali.
Ringkasan
Dalam pelajaran ini, Anda telah melihat bagaimana pengikatan dapat di-debug. Anda telah mempelajari tentang UpdateSourceTrigger opsi pengikatan, dan telah melihat contoh pengikatan data lebih lanjut. Anda juga telah melihat contoh bagaimana tampilan dan perilaku UI dapat diubah tanpa menyentuh kode C#, jika Anda menggunakan pengikatan data dengan benar.
Dalam pelajaran berikutnya, kami memeriksa bagaimana Anda dapat menggunakan pengikatan data untuk menampilkan beberapa item dalam daftar.
Dalam pelajaran sebelumnya, Anda membuat UI formulir sederhana, meminta pengguna untuk memasukkan nama dan, dengan tombol, menampilkan salam. Dalam pelajaran ini, Anda membuat formulir sedikit lebih mudah digunakan dengan menonaktifkan atau menyembunyikan tombol Kirim hingga setidaknya tiga karakter telah dimasukkan.
Pertama, mari kita periksa dengan tepat kapan MainWindowDataContext.UserName nilai diatur melalui pengikatan.
1. Tempatkan titik henti
MainWindowDataContext.cs Buka file dan temukan baris yang berisi UserName properti .
public string UserName { get; set; }
Atur titik henti pada setter dengan memindahkan tanda sisipan di dalam set teks, dan menekan F9. Ini juga dapat dicapai dengan mengklik setkanan , dan memilih Titik Henti / Sisipkan Titik Henti.
2. Jalankan aplikasi dalam mode debug
Selanjutnya, jalankan aplikasi dalam mode debug (F5 atau Debug / Mulai Debugging). Ketik sesuatu di TextBox dan perhatikan bahwa titik henti tidak tertabrak. Jika Anda menekan tombol Tab, tombol akan memindahkan fokus input ke kontrol berikutnya (dalam kasus kami, tombol ). Kehilangan fokus pada TextBox pembaruan pengikatan, sehingga titik henti terpukul.
3. Ubah pengikatan sehingga diperbarui pada setiap penekanan tombol
Hentikan penelusuran kesalahan dengan menekan Shift+F5 atau pilih Debug/ Hentikan Penelusuran Kesalahan.
Untuk memberikan umpan balik yang akurat tentang kapan tombol Kirim diaktifkan, kita tidak dapat menunggu sampai fokus hilang pada TextBox. Untungnya, ada cara untuk mengubah perilaku pengikatan. Anda dapat memaksanya untuk memperbarui UserName properti (yang merupakan sumbernya, karena kita berbicara tentang TwoWay pengikatan) setiap kali properti teks berubah. Kita perlu mengubah UpdateSourceTrigger pengikatan, yang diatur ke LostFocus secara default. UpdateSourceTrigger menentukan keadaan yang menyebabkan sumber diperbarui.
Buka MainWindow.xaml, dan temukan TextBox. Kemudian, ubah pengikatan dengan menambahkan UpdateSourceTrigger=PropertyChanged. Seluruh TextBox tag sekarang akan terlihat seperti ini:
<TextBox Name="tbName"
Margin="10"
Width="150"
VerticalAlignment="Center"
Text="{Binding UserName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
Jika Anda men-debug aplikasi sekarang, Anda dapat melihat bahwa titik henti terpukul dengan setiap penekanan tombol dan perubahan teks. Bagus!
Anda mungkin ingat bahwa ketika kami menggunakan pengikatan UI-ke-UI untuk menampilkan salam, setiap penekanan tombol memicu pengikatan. Dalam hal ini, pengikatan didefinisikan pada TextBlock, dan oleh karena itu sumbernya adalah TextBox.Text properti , yang berubah dengan setiap penekanan tombol. UpdateSourceTrigger mempengaruhi aliran data ke arah lain. Ini mengalir dari sumber pengikatan ke kontrol tempat pengikatan ditentukan (target pengikatan).
5. Tambahkan IsSubmitAllowed properti
Selanjutnya, Anda menambahkan properti Boolean yang menunjukkan apakah mengirimkan formulir diizinkan. Buka MainWindowDataContext.cs dan tambahkan properti baru ke MainWindowDataContext kelas .
public bool IsSubmitAllowed => !string.IsNullOrWhiteSpace(UserName);
Properti ini melakukan validasi sederhana. Jika teks yang dimasukkan bukan karakter null, kosong, atau hanya spasi kosong, kami menerimanya sebagai nama pengguna.
6. Mengevaluasi IsSubmitAllowed ulang setelah setiap perubahan UserName
Kita harus menyarankan kerangka kerja UI kapan harus mengevaluasi ulang properti ini dan mencerminkannya pada UI. Cara terbaik untuk memicu reevaluasi ini adalah dengan memanggil RaisePropertyChanged di setter UserName properti. Agar dapat menambahkan kode ke setter, kode perlu dikonversi ke properti lengkap. UserName Ganti properti dengan kode berikut:
private string? _userName;
public string? UserName
{
get { return _userName; }
set
{
_userName = value;
RaisePropertyChanged(nameof(IsSubmitAllowed));
}
}
Kami tidak menggunakan INotifyPropertyChanged untuk properti ini karena kami tidak memiliki situasi di mana UserName properti diubah dari kode. Namun, setiap kali teks berubah dalam TextBox, kita harus memberi tahu UI bahwa IsSubmitAllowed properti mungkin telah berubah dan harus dievaluasi ulang.
7. Ikat IsSubmitAllowed properti ke properti tombol IsEnabled
Sekarang Anda sudah selesai dengan kode. Kembali ke MainWindow.xaml dan temukan tombol Kirim . IsEnabled Tambahkan atribut sehingga XAML tombol sekarang terlihat seperti ini:
<Button Margin="10"
VerticalAlignment="Center"
Click="OnSubmitClicked"
IsEnabled="{Binding IsSubmitAllowed}">Submit</Button>
8. Jalankan aplikasi
Jika Anda menjalankan aplikasi sekarang, Anda akan melihat bahwa tombol Kirim dinonaktifkan secara default. Ini akan diaktifkan segera setelah Anda mengetik sesuatu di dalamnya.
Meskipun contoh ini melakukan beberapa validasi dasar, WPF memiliki serangkaian fitur validasi yang kaya yang akan ditunjukkan dalam modul berikutnya.
Ringkasan
Dalam pelajaran ini, Anda telah melihat bagaimana pengikatan dapat di-debug. Anda telah mempelajari tentang UpdateSourceTrigger opsi pengikatan, dan telah melihat contoh pengikatan data lebih lanjut. Anda juga telah melihat contoh bagaimana, jika Anda menggunakan pengikatan data dengan benar, tampilan dan perilaku UI dapat diubah tanpa menyentuh kode C#.
Dalam pelajaran berikutnya, kami memeriksa bagaimana Anda dapat menggunakan pengikatan data untuk menampilkan beberapa item dalam daftar.