Modelul Model-View-ViewModel (MVVM) ajută dezvoltatorii să separe o logică de afaceri și o prezentare a aplicației de la interfața sa de utilizator. Menținerea unei separări clare între logica aplicației și interfața cu utilizatorul ajută la abordarea problemelor de dezvoltare și proiectare, făcând o aplicație mai ușor de testat, menținută și dezvoltată. De asemenea, poate îmbunătăți reutilizarea codului și permite mai multor dezvoltatori să colaboreze mai ușor atunci când lucrează la același proiect.
1. Introducere
Folosind modelul MVVM, interfața utilizator a aplicației și prezentarea subiacentă și logica de afaceri sunt separate în trei componente:
vedere componentă încapsulează interfața utilizator și logica interfeței utilizator.
model de vizualizare componenta încapsulează logica de prezentare și starea.
model strat încapsulă logica de afaceri a aplicației și datele.
Există mai multe cadre disponibile pentru implementarea modelului MVVM într-o aplicație Windows. Ce cadru este cel mai potrivit pentru proiectul dvs. depinde de cerințele dumneavoastră. Pentru acest tutorial, vom folosi MVVM Light, un cadru MVVM popular și ușor de folosit.
Acest tutorial vă arată cum să creați o aplicație Windows universală cu suport pentru MVVM Light. Veți învăța cum să:
creați o aplicație Windows universală și adăugați suport pentru MVVM Light
să implementeze structura directoarelor
adăugați stratul modelului de vizualizare
sârmă contextul de date
implementați serviciul de mesagerie pentru a transmite mesaje între modelele de vizualizare
2. Configurarea proiectului
Pasul 1: Creați o aplicație Windows universală
Să începem prin crearea unei aplicații Windows universale. Selectați Proiect nou de la Fişier în Visual Studio. Extinde Template-uri > Visual C # > ferestre > Windows 8 > universal și selectați Aplicația Blank (Windows Universal 8.1) din lista de șabloane de proiect. Denumiți proiectul și dați clic pe O.K pentru a crea proiectul.
Aceasta creează două aplicații noi (Windows Phone 8.1 și Windows 8.1) și un proiect comun. Proiectele Windows Phone 8.1 și Windows 8.1 sunt proiecte specifice platformelor și sunt responsabile pentru crearea pachetelor de aplicații (.appx) care vizează platformele respective. Proiectul comun este un container pentru cod care rulează pe ambele platforme.
Pasul 2: Adăugați Suport pentru lumină MVVM
Faceți clic dreapta pe numele soluției din Soluție Explorer și selectați Gestionați pachetele Nuget pentru soluție.
Selectează Naviga și căutați MVVM Light. Selectați pachetul MvvmLightLibs din rezultatele căutării. Verificați atât proiectele Windows 8.1, cât și Windows Phone 8.1 și faceți clic pe Instalare pentru a adăuga bibliotecile MVVM Light la aplicații.
În acest moment, ați adăugat suportul MVVM Light pentru ambele aplicații.
3. Structura fișierului proiectului
O aplicație Windows universală care adoptă modelul MVVM necesită o anumită structură de directoare. Următorul instantaneu arată o posibilă structură de fișier proiect pentru o aplicație Windows universală.
Permiteți-mi să vă trec prin structura proiectului unei aplicații tipice Univesal Windows care adoptă modelul MVVM:
Controale: Acest director conține controale de interfață utilizator reutilizabile (vizualizări independente de aplicație). Controlul specific platformei se adaugă direct la proiectul specific platformei.
Siruri de caractere: Acest director conține șiruri de caractere și resurse pentru localizarea aplicațiilor. Siruri de caractere director conține directoare separate pentru fiecare limbă acceptată. en-US directorul, de exemplu, conține resurse pentru limba engleză (SUA).
modele: În modelul MVVM, modelul încapsulează logica și datele de afaceri. În general, modelul implementează facilitățile care ușurează legarea proprietăților în stratul de vizualizare. Acest lucru înseamnă că acceptă notificările "proprietate modificată" și "colectare modificată" prin INotifyPropertyChanged și INotifyCollectionChanged interfețe.
ViewModels: Modelul de vizualizare din modelul MVVM încapsulează logica de prezentare și datele pentru vizualizare. Nu are nicio referire directă la viziunea sau la orice cunoaștere despre implementarea sau tipul de viziune.
convertoare: Acest director conține convertoarele de valori. Un convertor de valori este o modalitate convenabilă de a converti datele de la un tip la altul. Acesta implementează IValueConverter interfață.
tematică: a tematică director conține resurse tematice care sunt de tip ResourceDictionary. Resurse specifice platformei sunt adăugate direct la proiectul specific și resursele partajate sunt adăugate la proiectul partajat.
Servicii: Această secțiune poate include clase pentru apeluri de servicii web, servicii de navigare etc..
utils include funcții utilitare care pot fi utilizate în întreaga aplicație. Exemplele includ AppCache, fileutils, constante, NetworkAvailability, localizare geografică a, etc.
Vizualizări: Acest director conține layouts de interfață utilizator. Vizualizările specifice platformei sunt adăugate direct la proiectul specific platformei și sunt adăugate viziuni comune la proiectul partajat.
În funcție de tipul de vizualizare, numele trebuie să se încheie cu:
Fereastră, o fereastră non-modală
dialog, o fereastră de dialog (modal)
Pagină, o vizualizare de pagină (cea mai mare parte folosită în aplicațiile Windows Phone și Windows Store)
Vedere, o vizualizare care este utilizată ca subdiviziune într-o altă vizualizare, pagină, fereastră sau dialog
Numele unui model de vizualizare este compus din numele vizualizării corespunzătoare și din cuvântul "Model". Modelele de vizualizare sunt stocate în aceeași locație în ViewModels director ca puncte de vedere corespunzătoare în Vizualizări director.
4. Adăugarea Layerului de vizualizare a modelului
Stratul modelului de vizualizare pune în aplicare proprietățile și comenzile la care vizualizarea poate lega date și notifică vizualizarea oricăror modificări de stare prin evenimente de notificare a schimbării. Proprietățile și comenzile pe care le oferă modelul de vizualizare definesc funcționalitatea oferită de interfața cu utilizatorul. Următoarea listă rezumă caracteristicile, sarcinile și responsabilitățile stratului modelului de vizualizare:
Coordonează interacțiunea vizuală cu orice clasă de model.
Modelul de vizualizare și clasele de model au, în general, o relație una-la-multe.
Poate converti sau manipula datele modelului astfel încât să poată fi ușor consumată de vizualizare.
Poate defini proprietăți suplimentare pentru a suporta în mod specific vizualizarea.
Definește stările logice pe care vizualizarea le poate utiliza pentru a oferi schimbări vizuale la interfața cu utilizatorul.
Definește comenzile și acțiunile pe care utilizatorul le poate declanșa.
În etapele următoare, adăugăm două fișiere în stratul modelului de vizualizare, ViewModelLocator.cs și MainViewModel.cs.
Pasul 1: Adăugați MainViewModel Clasă
Mai întâi, faceți clic dreapta pe proiectul partajat și selectați Adăuga, Dosar nou. Denumiți dosarul ViewModels. Apoi, faceți clic dreapta pe ViewModels și selectați Adăuga, Articol nou pentru a adăuga MainViewModel clasă.
Modificați MainViewModel clasa să arate astfel:
clasa publică MainViewModel: ViewModelBase string privat _helloWorld; șirul public HelloWorld get return _helloWorld; set Set (() => HelloWorld, ref _helloWorld, valoare); public MainViewModel () HelloWorld = IsInDesignMode? "Rulează în modul de proiectare": "Rulează în modul runtime";
Clasa conține o proprietate publică Salut Lume de tip şir. Puteți adăuga metode suplimentare, proprietăți observabile și comenzi pentru modelul de vizualizare.
Pasul 2: Adăugați ViewModelLocator Clasă
Vom adăuga o proprietate publică pentru toate modelele de vizualizare din ViewModelLocator de clasă și de a crea o nouă resursă, pe care o vom folosi în designer.
Faceți clic dreapta pe ViewModels și selectați Adăuga, Articol nou. Selectați o clasă și denumiți-o ViewModelLocator.cs. Actualizați ViewModelLocator clasa, după cum se arată mai jos.
clasa publică ViewModelLocator public MainViewModel Main get retur ServiceLocator.Current.GetInstance(); ViewModelLocator static () ServiceLocator.SetLocatorProvider (() => SimpleIoc.Default); SimpleIoc.Default.Register();
ViewModelLocator clasa conține o proprietate publică Principal ale cărui primiți returnează o instanță a MainViewModel clasă. Constructorul ViewModelLocator înregistrează MainViewModel exemplu la SimpleIoc serviciu.
În continuare, deschideți-vă App.xaml fișier și adăugați o nouă resursă cu ViewModelLocator pentru a fi utilizat în proiectant.
5. Cablarea în sus a contextului de date
Vizualizarea și modelul de vizualizare pot fi construite și asociate în timpul rulării în mai multe moduri. Cea mai simplă abordare este pentru vizualizarea instanței modelului de vizualizare corespunzător în XAML. De asemenea, puteți specifica în XAML că modelul de vizualizare este setat ca context de date al vizualizării.
Cand MainPage.xaml pagina este inițializată, o instanță a MainViewModel este construit și setat automat ca context de date al vizualizării. Rețineți că modelul de vizualizare trebuie să aibă un constructor implicit fără parametru pentru ca această abordare să funcționeze.
O altă abordare este să creați instanța modelului de vizualizare programat în constructorul vizualizării și să o setați ca context de date.
public MainPage () InitializeComponent (); this.DataContext = new MainViewModel ();
O altă abordare este de a crea o instanță a modelului de vizualizare și de ao asocia cu viziunea sa folosind un locator de vizualizare a modelului. În exemplul de aplicație, folosim ViewModelLocator pentru a rezolva modelul de vizualizare pentru MainPage.xaml.
Acum că contextul de date al vizualizării a fost setat la MainViewModel class, putem accesa proprietățile sale în vizualizare. Puteți lega textul unui text TextBlock la Salut Lume proprietate definită în modelul de vizualizare.
6. Serviciul de mesagerie
Serviciul de mesagerie în MVVM Light permite comunicarea între modelele de vizualizare sau între modelele de vizualizare și vizualizări. Să presupunem că aveți un model de vizualizare care este folosit pentru a oferi logică de afaceri unei funcții de căutare și două modele de vizualizare pe pagina dvs. care doresc să proceseze căutarea pentru a afișa rezultatul. Mesagerul ar fi modalitatea ideală de a face acest lucru într-un mod relaxat.
Modelul de vizualizare care primește datele de căutare ar trimite pur și simplu un mesaj "de căutare" care ar fi consumat de orice model de vizualizare care a fost în prezent înregistrat pentru a consuma mesajul. Beneficiile utilizării unui serviciu de mesager sunt:
comunicarea ușoară între modelele de vizualizare, fără ca fiecare model de vizualizare să aibă cunoștințe despre ele
mai mulți consumatori de mesaje pot fi adăugați cu puțin efort
În exemplul de cerere, vom trimite un mesaj de la MainViewModel, care vor fi primite de către MainPage.xaml. Aceștia sunt pașii necesari pentru utilizarea serviciului de mesagerie.
Pasul 1: Creați o clasă pentru a conține mesajul care trebuie trimis
Creați o nouă clasă în proiect și denumiți-o ShowMessageDialog.
clasa publică ShowMessageDialog public string Mesaj get; a stabilit;
Pasul 2: Clasa mesajelor în instanță și mesajul de difuzare
În MainViewModel.cs, creați un exemplu de ShowMessageDialog și utilizați Mesager obiect pentru difuzarea mesajului.
obiect privat ShowMessage () var msg = nou ShowMessageDialog Message = "Hello World"; Messenger.Default.Send(Msg); retur nul;
Aceasta transmite mesajul. Tot ce ne rămâne să facem este să înregistrăm un destinatar și să răspundem la mesaj.
Pasul 3: Înregistrați pentru mesaj și manipulați când ați primit
Deschis MainPage.xaml.cs și se înregistrează pentru mesajul din constructor.
ReceiveMessage este o metodă pe care trebuie să o implementați. Aceasta va dura Mesaj obiect și de a folosi DialogService pentru a afișa o casetă de dialog.
Pasul 4: Creați o comandă pentru a trimite un mesaj
Acum, că putem trimite și primi un mesaj, trebuie să sunăm ShowMessage metodă. MVVM Light oferă suport pentru RelayCommand, care pot fi folosite pentru a crea comenzi în modelul de vizualizare. Adăugați o proprietate publică ShowMessageCommand în MainViewModel clasa care invocă ShowMessage metodă.
RelayCommand privat _showMessageCommand; public RelayCommand ShowMessageCommand => _showMessageCommand ?? (_showMessageCommand = RelayCommand nou (ShowMessage));
Apoi, adăugați o Buton la MainPage.xaml și leagă ShowMessageCommand la ei Comanda proprietate.
Implementați aplicația pentru a vedea dacă totul funcționează conform așteptărilor. Iată un instantaneu al modului în care MainPage.xaml arată în Windows 8.1.
Când faceți clic pe Faceți clic pe Me , apare o casetă de dialog.
Messenger este o componentă puternică care poate facilita comunicarea, dar face și codul mai dificil de depanat, deoarece nu este întotdeauna clar la prima vedere ce obiecte primesc un mesaj.
Concluzie
Prin implementarea modelului MVVM, avem o separare clară între aspectul vizual, modelul de vizualizare și straturile modelului. De obicei, încercăm să dezvoltăm modelul de vizualizare astfel încât să nu știe nimic despre viziunea pe care o conduce. Acest lucru are avantaje multiple:
Echipa dezvoltatorului poate lucra independent de echipa de interfață cu utilizatorul.
Modelul de vizualizare poate fi testat cu ușurință, pur și simplu prin apelarea unor comenzi și metode și prin afirmarea valorii proprietăților.
Modificările pot fi făcute în vedere fără a fi nevoie să vă faceți griji cu privire la efectul pe care îl va avea asupra modelului de vizualizare și a modelului.
Simțiți-vă liber să descărcați fișierele sursă ale tutorialului pentru a le utiliza ca referință.
Share
Accentsconagua
