Model-View-ViewModel (MVVM) -mönstret hjälper utvecklare att separera en applikations affärs- och presentationslogik från användargränssnittet. Att upprätthålla en tydlig separation mellan applikationslogiken och användargränssnittet hjälper till att hantera utvecklings- och designproblem, vilket gör det lättare för en applikation att testa, underhålla och utveckla. Det kan också förbättra kodens återanvändning och det gör det möjligt för flera utvecklare att samarbeta lättare när de arbetar på samma projekt.
1. Introduktion
Med hjälp av MVVM-mönstret delas användargränssnittet för programmet och den underliggande presentationen och affärslogiken i tre komponenter:
De se komponenten inkapslar användargränssnittet och användargränssnittets logik.
De visa modell komponenten inkapslar presentationslogik och tillstånd.
De modell skiktet inkapslar programmets affärslogik och data.
Det finns flera ramar tillgängliga för implementering av MVVM-mönstret i en Windows-applikation. Vilket ramverk som är bäst för ditt projekt beror på dina krav. För denna handledning använder vi MVVM Light, en populär och lättanvänd MVVM-ram.
Denna handledning visar hur du skapar en Universal Windows-app med stöd för MVVM Light. Du kommer att lära dig hur:
skapa en Universal Windows-app och lägg till stöd för MVVM Light
implementera katalogstrukturen
lägg till bildmodellskiktet
koppla samman datakontexten
implementera meddelandeservice för att skicka meddelanden mellan visningsmodeller
2. Projektinställningar
Steg 1: Skapa en Universal Windows App
Låt oss börja med att skapa en Universal Windows-app. Välj Nytt projekt från Fil menyn i Visual Studio. Bygga ut mallar > Visual C # > Windows > Windows 8 > Universell och välj Blank App (Universal Windows 8.1) från listan över projektmallar. Namn ditt projekt och klicka ok att skapa projektet.
Detta skapar två nya appar (Windows Phone 8.1 och Windows 8.1) och ett delat projekt. Windows Phone 8.1 och Windows 8.1-projekten är plattformsspecifika projekt och ansvarar för att skapa applikationspaket (.appx) riktade mot respektive plattform. Det delade projektet är en behållare för kod som körs på båda plattformarna.
Steg 2: Lägg till MVVM Light Support
Högerklicka på lösningsnamnet i Lösningsutforskare och välj Hantera Nuget paket till lösning.
Välj Bläddra fliken och söka efter MVVM Light. Välj paketet MvvmLightLibs från sökresultaten. Kontrollera både Windows 8.1 och Windows Phone 8.1-projekten och klicka på Installera att lägga till MVVM Light-biblioteken i programmen.
Vid denna tidpunkt har du lagt till MVVM Light-stöd för båda dina applikationer.
3. Projektfilstruktur
En Universal Windows-app som antar MVVM-mönstret kräver en viss katalogstruktur. Följande stillbild visar en eventuell projektfilstruktur för en Universal Windows-app.
Låt mig gå igenom projektstrukturen i en typisk Univesal Windows-app som antar MVVM-mönstret:
kontroller: Den här katalogen innehåller återanvändbara användargränssnittskontroller (programoberoende vyer). Plattformspecifika kontroller läggs direkt till det plattformsspecifika projektet.
strängar: Den här katalogen innehåller strängar och resurser för applikationslokalisering. De strängar katalogen innehåller separata kataloger för varje språk som stöds. De en-US katalog innehåller exempelvis resurser för det engelska (USA) språket.
modeller: I MVVM-mönstret inkapslar modellen affärslogiken och data. Generellt implementerar modellen de anläggningar som gör det enkelt att binda egenskaper till visningsskiktet. Det betyder att det stöder "egenskap ändrade" och "samling ändrade" meddelanden genom INotifyPropertyChanged och INotifyCollectionChanged gränssnitt.
ViewModels: Visningsmodellen i MVVM-mönstret inkapslar presentationslogiken och data för vyn. Den har ingen direkt hänvisning till vyn eller någon kunskap om vyns genomförande eller typ.
omvandlare: Den här katalogen innehåller värdesomvandlarna. En värdeomvandlare är ett bekvämt sätt att konvertera data från en typ till en annan. Det implementerar IValueConverter gränssnitt.
teman: Den teman katalog innehåller tematillgångar som är av typen ResourceDictionary. Plattformsspecifika resurser läggs direkt till det specifika projektet och delade resurser läggs till i det delade projektet.
tjänster: Det här avsnittet kan innehålla klasser för webbtjänstsamtal, navigeringstjänst mm.
utils innehåller verktygsfunktioner som kan användas över appen. Exempel inkluderar AppCache, fileutils, Konstanter anter~~POS=HEADCOMP, NetworkAvailability, Geolocation, etc.
Visningar: Den här katalogen innehåller användargränssnittslayouterna. Plattformspecifika vyer läggs direkt till det plattformspecifika projektet och vanliga vyer läggs till i det delade projektet.
Beroende på vilken typ av vy ska namnet sluta med:
Fönster, ett icke-modalt fönster
Dialog, ett (modalt) dialogfönster
Sida, en sidvisning (mestadels används i Windows Phone och Windows Store-appar)
Se, en vy som används som undervy i en annan vy, sida, fönster eller dialogruta
Namnet på en visningsmodell består av motsvarande vyens namn och ordet "Modell". Visningsmodellerna lagras på samma plats i ViewModels katalog som motsvarande vyer i Visningar katalog.
4. Lägga till View Model Layer
Visningsmodellskiktet implementerar egenskaper och kommandon som vyn kan binda till data och meddela vyn av eventuella tillståndsändringar genom ändringsmeddelandehändelser. Egenskaperna och kommandon visningsmodellen tillhandahåller, definiera funktionaliteten som erbjuds av användargränssnittet. Följande lista sammanfattar egenskaper, uppgifter och ansvarsområden för visningsmodellagret:
Den samordnar synets interaktion med vilken modellklass som helst.
Visningsmodellen och modellklassen har i allmänhet ett ett till många förhållande.
Den kan konvertera eller manipulera modelldata så att den lätt kan konsumeras av vyn.
Det kan definiera ytterligare egenskaper för att specifikt stödja visningen.
Det definierar de logiska tillstånd som visningen kan använda för att ge visuella ändringar i användargränssnittet.
Det definierar kommandon och åtgärder som användaren kan utlösa.
I nästa steg lägger vi till två filer i visningsmodellskiktet, ViewModelLocator.cs och MainViewModel.cs.
Steg 1: Lägg till MainViewModel Klass
Högerklicka först på det delade projektet och välj Lägg till, Ny mapp. Namnge mappen ViewModels. Högerklicka sedan på ViewModels mapp och välj Lägg till, Nytt föremål att lägga till MainViewModel klass.
Ändra MainViewModel klass för att se så här ut:
allmän klass MainViewModel: ViewModelBase privatsträng _helloWorld; allmän sträng HelloWorld get return _helloWorld; set Set (() => HelloWorld, ref _helloWorld, värde); offentliga MainViewModel () HelloWorld = IsInDesignMode? "Körs i designläge": "Körs i körningsläge";
Klassen innehåller en offentlig egendom Hej världen av typ sträng. Du kan lägga till ytterligare metoder, observerbara egenskaper och kommandon till visningsmodellen.
Steg 2: Lägg till ViewModelLocator Klass
Vi lägger till en offentlig egendom för alla visningsmodeller i ViewModelLocator klass och skapa en ny resurs, som vi kommer att använda i formgivaren.
Högerklicka på ViewModels mapp och välj Lägg till, Nytt föremål. Välj en klass och namnge den ViewModelLocator.cs. Uppdatera ViewModelLocator klass som visas nedan.
offentlig klass ViewModelLocator allmän MainViewModel Main get return ServiceLocator.Current.GetInstance(); statisk ViewModelLocator () ServiceLocator.SetLocatorProvider (() => SimpleIoc.Default); SimpleIoc.Default.Register();
De ViewModelLocator klassen innehåller en allmän egendom Huvudsaklig vars getter returnerar en instans av MainViewModel klass. Konstruktören av ViewModelLocator registrerar MainViewModel instans till SimpleIoc service.
Nästa, öppna App.xaml fil och lägg till en ny resurs med ViewModelLocator att användas i formgivaren.
5. Anslutning av datakontexten
Vyn och visningsmodellen kan konstrueras och associeras vid körning på flera sätt. Det enklaste tillvägagångssättet är att se till att instantiera sin motsvarande visningsmodell i XAML. Du kan också ange i XAML att visningsmodellen är inställd som vyens datakontext.
När MainPage.xaml sidan initialiseras, en förekomst av MainViewModel konstrueras automatiskt och ställs in som vyens datakontext. Observera att visningsmodellen måste ha en standardparameterlös konstruktion för detta arbetssätt.
Ett annat tillvägagångssätt är att skapa visningsmodellen instansprogrammatiskt i vyens konstruktör och ange det som datakontext.
public MainPage () InitializeComponent (); this.DataContext = nya MainViewModel ();
Ett annat tillvägagångssätt är att skapa en bildmodellinstans och associera den med sin vy med hjälp av en visningsmodellläsare. I provappen använder vi ViewModelLocator klass för att lösa visningsmodellen för MainPage.xaml.
Nu när vyens datakontext har ställts in till MainViewModel klass, kan vi få tillgång till dess egenskaper i vyn. Du kan binda texten till a Textblock till Hej världen egenskap definierad i visningsmodellen.
6. Messenger Service
Messenger-tjänsten i MVVM Light möjliggör kommunikation mellan visningsmodeller eller mellan visningsmodeller och visningar. Låt oss säga att du har en visningsmodell som används för att ge företagslogik till en sökfunktion och två visa modeller på din sida som vill bearbeta sökningen för att visa resultatet. Budbäraren skulle vara det perfekta sättet att göra detta på en löst bunden väg.
Visningsmodellen som får sökdata skulle helt enkelt skicka ett "sök" -meddelande som skulle förbrukas av någon visningsmodell som för närvarande registrerades för att konsumera meddelandet. Fördelarna med att använda en budbärarservice är:
Enkel kommunikation mellan visningsmodeller utan att varje bildmodell behöver veta om varandra
mer meddelande konsumenter kan läggas till med liten ansträngning
I proverapplikationen skickar vi ett meddelande från MainViewModel, som kommer att tas emot av MainPage.xaml. Det här är de steg som krävs för att använda budbärarens tjänst.
Steg 1: Skapa klass för att innehålla meddelandet som ska skickas
Skapa en ny klass i projektet och namnge det ShowMessageDialog.
offentlig klass ShowMessageDialog public string Message get; uppsättning;
Steg 2: Instantiate Message Class och Broadcast Message
I MainViewModel.cs, skapa en instans av ShowMessageDialog och använd budbärare motsätta sig att sända meddelandet.
privat objekt ShowMessage () var msg = new ShowMessageDialog Message = "Hello World"; Messenger.Default.Send(Msg); returnera null;
Detta sänder meddelandet. Allt som är kvar för oss att göra är att registrera en mottagare och svara på meddelandet.
Steg 3: Registrera för meddelande och hantera när mottaget
Öppna MainPage.xaml.cs och registrera för meddelandet i konstruktören.
Steg 4: Skapa en kommando för att skicka meddelande
Nu när vi kan skicka och ta emot ett meddelande måste vi ringa ShowMessage metod. MVVM Light ger stöd för RelayCommand, som kan användas för att skapa kommandon i visningsmodellen. Lägg till en offentlig egendom ShowMessageCommand i MainViewModel klass som påkallar ShowMessage metod.
privata RelayCommand _showMessageCommand; public RelayCommand ShowMessageCommand => _showMessageCommand ?? (_showMessageCommand = nytt RelayCommand (ShowMessage));
Lägg sedan till en Knapp till MainPage.xaml och binda ShowMessageCommand till dess Kommando fast egendom.
Använd appen för att se om allt fungerar som förväntat. Här är en snapshot av hur MainPage.xaml ser på Windows 8.1.
När du klickar på Klicka här knappen dyker upp en dialogruta.
Messenger är en kraftfull komponent som kan göra kommunikationen enklare, men det gör också koden svårare att felsöka eftersom det inte alltid är klart vid första ögonkastet vilka objekt som får ett meddelande.
Slutsats
Genom att implementera MVVM-mönstret har vi en tydlig åtskillnad mellan visningen, visningsmodellen och modelllagret. Vanligtvis försöker vi utveckla visningsmodellen så att den inte vet någonting om utsikten att den körs. Detta har flera fördelar:
Utvecklarteamet kan arbeta självständigt från användargränssnittet.
Visningsmodellen kan testas enkelt, helt enkelt genom att ringa några kommandon och metoder och hävda värdet av egenskaper.
Ändringar kan göras till vyn utan att behöva oroa sig för den effekt det kommer att få på visningsmodellen och modellen.
Ta gärna hämta källkursfilerna för handledningen för att använda som referens.
Share
Accentsconagua
