Pengikatan Data di Klien Windows Presentation Foundation

Sampel WPFDataBinding menunjukkan penggunaan pengikatan data di klien Windows Presentation Foundation (WPF). Sampel menggunakan layanan Windows Communication Foundation (WCF) yang secara acak menghasilkan array album untuk dikembalikan ke klien. Setiap album memiliki nama, harga, dan daftar trek album. Lagu album mempunyai nama dan durasi. Informasi yang dikembalikan oleh layanan secara otomatis terikat ke antarmuka pengguna (UI) yang disediakan oleh klien Windows Presentation Foundation (WPF).

Nota

Prosedur penyiapan dan instruksi build untuk sampel ini terletak di akhir topik ini.

Pengikatan data memungkinkan sumber data untuk secara otomatis terikat ke UI. Ini menyederhanakan model pemrograman karena tidak mengharuskan Anda memperbarui setiap elemen UI secara terprogram dengan data dari objek data atau array objek data. Anda dapat mengikat objek ke satu elemen UI atau array ke kontrol yang mengambil beberapa input, seperti ListBox. Kode berikut menunjukkan cara mengikat data ke DataContext elemen UI.

// Event handler executed when call is complete
void client_GetAlbumListCompleted(object sender, GetAlbumListCompletedEventArgs e)
{
    // This is on the UI thread, myPanel can be accessed directly
    myPanel.DataContext = e.Result;
}

Dalam sampel sebelumnya, DataContext untuk elemen tata letak grid yang bernama myPanel diatur ke data yang dikembalikan oleh metode GetAlbumList. Elemen DataContext memungkinkan untuk mewarisi informasi dari elemen induk mereka tentang sumber data yang digunakan untuk pengikatan, serta karakteristik lain dari pengikatan seperti jalur. Baris kode harus dijalankan setiap kali data di server diperbarui. Misalnya, ini dijalankan ketika jendela diinisialisasi dan ketika album baru ditambahkan.

Dalam contoh kode XAML berikut, ListBox menentukan ItemsSource="{Binding }".

<ListBox
          ItemTemplate="{StaticResource AlbumStyle}"
          ItemsSource="{Binding }"
          IsSynchronizedWithCurrentItem="true" />

Ini menentukan bahwa data yang terikat ke elemen UI tingkat atas juga terikat ke kontrol ini (yaitu, array Album). Selain itu, ItemTemplate="{StaticResource AlbumStyle}" menentukan templat data yang akan digunakan untuk setiap item di ListBox. Anda juga dapat menentukan templat data untuk menentukan bagaimana data harus diformat. Templat data ini dapat digunakan kembali untuk elemen UI lain dalam aplikasi, keuntungannya adalah templat data ditentukan dan dikelola di satu tempat.

AlbumStyle Templat data mengatur tabel dengan dua elemen TextBlock yang berdampingan. Salah satu menentukan nama Album dan yang satunya lagi jumlah Lagu dalam album.

<DataTemplate x:Key="AlbumStyle">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="260" />
            <ColumnDefinition Width="60" />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" TextContent="{Binding Path=Title}" />
        <TextBlock Grid.Column="1" TextContent="{Binding Path=Tracks#.Count}" HorizontalAlignment="Right" />
    </Grid>
</DataTemplate>

Kode XAML berikut membuat ListBox kedua.

<ListBox Grid.Row="2"
            Grid.ColumnSpan="2"
            ItemTemplate="{StaticResource TrackStyle}"
            ItemsSource="{Binding Path=Tracks}" />

Kode menentukan jalur untuk ItemsSource. Ini menunjukkan bahwa data yang terikat ke kontrol ini bukan data tingkat atas tetapi properti data tingkat atas bernama Tracks. Properti ini mewakili array lagu yang terdapat dalam album. Selain itu, DataTemplate yang berbeda dengan nama TrackStyle ditentukan. Tata letak templat TrackStyle mirip dengan templat AlbumStyle, tetapi TextBlock-nya terikat ke properti yang berbeda. Ini karena dua templat digunakan dengan objek data yang berbeda.

Untuk menyiapkan, mengompilasi, dan menjalankan sampel

1. Pastikan Anda telah melakukan Prosedur Penyiapan One-Time untuk Sampel Windows Communication Foundation.

2. Untuk membangun solusi edisi C# atau Visual Basic .NET, ikuti instruksi di Membangun Sampel Windows Communication Foundation.

3. Untuk menjalankan sampel dalam konfigurasi satu atau lintas komputer, ikuti instruksi di Menjalankan Sampel Windows Communication Foundation.