Panduan: Mengikat ke data di XAML Designer

Di XAML Designer, Anda dapat mengatur properti pengikatan data dengan menggunakan artboard dan jendela Properti. Contoh dalam panduan ini menunjukkan cara mengikat data ke kontrol. Secara khusus, panduan menunjukkan cara membuat kelas ke cart belanja sederhana yang memiliki DependencyProperty bernama ItemCount, lalu mengikat properti ItemCount ke properti Teks dari kontrol TextBlock.

Untuk membuat kelas yang akan digunakan sebagai sumber data

1. Pada menu File, pilih Proyek>Baru.

2. Dalam kotak dialog Project Baru, pilih simpul Visual C# atau Visual Basic, perluas simpul Windows Desktop, lalu pilih templat Aplikasi WPF.

3. Beri nama proyek BindingTest, lalu pilih tombol OK.

4. Buka file MainWindow.xaml.cs (atau MainWindow.xaml.vb) dan tambahkan kode berikut. Di C#, tambahkan kode di namespace BindingTest (sebelum kurung tutup akhir dalam file). Di Visual Basic, cukup tambahkan kelas baru.

   C#

   public class ShoppingCart : DependencyObject
   {
       public int ItemCount
       {
           get { return (int)GetValue(ItemCountProperty); }
           set { SetValue(ItemCountProperty, value); }
       }
   
       public static readonly DependencyProperty ItemCountProperty =
            DependencyProperty.Register("ItemCount", typeof(int),
            typeof(ShoppingCart), new PropertyMetadata(0));
   }
   

   VB

   Public Class ShoppingCart
       Inherits DependencyObject
   
       Public Shared ReadOnly ItemCountProperty As DependencyProperty = DependencyProperty.Register(
            "ItemCount", GetType(Integer), GetType(ShoppingCart), New PropertyMetadata(0))
       Public Property ItemCount As Integer
           Get
               ItemCount = CType(GetValue(ItemCountProperty), Integer)
           End Get
           Set(value As Integer)
               SetValue(ItemCountProperty, value)
           End Set
       End Property
   End Class
   

   Kode ini menetapkan nilai 0 sebagai jumlah item default dengan menggunakan objek PropertyMetadata.

5. Pada menu File, pilih Build>Solusi Build.

Untuk mengikat properti ItemCount ke kontrol TextBlock

1. Di Penjelajah Solusi, buka menu pintasan untuk MainWindow.xaml dan pilih View Designer.

2. Di Kotak Alat, pilih kontrol Kisi dan tambahkan ke formulir.

3. Dengan yang Grid dipilih, di jendela Properti, pilih tombol Baru di samping properti DataContext.

4. Dalam kotak dialog Pilih Objek, pastikan bahwa kotak centang Perlihatkan semua rakitan dikosongkan, pilih ShoppingCart di bawah ruang nama BindingTest, lalu pilih tombol OK.

   Ilustrasi berikut ini memperlihatkan kotak dialog Pilih Objek dengan ShoppingCart dipilih.

   

5. Di Kotak Alat, pilih TextBlock kontrol untuk menambahkannya ke formulir.

6. Dengan kontrol TextBlock dipilih, di jendela Properti, pilih penanda properti di sebelah kanan properti Teks, lalu pilih Buat Pengikatan Data. (Penanda properti terlihat seperti kotak kecil.)

7. Dalam kotak dialog Buat Pengikatan Data, dalam kotak Jalur, pilih properti ItemCount : (int32) lalu pilih tombol OK.

   Ilustrasi berikut ini memperlihatkan kotak dialog Buat Pengikatan Data dengan properti ItemCount dipilih.

   

8. Tekan F5 untuk menjalankan aplikasi.

   Kontrol TextBlock harus menampilkan nilai default 0 sebagai teks.

Tip

Untuk mendapatkan informasi selengkapnya tentang pengikatan data, lihat Mengikat kontrol ke data di Visual Studio.

Konten terkait

• Membuat antarmuka pengguna menggunakan XAML Designer
• Kotak dialog Tambahkan Pengonversi Nilai