Model-View-ViewModel (MVVM) -mønsteret hjelper utviklere til å skille en applikasjons forretnings- og presentasjonslogikk fra brukergrensesnittet. Opprettholde en klar adskillelse mellom applikasjonslogikk og brukergrensesnitt hjelper til med å møte utviklings- og designproblemer, noe som gjør et program lettere å teste, vedlikeholde og utvikle. Det kan også forbedre kodenes gjenbrukbarhet og det gjør det mulig for flere utviklere å samarbeide lettere når de jobber med det samme prosjektet.
1. Introduksjon
Ved hjelp av MVVM-mønsteret, er brukergrensesnittet til programmet og den underliggende presentasjonen og forretningslogikken delt inn i tre komponenter:
De utsikt komponenten inkapsulerer brukergrensesnittet og brukergrensesnittlogikken.
De se modell komponenten inkapsler presentasjonslogikk og tilstand.
De modell lag inkapsler applikasjonens forretningslogikk og data.
Det finnes flere rammer for implementering av MVVM-mønsteret i et Windows-program. Hvilket rammeverk er best for prosjektet ditt, avhenger av dine krav. For denne opplæringen bruker vi MVVM Light, et populært og brukervennlig MVVM-rammeverk.
Denne opplæringen viser hvordan du lager en Universal Windows-app med MVVM Light-støtte. Du vil lære hvordan:
opprett en Universal Windows-app og legg til støtte for MVVM Light
implementer katalogstrukturen
legg til visningsmodellaget
led datakonteksten
implementer meldtjenesten for å sende meldinger mellom visningsmodeller
2. Prosjektoppsett
Trinn 1: Lag en Universal Windows App
La oss begynne med å opprette en Universal Windows-app. Å velge Nytt prosjekt fra Fil menyen i Visual Studio. Utvide maler > Visual C # > Windows > Windows 8 > Universell og velg Blank App (Universal Windows 8.1) fra listen over prosjektmaler. Navngi prosjektet ditt og klikk OK å skape prosjektet.
Dette skaper to nye apper (Windows Phone 8.1 og Windows 8.1) og ett delt prosjekt. Windows Phone 8.1 og Windows 8.1-prosjekter er plattformspesifikke prosjekter og er ansvarlige for å lage applikasjonspakker (.appx) som målretter mot de respektive plattformene. Det delte prosjektet er en container for kode som kjører på begge plattformene.
Trinn 2: Legg til MVVM Light Support
Høyreklikk på løsningsnavnet i Solution Explorer og velg Administrer Nuget pakker for løsning.
Velg Søk fanen og søk etter MVVM Light. Velg pakken MvvmLightLibs fra søkeresultatene. Sjekk både Windows 8.1 og Windows Phone 8.1-prosjekter, og klikk Installere å legge til MVVM Light-bibliotekene i appene.
På dette tidspunktet har du lagt til MVVM Light-støtte til begge programmene.
3. Prosjektfilstruktur
En Universal Windows-app som vedtar MVVM-mønsteret krever en bestemt katalogstruktur. Følgende stillbilde viser en mulig prosjektfilstruktur for en Universal Windows-app.
La meg gå deg gjennom prosjektstrukturen til en typisk Univesal Windows-app som vedtar MVVM-mønsteret:
kontroller: Denne katalogen inneholder gjenbrukbare brukergrensesnittkontroller (applikasjonsavhengige visninger). Plattformspesifikke kontroller legges direkte til det plattformspesifikke prosjektet.
Strings: Denne katalogen inneholder strenge og ressurser for applikasjonslokalisering. De Strings katalogen inneholder separate kataloger for hvert støttet språk. De en-US katalogen inneholder for eksempel ressurser for det engelske (USA) språket.
modeller: I MVVM-mønsteret innlemmer modellen forretningslogikken og dataene. Generelt implementerer modellen fasilitetene som gjør det enkelt å binde egenskaper til visningslaget. Dette betyr at den støtter "eiendomsendret" og "samling endret" varsler gjennom INotifyPropertyChanged og INotifyCollectionChanged grensesnitt.
ViewModels: Visningsmodellen i MVVM-mønsteret inkapsler presentasjonslogikken og dataene for visningen. Den har ingen direkte referanse til visningen eller kunnskap om visnings implementering eller type.
omformere: Denne katalogen inneholder verdiomformere. En verdikonverter er en praktisk måte å konvertere data fra en type til en annen. Det implementerer IValueConverter grensesnitt.
temaer: The temaer katalog inneholder tema ressurser som er av typen ResourceDictionary. Plattformsspesifikke ressurser legges direkte til det spesifikke prosjektet, og delte ressurser legges til i delt prosjekt.
tjenester: Denne delen kan inkludere klasser for webtjenesteanrop, navigasjonstjeneste osv.
utils inkluderer verktøyfunksjoner som kan brukes over hele appen. Eksempler inkluderer AppCache, FileUtils, konstanter, NetworkAvailability, Geolocation, etc.
Visninger: Denne katalogen inneholder brukergrensesnittlayoutene. Plattformspesifikke visninger legges direkte til det plattformspesifikke prosjektet, og vanlige visninger legges til i det delte prosjektet.
Avhengig av typen visning, skal navnet avslutte med:
Vindu, et ikke-modalt vindu
Dialog, et (modalt) dialogvindu
Side, en sidevisning (mest brukt i Windows Phone og Windows Store-apper)
Utsikt, en visning som brukes som undervisning i en annen visning, side, vindu eller dialog
Navnet på en visningsmodell er sammensatt av det tilsvarende visningsnavnet og ordet "Modell". Visningsmodellene lagres på samme sted i ViewModels katalog som deres tilsvarende visninger i Visninger katalog.
4. Legge til modellmodellen for visning
Visningsmodellaget implementerer egenskaper og kommandoer som visningen kan binde data til og varsle visningen av eventuelle tilstandsendringer gjennom endringsvarslingshendelser. Egenskapene og kommandoene visningsmodellen gir, definerer funksjonaliteten som tilbys av brukergrensesnittet. Følgende liste oppsummerer egenskaper, oppgaver og ansvar for visningsmodellaget:
Den koordinerer visningen er interaksjon med hvilken som helst modellklasse.
Visningsmodellen og modellklassene har generelt en en-til-mange forhold.
Det kan konvertere eller manipulere modelldata slik at det lett kan konsumeres av visningen.
Det kan definere flere egenskaper for å spesifikt støtte visningen.
Det definerer de logiske tilstandene visningen kan bruke til å gi visuelle endringer i brukergrensesnittet.
Det definerer kommandoene og handlingene brukeren kan utløse.
I de neste trinnene legger vi til to filer til visningsmodellaget, ViewModelLocator.cs og MainViewModel.cs.
Trinn 1: Legg til MainViewModel Klasse
Høyreklikk først på det delte prosjektet og velg Legg til, Ny mappe. Navngi mappen ViewModels. Deretter høyreklikker du på ViewModels mappe og velg Legg til, Ny gjenstand å legge til MainViewModel klasse.
Endre MainViewModel klassen for å se slik ut:
offentlig klasse MainViewModel: ViewModelBase privat streng _helloWorld; offentlig streng HelloWorld get return _helloWorld; sett Set (() => HelloWorld, ref _helloWorld, verdi); offentlig MainViewModel () HelloWorld = IsInDesignMode? "Kjører i designmodus": "Kjører i kjøretidsmodus";
Klassen inneholder en offentlig eiendom Hei Verden av type string. Du kan legge til flere metoder, observerbare egenskaper og kommandoer til visningsmodellen.
Trinn 2: Legg til ViewModelLocator Klasse
Vi legger til en offentlig eiendom for alle visningsmodellene i ViewModelLocator klasse og skape en ny ressurs, som vi skal bruke i designeren.
Høyreklikk på ViewModels mappe og velg Legg til, Ny gjenstand. Velg en klasse og gi den navnet ViewModelLocator.cs. Oppdater ViewModelLocator klassen som vist nedenfor.
offentlig klasse ViewModelLocator offentlig MainViewModel Main get return ServiceLocator.Current.GetInstance(); statisk ViewModelLocator () ServiceLocator.SetLocatorProvider (() => SimpleIoc.Default); SimpleIoc.Default.Register();
De ViewModelLocator klassen inneholder en offentlig eiendom Hoved hvis getter returnerer en forekomst av MainViewModel klasse. Konstruktøren av ViewModelLocator registrerer MainViewModel eksempel på SimpleIoc service.
Deretter åpne App.xaml fil og legg til en ny ressurs med ViewModelLocator å bli brukt i designeren.
5. Ledning opp datakonteksten
Utsikten og visningsmodellen kan bygges og tilknyttes ved brukstid på flere måter. Den enkleste tilnærmingen er å se på å instantiere den tilsvarende visningsmodellen i XAML. Du kan også spesifisere i XAML at visningsmodellen er angitt som visningens datakontekst.
Når MainPage.xaml Siden er initialisert, en forekomst av MainViewModel blir automatisk konstruert og sett som visningens datakontekst. Vær oppmerksom på at visningsmodellen må ha en standardparameter-mindre konstruktør for denne tilnærmingen til arbeid.
En annen tilnærming er å lage visningsmodelleksemplaret programmatisk i visningskonstruktøren og angi det som datakontekst.
offentlig MainPage () InitializeComponent (); this.DataContext = ny MainViewModel ();
En annen tilnærming er å opprette en visningsmodelleksempel og knytte den sammen med sin visning ved hjelp av en visningsmodell locator. I eksempelappen bruker vi ViewModelLocator klasse for å løse visningsmodellen for MainPage.xaml.
Nå som visningens datakontekst er satt til MainViewModel klasse, kan vi få tilgang til egenskapene i utsikten. Du kan binde teksten til a TextBlock til Hei Verden eiendom definert i visningsmodellen.
6. Messenger-tjenesten
Messenger-tjenesten i MVVM Light tillater kommunikasjon mellom visningsmodeller eller mellom visningsmodeller og visninger. La oss si at du har en visningsmodell som brukes til å gi forretningslogikk til en søkefunksjon og to vise modeller på siden din som vil behandle søket for å vise utdataene. Budbringeren ville være den ideelle måten å gjøre dette på en løst bundet måte.
Visningsmodellen som får søkedata, vil ganske enkelt sende en "søk" -melding som vil bli konsumert av enhver visningsmodell som for øyeblikket var registrert for å forbruke meldingen. Fordelene med å bruke en messenger tjeneste er:
Enkel kommunikasjon mellom visningsmodeller uten at hver visningsmodell må vite om hverandre
mer melding forbrukere kan legges til med liten innsats
I prøveapplikasjonen vil vi sende en melding fra MainViewModel, som vil bli mottatt av MainPage.xaml. Dette er trinnene som kreves for å bruke messenger-tjenesten.
Trinn 1: Opprett klasse for å inneholde meldingen som skal bestå
Opprett en ny klasse i prosjektet og oppgi navnet ShowMessageDialog.
offentlig klasse ShowMessageDialog public string Message get; sett;
Trinn 2: Instantiate Message Class og Broadcast Message
I MainViewModel.cs, opprett en forekomst av ShowMessageDialog og bruk budbringer motsette seg å sende meldingen.
privat objekt ShowMessage () var msg = new ShowMessageDialog Melding = "Hello World"; Messenger.Default.Send(Msg); return null;
Dette sender meldingen. Alt som er igjen for oss å gjøre, er å registrere en mottaker og svare på meldingen.
Trinn 3: Registrer deg for melding og håndtering når mottatt
Åpen MainPage.xaml.cs og registrer for meldingen i konstruktøren.
Nå som vi kan sende og motta en melding, må vi ringe Vis melding metode. MVVM Light gir støtte til RelayCommand, som kan brukes til å lage kommandoer i visningsmodellen. Legg til en offentlig eiendom ShowMessageCommand i MainViewModel klasse som påkaller Vis melding metode.
Deretter legger du til en Knapp til MainPage.xaml og binde ShowMessageCommand til dens Kommando eiendom.
Distribuer appen for å se om alt fungerer som forventet. Her er et øyeblikksbilde av hvordan MainPage.xaml ser på Windows 8.1.
Når du klikker på Klikk på meg knappen, en dialogboks dukker opp.
Messenger er en kraftig komponent som kan gjøre kommunikasjonen lettere, men det gjør koden vanskeligere å feilsøke fordi det ikke alltid er klart ved første øyekast hvilke objekter som mottar en melding.
Konklusjon
Ved å implementere MVVM-mønsteret har vi en klar separasjon mellom visningen, visningsmodellen og modelllagene. Vanligvis prøver vi å utvikle visningsmodellen slik at den ikke vet noe om visningen som den kjører. Dette har flere fordeler:
Utviklerlaget kan jobbe uavhengig av brukergrensesnittet.
Visningsmodellen kan testes enkelt, ganske enkelt ved å ringe noen kommandoer og metoder og hevde verdien av egenskaper.
Endringer kan gjøres til visningen uten å måtte bekymre seg om effekten det vil ha på visningsmodellen og modellen.
Du er velkommen til å laste ned opplærings kildefiler for å bruke som referanse.
Share
Accentsconagua
