Mastering Sharing Data Between ViewModels in WPF Tutorial using MVVM

all right so in this video we're going to be talking about multiple views but not multiple views per se we're actually going to be talking about how to share data in between the views take this settings window as an example if I were to click this is full screen we can see that it updates on this one as well that's because it's instantiated as a singlet ton same thing goes for if I were to add something we can see that it doesn't only add to this one but it also adds to a completely different window in this case the main window this right here is super simple and going to be so much fun so let's get into it all right so first things first we're obviously going to have to create an application so I'm going to name it sharing data might as well choose uh SDK 8.0 doesn't really matter which version you choose it's going to be fine same thing for the framework and then create all right so once the project is actually up and running we can go ahead and create uh a directory call it mvvm obviously and create a couple more directories so view view model and model inside the view VI model directory we can create a class call it main view model we're not going to do anything with this as of right now but we might as well create a settings one as well we'll create a class settings view model this is what we're going to be sharing the data in between outside of that directory we can actually create a new one uh a new directory we'll call this services and another directory called core let's start with a core folder inside here we're just going to have a typical relay command like we do in every other video if you need to take a look at this feel free to pause right now the source code will be available on my patreon in the description all right so once that's done we can go ahead and create a new service it's going to be a locator actually so we're going to create a new class call it view model locator so what this is going to do is it's going to allow us to fetch the uh view model that we've registered in the ioc container later down the line so let's go ahead and create a Constructor in which we're going to inject a i service provider we're going to call it I service provider just like that actually provider works as well let's introduce a readon field and assign it down here we're then going to have a function that's going to return the main view model and another one that Returns the settings view model we're going to do public main view model just like that call it main view model and we're going to return provider get it's actually going to be get required service of type main view model there we there we go the reason why we can't see it is because we haven't in installed the um the NIT package we want the Microsoft extensions dependency injection one so let's go ahead and add that through new get it's going to be this one Microsoft extensions dependency injection I'm going to choose the latest version and install it just like that once installed we can actually go ahead and just import the name space same thing goes for the settings view model we're going change the type right there and we're also going to change this to settings view model there we go and that's the entire class now now let's go into the app. t. Cs and start registering some stuff we're going to create a Constructor obviously we're also going to create a private read only I service collection we're going to call it Services equals new service collection then inside app we can go ahead and start registering things we can do Services add Singleton and of type main view model and then one for settings view model as well just like that we're also going to go ahead and register the view model locator that we just created so we do Services add Singleton view model there we go view model locator there we go now we're going to create a window mapper inside Services it's going to be a class window mapper and this is going to be responsible for actually mapping the view model to the window let's create a private read only dictionary which takes two types type and then type super generic call it un SC mappings equals new there we go we can actually do like this we're going to have a Constructor but we're also going to have uh two functions we're going to have a public oh public void register mapping it's going to take two types well it's going to take two types t view model and T window where t view model is of type view model base we're going to have a base view model as well but also where the window is of Type window as in curly braces and let's go ahead and create the view model base we'll do that inside our mvvm folder and then view model cre a new class we'll call it view model base we'll leave it be for now we just need it so this won't throw a fit there we go so this function is actually going to be responsible for setting everything so we're going to do uh mappings call upon the the aformentioned dictionary that we created and we're going to do type of whatever t view model we pass in and it's going to be equals to to um type of window there we go super simple now we also need a function which grabs whichever window we're trying to get based upon the view model also just a quick uh Quick Fix here uh I typed window instead of T window there we go so let's go ahead and do a public type get window get window type for view model and this just takes uh a type which going to be the view model type as some curly braces and we'll do mappings mappings try get value view model type out VAR window type here we go and you would uh do some error checking here to see if this managed to get a value or not but we just want to return the window type which I so horribly misspelled there we go we can actually refactor this window type there we go and that's it for this one all right so let's just go ahead and register everything now do register mapping main view model which obviously maps to the main uh window and we'll also do one for settings view model we don't have a settings window as of right now um but we'll create one inside the view directory we can create a new window if I can spell there we go window we'll call this settings window super simple let's go ahead and import that real quick it's still complaining about these two however that's because we're not actually inheriting from view model base there we go see that one's fine now we'll head into this one and we'll do the same thing VI model base perfect and now we just register it as a single ton we'll do um view no actually what I'm saying window mapper and now we just need to register two more things we're going to need a window manager as well as you know an ad item service so we can actually display data being sent back and forth and we also need a add item service so we can actually add data so we can you know share data in between the view models and we also need a add item service because we're going to be able to add data and you know share that data between view models inside Services we'll do a new class uh we'll call it Window Manager we'll add an interface right above it just real quick so we'll do public interface and we'll call it I wind Window Manager We'll add two functions we're actually we only need one but we'll add both of them just because I want to showcase how to actually close the window as well void show window oops wind window this takes a view model base I'll call A View model we also want a void close window it's going to be much more simple than the previous one there we go it's not going to take any parameters now we want to inherit from I Window Manager implement the interface and there we go also going to add a Constructor and this is going to take a uh a window mapper we'll call it window mapper we'll instantiate a read only field make sure that it assigns it and then when we actually want to go ahead and show a window so let's say we click a button or whatever this is the logic that's going to handle that so we'll do VAR window type equals window mapper get window type for a view model which we implemented just a few seconds ago this takes a view model which we pass in right here so we'll do view model. getet type then want then we want to check if the window type that we just got is null or not because remember this thing it might you know return null also you want to make sure that you spell things correctly so window type I think I'm the only one who has this issue window type really window type here we go right so if window type uh if window type is not equal to null when do our we want to create a new instance of it we'll do window equals uh activator uh create instance we'll do window type as window I can't spell window there we go I will import that real quick and yeah looks good now we might as well set the data context right here window. data context and the data context is always the the view model so the view oh equals view model there we go and then we just do window show and that's it all right so that's it for showing the window we also want to set the the event handler for whenever we close the window so we'll do window. closed uh plus equals and we just pass that in right there as well as the actual function that's going to invoke which is close window just like that that way whenever we close the window we can do I don't know message box show wooho yes all right now just like with any other thing that we've done so far we want to register this as a single ton this time we'll do I Window Manager followed by the actual implementation which is the window manager on the window manager here we go all right so we're pretty much done with the entire pipeline for setting everything up all right so after we've registered the I window manager and this implementation we're going to go ahead and create the service provider so we might as well do let's see private read only uh I service provider we'll call it uhor service provider that'll be fine and then we'll instantiated by doing service provider equals Services build service provider perfect now for the final thing inside here we want to overwrite the on Startup so we'll do override members we'll get the on Startup Implement that real quick and what you want to do before doing this is actually head into app. SLE remove the startup URI here we go if you were to try to run this application now nothing would show but you wouldn't get any errors so what we want to do here is we actually want to get the want to do uh service provider uh get required service and want to get the I window manager and want to instantiate a variable here let's do bar window and then we'll do window manager show window and the window that we want to show is actually the main view model and the window that do window manager show window and the window that we want to show is based upon the main view model so so a way we can get that is by doing service provider get required service and Main view model here we go and if we were to run this now uh it should run without any issues and there we go if we close it woohoo hey all right so let's go ahead and finish off some UI stuff and then we're done I'm going to take this main window and move it over to uh view there we go let's head into the main window and uh let's just make sure that I'll be able to see it we're going to have a list view in here we're going to set the uh item source to binding and we're going to have our service and a collection inside the service so we're going to actually we'll create the service right now it's going to be the final Service uh class it's going to be uh I don't know let's call it items service create an interface for it as well so we'll do um public interface I items service and we're going to have a a property it's going to be Observer able collection of type string this is what we're actually going to bind to later down the line we're going to call this items and we're going to have a function which returns nothing it's called add item this item service is obviously going to inherit from I item service which uh I just realized that I have misspelled let's go and refactor that I items service this add item function is going to take items and we're going to add we'll do uh just say item let's also instantiate this so we don't get any uh exceptions when we try to add something to it and that's it for this entire service you can obviously extend this to where it takes a parameter and it adds whatever but we're going to keep it as simple as possible inside app. CS we want to register this real quick and it's going to be the last one I items service and implementation which is items service now we can head into main view model cre a Constructor and we can do I item service item service and instantiate a actually we'll do we'll create a property for it so we'll do public uh items service items service oh I can't spell there items service I'll create a property for with prop uh I items service items service oh no items service there we go such as the I Window Manager call this window manager this one can be a private field so we're not going to bind to it we'll ask the view model locator uh we'll call this view model locator another uh private field let's also set the uh items service equals to item surface all right looking good we also since from the main window we want to be able to open the settings window let's create a uh let's do a prop uh relay command we'll call this open settings command settings we'll do settings window command this right here is going to be open settings window command equals equals new relay command into this function and then it goes into true just for Simplicity sake just like before we do window manager show window and we'll do in this case uh view model locator and we'll do a settings view model heading into the main window let's create a button real quick uh wrap this all in a stack panel just so it looks a little bit better here we go create a button up here to oops uh width 100 height 25 command it's going to be bind and the name was open settings window command let's give it some content say settings and that should work just fine all right final stretch the only thing we want to do inside the settings view model now is we want to do we want to inject through dependency injection the I items service we'll call it um items service we'll create a property for it so prop I items service item service and instantiate it of course uh item service which is the correct one equals item service service we'll also create a command so do prop relay command add items or add item rather and we want to instantiate that as well uh add item equals new relay command oh goes into the function like that and then we all through like that we might as well rename the add item as well add item command what this function is going to do is going to take the items service and add item here you would obviously pass in a parameter like if you had a a property of type string name and then bound it to Something in the view you would just type name and pass it in like that obviously adding the uh uh correct signature uh yes now we just got to wire this up in the UI inside the settings window we'll create a button button and we'll do uh content add item command binding I want to bind it to the uh actually yeah we have to add item Command right here item command there we go oh I should probably spell it correctly there we go and if I'm not mistaken that should be the entire application go and resize this real quick we'll do uh width 100 height 25 if we run the application now I haven't missed anything we can do settings add item and well okay well so we still haven't bound the item source of the list view which we kind of Almost Is started earlier let's check the uh where's the main view model right there want to do item service or items service items I got to spell it right items service. items and obviously spelled that right as well now my good friends if we run this application we we can go ahead and add items like that and we can see that it adds just fine we can create another window like that keep adding items and it works just fine so if you were to want to add a list view just like this on the other one let's just go ahead and style this a little bit better I don't 80 let's do 100 might as well what you would do is you would set up the exact same thing on the settings window just like that and if I'm not mistaken we have the item service already in the settings uh view model we have the item service yeah so it should be just fine uh let's try running this if we click settings oh I I don't have a button for adding things that makes things slightly more difficult actually I do I'm just covering it up uh and let's do stack panel go and oh we got to move this one in as well whoops perfect now if we run this everything should work accordingly add items from here yep and there we go that's the entire thing the key notes to take away from this episode is that you should always create a service using dependency injection is amazing this solution is not production ready it's more so a blueprint or a foundation for you to understand what's actually going on and how you could create multiple views and uh share data in between those views also remember if you need a window not to be Singleton you just do add transient there we go in case you wanted multiple views with a different context same view model but a different context you could do that as well anyways that's it for this episode I really hope you enjoyed it make sure to subscribe and like because it really really helps out the channel we do have a Discord channel the link will be in the description as well if you want to join and get some help feel free to do so thanks for watching I'll see you in the next one

Channel: Payload

Views: 10,771

Keywords: WPF, wpf tutorial c#, wpf c#, wpf ui, wpf tutorial, wpf mvvm tutorial, wpf sharing data between viewmodels, wpf viewmodel, wpf navigation, wpf user control tutorial, wpf viewmodel tutorial, wpf data between viewmodel, dotnet, c# programming, software development, wpf services, dependency injection wpf, MVVM, wpf design pattern, wpf multiple views, mvvm views, wpf mvvm, wpf transfer data between viewmodels, share data viewmodels wpf, mvvm wpf, viewmodels wpf, multiple wpf

Id: umRSp4qB6Tw

Length: 18min 28sec (1108 seconds)

Published: Thu Oct 12 2023