WPF .NET Framework : Penerapan MVVM di Windows Presentation Foundation

Kali ini saya akan mencoba untuk membuat aplikasi Item Penjualan sederhana menggunakan WPF dengan menerapkan arsitektur MVVM (Model View View Model). MVVM sendiri bisa dikatakan juga merupakan MVC (Model View Controller) yang memisahkan antara logic dengan GUI (Graphical User Interface). Untuk implementasinya sebagai berikut.

• Membuat Project WPF. 

Hal Pertama yang harus kita lakukan adalah membuat project WPF atau Windows Presentation Form dimana setelah kita melakukan create maka akan terdapat file MainWindow.xaml yang merupakan file untuk GUI aplikasi kita.

 

• Membuat Model

Sebagai model dibuatlah sebuah class baru dengan nama  ItemPenjualan. Untuk kode dari class ini sebagai berikut.

 

• Melakukan desain GUI (view)

Pada file MainWindow.xaml tersebut, kita lakukan desain GUI dari aplikasi yang kita buat. Untuk contoh bisa dilihat oleh source code berikut ini.

 Untuk hasilnya akan membentuk window yang kira-kira seperti gambar dibawah ini.

• Membuat ViewModel

Karena model dan view telah selesai dibuat, maka kita akan membuat sebuah view model yaitu dengan membuat class baru bernama ItemPenjualanViewModel. Untuk kode pada class ini sebagai berikut.

• Melakukan Data Binding

Untuk menghubungkan antara model, view, dan view model perlu didefinisikan sebuah DataContext. Untuk implementasinya adalah dengan membuat MainWindow.xaml.cs sebagai berikut.

 

Kemudian kita lakukan Data Binding dengan mengubah MainWindow.xaml menjadi sebagai berikut.

Hasil dari aplikasi yang telah kita buat hingga saat ini menjadi sebagai berikut.