Melakukan Binding Collection Di WPF

Pada artikel sebelumnya, Menerapkan MVVM Di Windows Presentation Foundation (WPF), saya sudah membuat sebuah form dengan memakai Windows Presentation Foundation (WPF) untuk menyimpan sebuah objek ItemPenjualan. Sekarang, saya ingin menambahkan sebuah DataGrid guna menampilkan seluruh objek ItemPenjualan yang sudah tersimpan di form yang sama. Dengan pola MVVM dan pembagian peran yang rapi, saya dapat melakukan perubahan ini dalam waktu singkat.

Langkah pertama adalah menambahkan sebuah property baru di view model untuk menampung daftar object ItemPenjualan yang telah tersimpan. Tipe data property tersebut harus berupa ObservableCollection<T> sehingga nantinya view dapat mengetahui bila ada elemen yang berubah (bertambah atau berkurang) di collection tersebut. Sebagai contoh, saya mengubah kode pogram ItemPenjualanViewModel.cs menjadi seperti berikut ini:

...
namespace LatihanMVVM
{
    public class ItemPenjualanViewModel : INotifyPropertyChanged
    {
        ...

        public ItemPenjualanViewModel(ItemPenjualan itemPenjualan = null)
        {
            ...

            // Mendapatkan seluruh ItemPenjualan dari database
            this.ListItemPenjualan = new ObservableCollection<ItemPenjualan>();
            using (var db = new LatihanContext())
            {                                
                foreach (ItemPenjualan p in db.DaftarItemPenjualan)
                {
                    this.ListItemPenjualan.Add(p);                    
                }
            }            
        }

        public ObservableCollection<ItemPenjualan> ListItemPenjualan { get; private set; }

        ...
    }
}

Pada kode program di atas, nilai dari property ListItemPenjualan akan di-isi berdasarkan hasil query dari tabel di database pada saat instance view model dibuat.

Berikutnya, saya perlu menambahkan sebuah DataGrid diview sehingga tampilan view menjadi seperti pada gambar berikut ini:

Rancangan view

DataGrid dapat menghasilkan kolom secara otomatis bila nilai property AutoGenerateColumns-nya bernilai true. Akan tetapi, saya lebih suka mendefinisikan setiap kolom yang ada secara manual. Oleh sebab itu, saya mengubah XAML yang dihasilkan untuk DataGrid di view menjadi seperti berikut ini:

<Window ...>

    <Window.Resources>
        <Style TargetType="{x:Type TextBlock}" x:Key="StyleAngka">            
            <Setter Property="HorizontalAlignment" Value="Right" />
        </Style>
        ...
    </Window.Resources>

    <Grid>        
        ...        
        <DataGrid AutoGenerateColumns="False" AlternatingRowBackGround="LightBlue" ... 
                  SelectionUnit="FullRow" FontSize="15" Language="id-IN" 
                  IsReadOnly="True" ItemsSource="{Binding Path=ListItemPenjualan}">        
            <DataGrid.Columns>
                <DataGridTextColumn Header="Nama Barang" Binding="{Binding NamaBarang}" Width="*"/>
                <DataGridTextColumn Header="Jumlah" Binding="{Binding Jumlah, StringFormat={}{0:#,0}}" 
                                    ElementStyle="{StaticResource StyleAngka}" />                                    
                <DataGridTextColumn Header="Harga" Binding="{Binding Harga, StringFormat={}{0:C}}" Width="*" 
                                    ElementStyle="{StaticResource StyleAngka}"/>
                <DataGridTextColumn Header="Diskon Persen" Binding="{Binding DiskonPersen, StringFormat={}{0:#.#}}" 
                                    ElementStyle="{StaticResource StyleAngka}"/>                
            </DataGrid.Columns>            
        </DataGrid>
        ...                
    </Grid>
</Window>

Sekarang, bila saya menjalankan program, data dari tabel akan ditampilkan pada DataGrid seperti yang terlihat pada gambar berikut ini:

Hasil program

Berikutnya, saya hanya perlu menambahkan sedikit perubahan kecil agar ItemPenjualan yang barusan disimpan juga ikut ditambahkan ke tabel. Pada file ItemPenjualanDataView.cs, saya mengubah method Execute() yang akan dikerjakan saat tombol simpan di-klik menjadi seperti berikut ini:

public void Execute(object parameter)
{
   using (var db = new LatihanContext())
   {  
      db.DaftarItemPenjualan.Add(viewModel.Model);

      // Menambahkan ItemPenjualan ke DataGrid
      viewModel.ListItemPenjualan.Add(viewModel.Model);

      db.SaveChanges();
   }
   MessageBox.Show("Data berhasil disimpan ke database");
}