Penerapan MVVM di WPF Menggunakan .NET

Penerapan MVVM Pada Windows Presentation Foundation

MVVM adalah sebuah variasi dari MVC yang memisahkan view menjadi dua, yaitu view dan view model yang terhubung melalui data binding. Kali ini membahas MVVM yang contohnya berupa aplikasi yang memakai Windows Presentation Foundation (WPF) dengan referensi.

1. Buat Project Baru

Tentuin Project Name dan lokasi penyimpanan.

Pilih WPF Application dengan C#, Windows, dan Deskstop

2. Buat Model Baru

Dengan cara klik kanan, nama proyek -> Add -> Class. Lalu beri nama ItemPenjualan

Lalu tuliskan kodenya :

3. Mengubah kode yang ada di MainWindow.xaml

Disini membuat sebuah View. Lalu mengubah kode yang ada di MainWindow.xaml. 

Dengan hasil sebagai berikut :

4. Buat ViewModel

Dengan cara klik kanan, nama proyek -> Add -> Class. Lalu beri nama ItemPenjualanViewModel dengan :

5. Ubah Kode di MainWindow.xaml.cs

Untuk menghubungkan view, view model, dan model yang telah dibuat. Diubah dengan :

6. Ubah Kode di MainWindow.xaml

Hal ini untuk melakukan binding dan validation. Ubah dengan :

Jika ingin menambahkan style pada TextBox bisa tambahkan :

7. Download MySQL Connector/.NET Versi 6

8. Menambahkan Reference MySql.Data.Entity.EF6

9. Menambahkan Nuget Package Entity Framework 6

10. Ubah Kode Program App.config

11. Mengubah Kode Program pada ItemPenjualan.cs

Untuk menambahkan sebuah atribut di model agar nilai property Id dihasilkan secara otomatis oleh database

12. Membuat Class LatihanContext

13. Membuiat Class MyHistoryContext

14. Mengubah Kode Program dari Class ItemPenjualanViewModel

Untuk menambah class SimpanCommand dan propertynya pada ViewModel

15. Mengubah Kode Program pada MainWindow.xaml

Untuk melakukan binding pada button simpan

16. Menambahkan Kode pada LatihanContext.cs

17. Buat migration database dengan cara membuka package manager console

Ketikkan Enable-Migrations dan Add-Migration dengan package name initial

18. Migrate database dengan mengetikkan Update-Database dan database kita akan otomatis ter-update

19. Jalankan Program

20. Hasil:

Database