Het Model-View-ViewModel-patroon (MVVM) helpt ontwikkelaars de bedrijfs- en presentatielogica van een toepassing te scheiden van de gebruikersinterface. Het handhaven van een duidelijke scheiding tussen de toepassingslogica en de gebruikersinterface helpt bij het aanpakken van ontwikkelings- en ontwerpproblemen, waardoor een toepassing eenvoudiger te testen, te onderhouden en te ontwikkelen is. Het kan ook de herbruikbaarheid van code verbeteren en het stelt meerdere ontwikkelaars in staat om gemakkelijker samen te werken wanneer ze aan hetzelfde project werken.
1. Inleiding
Met behulp van het MVVM-patroon zijn de gebruikersinterface van de applicatie en de onderliggende presentatie en bedrijfslogica gescheiden in drie componenten:
De uitzicht component kapselt de gebruikersinterface en logica van de gebruikersinterface in.
De bekijk het model component kapselt presentatielogica en status in.
De model- laag bevat de bedrijfslogica en gegevens van de toepassing.
Er zijn verschillende frameworks beschikbaar voor het implementeren van het MVVM-patroon in een Windows-toepassing. Welk kader het beste is voor uw project hangt af van uw vereisten. Voor deze zelfstudie gebruiken we MVVM Light, een populair en gebruiksvriendelijk MVVM-framework.
Deze zelfstudie laat zien hoe je een universele Windows-app maakt met MVVM Light-ondersteuning. Je leert hoe je:
maak een universele Windows-app en voeg ondersteuning toe voor MVVM Light
implementeer de directorystructuur
voeg de modellaag toe
draad de data-context
implementeer de messenger-service om berichten door te geven tussen weergavemodellen
2. Projectinstellingen
Stap 1: Maak een universele Windows-app
Laten we beginnen met het maken van een universele Windows-app. kiezen Nieuw project van de het dossier menu in Visual Studio. Uitbreiden templates > Visual C # > ramen > Windows 8 > universeel en selecteer Lege app (Universal Windows 8.1) uit de lijst met projectsjablonen. Geef uw project een naam en klik op OK om het project te maken.
Hiermee worden twee nieuwe apps (Windows Phone 8.1 en Windows 8.1) en één gedeeld project gemaakt. De Windows Phone 8.1- en Windows 8.1-projecten zijn platformspecifieke projecten en zijn verantwoordelijk voor het maken van de toepassingspakketten (.appx) die gericht zijn op de respectieve platforms. Het gedeelde project is een container voor code die op beide platforms wordt uitgevoerd.
Stap 2: voeg MVVM Light-ondersteuning toe
Klik met de rechtermuisknop op de naam van de oplossing in de Solution Explorer en selecteer Beheer Nuget-pakketten voor oplossing.
Selecteer de Blader tab en zoek naar MVVM Light. Selecteer het pakket MvvmLightLibs uit de zoekresultaten. Controleer zowel de Windows 8.1- als Windows Phone 8.1-projecten en klik op Installeren om de MVVM Light-bibliotheken aan de apps toe te voegen.
Op dit punt hebt u MVVM Light-ondersteuning toegevoegd aan beide toepassingen.
3. Projectbestandstructuur
Een universele Windows-app die het MVVM-patroon gebruikt, heeft een bepaalde directorystructuur nodig. De volgende momentopname toont een mogelijke projectbestandsstructuur voor een universele Windows-app.
Laat me je door de projectstructuur van een typische Univesal Windows-app leiden die het MVVM-patroon gebruikt:
controls: Deze map bevat herbruikbare gebruikersinterfacebesturingen (onafhankelijke weergaven van toepassingen). Platformspecifieke besturingselementen worden rechtstreeks toegevoegd aan het platformspecifieke project.
strings: Deze map bevat tekenreeksen en bronnen voor de lokalisatie van toepassingen. De strings map bevat afzonderlijke mappen voor elke ondersteunde taal. De en-US directory bevat bijvoorbeeld bronnen voor de Engelse (VS) taal.
modellen: In het MVVM-patroon geeft het model de bedrijfslogica en gegevens weer. In het algemeen implementeert het model de voorzieningen die het gemakkelijk maken eigenschappen aan de beeldlaag te binden. Dit betekent dat het de meldingen "property changed" en "collection changed" ondersteunt via de INotifyPropertyChanged en INotifyCollectionChanged interfaces.
ViewModels: Het weergavenmodel in het MVVM-patroon bevat de presentatielogica en gegevens voor de weergave. Het verwijst niet rechtstreeks naar de weergave of enige kennis over de implementatie of het type van de weergave.
converters: Deze map bevat de waardeconverters. Een waarde-omzetter is een handige manier om gegevens van het ene type naar het andere te converteren. Het implementeert de IValueConverter interface.
Thema's: De Thema's map bevat themabronnen van het type ResourceDictionary. Platformspecifieke bronnen worden rechtstreeks toegevoegd aan het specifieke project en gedeelde bronnen worden toegevoegd aan het gedeelde project.
Diensten: Dit gedeelte kan klassen bevatten voor webdienstaanroepen, navigatieservice, enz.
utils bevat hulpprogramma-functies die in de hele app kunnen worden gebruikt. Voorbeelden hiervan zijn AppCache, fileutils, constanten, NetworkAvailability, geolocatie, enz.
Keer bekeken: Deze map bevat de layouts van de gebruikersinterface. Platformspecifieke views worden rechtstreeks toegevoegd aan het platformspecifieke project en er worden gemeenschappelijke views aan het gedeelde project toegevoegd.
Afhankelijk van het type weergave, moet de naam eindigen met:
Venster, een niet-modaal venster
dialoog, een (modaal) dialoogvenster
Pagina, een paginaweergave (meestal gebruikt in Windows Phone en Windows Store-apps)
Uitzicht, een weergave die wordt gebruikt als subweergave in een andere weergave, pagina, venster of dialoogvenster
De naam van een weergavemodel bestaat uit de naam van de overeenkomstige weergave en het woord "Model". De weergavemodellen worden opgeslagen op dezelfde locatie in de ViewModels directory als hun overeenkomende views in de Keer bekeken directory.
4. De weergave van de modellaag toevoegen
De laag met het zichtbare model implementeert eigenschappen en opdrachten waaraan de weergave gegevens kan binden en de weergave van statuswijzigingen door middel van wijzigingsmeldingsgebeurtenissen kan melden. De eigenschappen en opdrachten die het weergavemodel biedt, bepalen de functionaliteit die de gebruikersinterface biedt. De volgende lijst bevat een overzicht van de kenmerken, taken en verantwoordelijkheden van de laag met weergavemodellen:
Het coördineert de interactie van het aanzicht met elke modelklasse.
Het weergavemodel en de modelklassen hebben over het algemeen een één-op-veel-relatie.
Het kan modelgegevens converteren of manipuleren, zodat het gemakkelijk door het beeld kan worden geconsumeerd.
Het kan aanvullende eigenschappen definiëren om de weergave specifiek te ondersteunen.
Het definieert de logische toestanden die de weergave kan gebruiken om visuele wijzigingen in de gebruikersinterface aan te brengen.
Het definieert de commando's en acties die de gebruiker kan activeren.
In de volgende stappen voegen we twee bestanden toe aan de laag met het weergavenmodel, ViewModelLocator.cs en MainViewModel.cs.
Stap 1: voeg de MainViewModel Klasse
Klik eerst met de rechtermuisknop op het gedeelde project en selecteer Toevoegen, Nieuwe map. Geef de map een naam ViewModels. Klik vervolgens met de rechtermuisknop op de ViewModels map en selecteer Toevoegen, Nieuw item om de. toe te voegen MainViewModel klasse.
Wijzig de MainViewModel klasse om er zo uit te zien:
public class MainViewModel: ViewModelBase private string _helloWorld; openbare string HelloWorld krijg return _helloWorld; set Set (() => HelloWorld, ref _helloWorld, value); public MainViewModel () HelloWorld = IsInDesignMode? "Draait in ontwerpmodus": "Draait in runtime-modus";
De klasse bevat een openbare eigenschap Hallo Wereld van type draad. U kunt aanvullende methoden, waarneembare eigenschappen en opdrachten toevoegen aan het weergavemodel.
Stap 2: voeg de ViewModelLocator Klasse
We zullen een openbare eigenschap toevoegen voor alle weergavemodellen in de ViewModelLocator klasse en maak een nieuwe bron, die we zullen gebruiken in de ontwerper.
Klik met de rechtermuisknop op de ViewModels map en selecteer Toevoegen, Nieuw item. Selecteer een klasse en noem deze ViewModelLocator.cs. Werk het ViewModelLocator klasse zoals hieronder getoond.
public class ViewModelLocator public MainViewModel Main krijg return ServiceLocator.Current.GetInstance(); static ViewModelLocator () ServiceLocator.SetLocatorProvider (() => SimpleIoc.Default); SimpleIoc.Default.Register();
De ViewModelLocator klasse bevat een openbare eigenschap Hoofd wiens getter een exemplaar van de. retourneert MainViewModel klasse. De aannemer van ViewModelLocator registreert het MainViewModel bijvoorbeeld naar de SimpleIoc service.
Open vervolgens App.xaml bestand en voeg een nieuwe bron toe met de ViewModelLocator om in de ontwerper te gebruiken.
5. Bedrading van de datacontext
De weergave en het weergavemodel kunnen op meerdere manieren tijdens runtime worden geconstrueerd en gekoppeld. De eenvoudigste benadering is dat de weergave het overeenkomstige weergavemodel in XAML activeert. U kunt ook in XAML opgeven dat het weergavemodel is ingesteld als de gegevenscontext van de weergave.
Wanneer de MainPage.xaml pagina is geïnitialiseerd, een exemplaar van de MainViewModel wordt automatisch geconstrueerd en ingesteld als de gegevenscontext van de weergave. Houd er rekening mee dat het weergavemodel een standaard parameterloze constructor moet hebben voor deze werkmethode.
Een andere benadering is om de viewmodelinstantie programmatisch in de constructor van de view te maken en in te stellen als de gegevenscontext.
public MainPage () InitializeComponent (); this.DataContext = nieuw MainViewModel ();
Een andere benadering is om een exemplaarmodelinstantie te maken en deze aan zijn weergave te koppelen met behulp van een locatiemodel voor weergavemodellen. In de voorbeeld-app gebruiken we de ViewModelLocator class om het viewmodel voor op te lossen MainPage.xaml.
Nu de gegevenscontext van de weergave is ingesteld op de MainViewModel klasse, we hebben toegang tot de eigenschappen in de weergave. U kunt de tekst van a binden TextBlock naar de Hallo Wereld eigenschap gedefinieerd in het weergavemodel.
6. Messenger-service
De messenger-service in MVVM Light maakt communicatie mogelijk tussen weergavemodellen of tussen weergavemodellen en weergaven. Laten we zeggen dat u een weergavemodel hebt dat wordt gebruikt om bedrijfslogica aan een zoekfunctie en twee weergavemodellen op uw pagina te leveren die de zoekopdracht willen verwerken om de uitvoer te tonen. De boodschapper zou de ideale manier zijn om dit op een losjes gebonden manier te doen.
Het weergavemodel dat de zoekgegevens krijgt, zou gewoon een "zoek" -bericht verzenden dat zou worden gebruikt door elk weergavemodel dat momenteel was geregistreerd om het bericht te consumeren. De voordelen van het gebruik van een koeriersdienst zijn:
eenvoudige communicatie tussen weergavemodellen zonder dat elk weergavemodel over elkaar moet weten
meer berichten Consumenten kunnen met weinig moeite worden toegevoegd
In de voorbeeldtoepassing sturen we een bericht van MainViewModel, welke zal worden ontvangen door MainPage.xaml. Dit zijn de stappen die nodig zijn voor het gebruik van de Messenger-service.
Stap 1: Maak een klas om het bericht te bevatten dat moet worden gehaald
Maak een nieuwe klasse in het project en noem het ShowMessageDialog.
public class ShowMessageDialog public string Message get; vast te stellen;
Stap 2: meld de berichtenklasse en het broadcastbericht
In MainViewModel.cs, maak een instantie van ShowMessageDialog en gebruik de Boodschapper object om het bericht uit te zenden.
privé-object ShowMessage () var msg = nieuwe ShowMessageDialog Message = "Hello World"; Messenger.Default.Send(Msg); return null;
Dit zendt het bericht uit. Het enige wat u hoeft te doen, is om een ontvanger te registreren en op het bericht te reageren.
Stap 3: Registreer voor bericht en verwerking bij ontvangst
Open MainPage.xaml.cs en registreer voor het bericht in de constructor.
ReceiveMessage is een methode die u moet implementeren. Het zal de Bericht object en gebruik de DialogService om een dialoogvenster weer te geven.
private async void ReceiveMessage (ShowMessageDialog actie) DialogService dialogService = new DialogService (); wacht op dialogService.ShowMessage (action.Message, "Sample Universal App");
Stap 4: maak een commando om een bericht te verzenden
Nu we een bericht kunnen verzenden en ontvangen, moeten we het Toon bericht methode. MVVM Light biedt ondersteuning voor RelayCommand, die kan worden gebruikt om opdrachten in het weergavemodel te maken. Voeg een openbare eigenschap toe ShowMessageCommand in de MainViewModel klasse die de Toon bericht methode.
private RelayCommand _showMessageCommand; public RelayCommand ShowMessageCommand => _showMessageCommand ?? (_showMessageCommand = nieuwe RelayCommand (ShowMessage));
Voeg vervolgens een toe Knop naar MainPage.xaml en bind de ShowMessageCommand naar zijn Commando eigendom.
Implementeer de app om te zien of alles werkt zoals verwacht. Hier is een momentopname van hoe MainPage.xaml kijkt op Windows 8.1.
Wanneer u op klikt Klik hier knop verschijnt een dialoogvenster.
Messenger is een krachtig onderdeel dat communicatie eenvoudiger kan maken, maar het maakt de code ook moeilijker om te debuggen, omdat het op het eerste gezicht niet altijd duidelijk is welke objecten een bericht ontvangen.
Conclusie
Door het MVVM-patroon te implementeren, hebben we een duidelijke scheiding tussen het weergave-, weergavenmodel en de modellaag. Meestal proberen we het weergavemodel te ontwikkelen zodat het niets weet over de weergave die het genereert. Dit heeft meerdere voordelen:
Het ontwikkelteam kan onafhankelijk van het gebruikersinterfaceteam werken.
Het kijkmodel kan eenvoudig worden getest door eenvoudigweg enkele commando's en methoden op te roepen en de waarde van eigenschappen te bevestigen.
Er kunnen wijzigingen in het beeld worden aangebracht zonder dat u zich zorgen hoeft te maken over het effect ervan op het weergavemodel en het model.
Download de bronbestanden van de zelfstudie om te gebruiken als referentie.
Share
Accentsconagua
