WPF MVVM Implementation

hey guys so in this lecture we'll develop a very simple application using MVVM pattern now I have explained you so I notify property change interface concepts the concept of commands etcetera in my previous lecture so we will using those concepts into this application now in this application I will be also using a concept called as observable collection so I wanted to make that lecture of observer collection before this presentation but due to its a very small topic and it's very easy topic to understand so I will be using that concept directly in this demo and you need to understand and I will make you understand rather that how do what is the purpose of this observer collection okay so I have that application running into my system so I have already developed that application so I will show you that what we will be trying to achieve through this application demo and then we will build it from scratch so here it is it's a very simple application it has a label first name last name root Xboxes a submit button and a list view so you can see this submit button is not enabled right so the moment I type a name in here Sean toe and lose the focus of this text box so this button gets enabled and if I submit this here it gets added to this ListView if I change the name say I say Mary what Sun it it gets added into the ListView if I remove this thing you can see the button gets disabled right so there need needs to be some input into these text boxes so let's see how we will achieve this and let's build this application from scratch using cambium pattern so I have opened a empty WPF application and I have named this project as MV impractical right so first thing what we need to do is to add a folder which is called s model so let me first develop the model and to this order folder I will add a class so and I will make this class as person class right so this person class consists of my model so I will have public class person and I have two properties so it will have string F name so F name stands for first name and the capital F name has the is the property and this is the variable now to same save some time I will be pasting some codes so let's paste of the other two properties what we need to in this application so let me be in those two properties in here so I have two more properties now just like my first name there is a last name property and then there is full name property okay and all this full name property does is it contain its first name and last name that's it and it returns full name so if you have paused my inotify property changed demo so you need to implement this interface inotify property change and for that I need to have the namespace in imported so that namespace is component model namespace and then you need to implement this interface so the moment you implement this interface you get a property change event handler so let me have that property changed event handler inside this and then I will have a own property changed method defined so I have explained this method in my previous demo of I know to be property change interface so I'm just pasting it so it's a method which takes a string parameter that that means it will take a string of property name and all this logic here is does its first checks that whether this property change event handler is null or not and if it's not none then it raises the event so very simple method here so here I will write on property changed then I will pass the property name here so what is my property name it is f name right similarly I will have the same here okay so since fulham is not returning its it does not need to notify the UI so I am NOT writing this method in the full name property let's save this so our model is ready so let me collapse this model now now let's add our view model so let me add a folder and name it as view model okay let me have a class inside it so the naming convention goes like this so if you have a student class or person class so the name of the view model should be person view model so let me name it as person view model let me add this class right so here it is our view model so let me make this class as public and let's implement again inotify proper teacher interface so let me have I notify property interface implemented again its present in component model and let's implement this interface now you might be getting a question in your mind that why we need to implement inotify property change and interface again on to the view model that's because we will be going to define a collection class in our view model that will again notify to the UI and the the sole purpose of inotify property chain interface is to notify the UI or provide the change notification on to the so it depends on your requirements that what we need to achieve so in my case I need to propagate those changes from view model also to the UI so similarly we will have a notify property change end of his method defined it takes a property name and the same logic white what I have explained you for this method right so now I need to expose the property from the model to the view model so that this property can in turn communicate to the view so if you remember the architecture of every wave pattern model and of you don't talk to each other directly right it's the responsibility of the view model to make them talk so what I will do I will make a property of this model type or the student type so that that property will take all my data and present it to the view right so let me have a prop full so it's it's of type what's the name of my class person class right and you can see I have used this ambient practical dot model namespace because my person classes is present on to the modern image space right so I will name this variable as underscore person so this person and I will name this as person so this person is the property now of type person class okay and also I have this notify property change into method so I will pass this property name on to this notify property change interface property chain method so this is the reason why I need to implement I notify property change interface because my data from the model also needs to be passed through view model and reach to the UI that's why we need to expose a property of type person of present in the model class and then we need to define this inotify property here interface and propagate our change requests so let me make it as string variable deposits giving era and now you might have seen that in my application what I showed you what was running onto my screen that in and that had a ListView so in this list view you need to retain a list so that in that list view my name of the person will be added one by one right so you need some mechanism to add to that list onto that list view right so for that in normal scenarios what you need to what you did was like this right so you had a list of person class right so you do it like this persons and then you created a property type of this person class or the list of this person class right so this is the normal mechanism what you followed in your applications without WPF right now WPF has a very special type of collection included in it that is called observable collection so the purpose of it or observable collection is very similar to the purpose of this inotify property chain interface so the moment your property value changes on in on to this I note of a property change interface it notifies the UI same is the same functionality is done with the help of observable collection also so the moment anything will be added to this collection it will be propagated on to the UI and similarly when anything will be removed from this collection this will be this will be propagated to the UI so the chain notification runs back and forth with the help of observable collection so to use observer collections very easy it's used just like as this list only thing is that we need to have this observer collection defined in here right now you can see it says that it is fine in the system dot collections dot object model so I need to implement import this namespace also so same thing you need to do it here you can see no your error has gone away and now you will be storing all your persons on the list of person into this off so one collection class and the moment any person will be added on to that list this will be notified to the UI the moment that any person will be removed from this list it will be notified to the UI so this is this this observed collection is used in WPF mmm patterns explicitly now we have we are done with our view model till now we need to define a few commands also in here but for that first we need to have our view ready so let me add this view here so let me add a folder so this called as view so if you have I have just one view so I will be making that view on to this main window if you have many views so you need you can add these windows in here and define your application so let me have my main window define inside this view right and let me go to this main window now and let's design our UI first let's let us define namespace of our view or view model so that my view is aware of this view model remember I am NOT defining any newest face from my model class that's because view is never available wear of this model class let me name this as VM and let's let me have the name of my application so this is the name there is a namespace what I need to implement for this of view to be aware of my view model now we need to define window dot resources so that I can reference this namespace so the name of my namespace SVM and it see it's a differencing person view model so what's the name of my view model it's person view model let me give it a key yes person view model so for Sun view model now this key is different and this namespace is different but I have near I have made their name same with just because you can easily confuse between these two so you need to understand that whenever you pass percent view model you are passing that key now to save some time I have pasted I will paste a code in here so that will define my UI so this is very simple code so if you need to understand these all things the layouting part you need to go and check out my layouting video of WPF so I have just made five rows of this grid in this grid so you can see these lines these are five rows in here and then there are two columns so you can see this is one column and this is second column okay and then I have defined a text block which says first name and then it has a corresponding text box I am binding that person dot F name that means my property which is defining on to the model on to this text box okay and the binding mode is two-way for if you are not clear with these concepts you need to understand my data binding demo also okay and similarly I have a text block and then I have a text box I have bound that person dot last name in it then I have a button which is called a submit button that will submit my details on to that ListView so I have a list view then and I have defined that ListView onto the third row of this grid okay and the first column of this grid so the ListView then it has a view property view section and then inside that ListView I have define a grid view okay so this grid view is different with this grid okay this grid is for arranging the controls onto the UI and the grid view is the now the traditional grid view that displays that data for us right in rows and columns so I have a grid view inside there's ListView and it has a header which says first name so and then it will bind the f name property the same property in here so whatever name I will pass in here in in the textbox that will be bound in here okay same goes for this L name and full name so these three columns will display my grid view okay and the spirit view is present inside this ListView now let's try to see what we have developed so far so let me run this application now and you can see I might get a exception in here it says let's see the details it says cannot locate source main windows same dots ml that's obvious that's because we have changed the location of this main window on to that view folder right so generally this main window resides outside any folder now this main window is present inside this view folder and for that we need to go to the F dot sam'l file now AB dot Zemel file is responsible for the startup of this project you can see startup URI is main window dot SML and now it's not finding this main window Zemin here in this uri so all we need to do is this we need to have that folder name included and then provide a slash and then this main windows ml so now this will search this main window Zemin inside this view folder ok and let's try to run this now and you can see my UI is developed completely so it will not work this was I have not defined any commands but let me have any name here random name random name right let me click on submit nothing happens that's because I have not defined any commands right now commands have covered in my previous lecture so you need to understand those that lecture again but I will be developing this command inside this view model so let us go to this person view model again and inside this person view model I will I will not add a command directly I will just make a command separately just to keep our code separated right so I will have a command folder included separately okay and inside this command folder I will add a class which will say s relay c'mon now don't get confused because in my previous lecture I have defined this as a delegate c'mon so it's nothing there is no difference between delay c'mon in command it's just way to terminate there are few differences between relay command and routed UI command so that I will explain you in one of my future lectures so I will just add a command called as the relay command or a class called as relay come on really come on now let me they can make this classes public class and let me now paste the code of this relay command again in here that's because I have developed this relay command in detail in my previous lecture so I am NOT going to develop again I am just going to explain you right so this relay command class and derives from I command or it implements I command interface and then I have defined three parameters in here that's because in my previous lecture I have just defined these two parameters in this lecture I just needed to define this can execute gauge also that's because my button will be enabling on some condition so you might have seen that in my whenever I type anything in my text boxes then that button gets enabled so for that we need to define the three parameters now onto the constructor of this relay command I am passing this action this func delegate which returns a spool and then I am passing this cane executes gauge parameter and then I am assigning these values in here in this constructor so very simple c-sharp logic and this logic I have explained you in my previous lecture also then I have a can execute method defined in here it's the generalized can execute method which just checks that if it's null if it's null it returns true else it returns a can execute parameter and then comes the real part so this is an event handler can execute change the moment we implement this item and interface this event is implemented right but in my previous lecture we have not used this event that's because we don't we didn't have any had any condition that time to check for now we have a condition that we will type something on on to our text boxes and then that will be indeed enable our button now this can execute chains as a event called as the query suggested so if you put a mouse over you query suggested it shows that it is a event and it says occurs when the command manager detects conditions that might change the ability of a command to execute so whenever I'm typing something on to my textbox this require a suggested event is in turn waste and this will in turn raise my can execute changed inter fictive can excuse changed changed event of my command class okay so this is a very simple logic in here okay only you just need to implement this recovery suggested event right okay and then comes the execute part so I explained this execute part in my previous lecture also so just I am doing nothing I am just executing the action which I have defined in here so this is the generic form of the command what I have defined now the real command will be defined onto the view model so let's go to person view model again and let me have command or define for the submit action so now since this video is becoming long I am just pasting this code here so this might submit command it says it doesn't find this I command interface so let me have the name space windows dot input and you can see in here there are few errors in here that's because I have not used the correct name spaces I am not define these submit execute and can execute methods so let me define these methods in here so let me paste them you can see I have my submit execute in can submit execute which I am passing in here so all this submit execute does is it adds this person object on to this person's collection so where is my person's collection hits the observable collection right and then this can submit execute what what it does it checks that if the string is null or empty that means if my textbox is null or empty and similarly checks for the other textbox also so it returns false if it's it's empty or else if it returns true so when I will type anything on those both the text boxes then only it will return true else it will return false so that will disable my button okay did we save this now and let me go to the simon part of it and let's bind this submit command on toad on - over button so let me have command binding and let me give it submit command because the name of my command is submit command okay similarly we we need to give any source to this item source right so let me give the source let me bind my person's correction okay so what is this person's it is the collection class of this person class okay and let me now save this and run this application let's see if this application runs or not so let me try to run this you can see my application is developed in here did my type John let me type do let me submit it you can see nothing is happening that is because my examine is not aware that data context of this view is view model or tzemre does not have is not aware that data context is view model we have just defined the key for few model but we have not applied this key anywhere so let me have this thing paste it in here so what I am doing I am just to this in grid I am just setting the data context to person view model and this person view model key is defined in here okay let me try to run this again so let us run this and you can see now my application runs perfectly you can see the submit button is not enabled it will get enable only when we type anything here so let's John Smith let us lose the focus and here comes the submit button enables itself so John Smith is added ok now this a slight problem in this application now let me delete this and the moment I press a tab you can see John is or John is getting lost right and my button is disabling itself so there's some error in my application right can you guess why why is this error that's because it's not always necessary for you to update the UI now the moment I type anything say suppose I am typing in here virata and let me type in here Koli submit is enabled where our code is added right now the moment I delete this again my UI will notify the model that this has been changed so it will update itself right so this is a bug in my system so why is this coming that's because I am notifying through this property so there there are certain scenarios where we don't need to use this inotify property change interface method right so for the modern classes we do not need this I notify property change method so let me have this gone from here similarly let me have this gone from here so the moment the reason why I explained you this at the last is because you just you know if I would have developed this application without using this so there might be a confusion in your mind that why I am not using inotify property change interface since this is the base of mmm pattern right so it really depends on your requirement what do you want to achieve if you want to notify your UI then it is fine you need to implement this interface if you do not need to implement yeah that means notify the UI you can skip this part so let us try to run this again now you can see let's at Barratt in here coley and we're at coleus added right now let's remove this Virata ok the moment I have removed my application is gone back to the original state but we're at Holy has been added in here ok let me act now his friend Rohit Sharma and you can see Roshan wise at it now for internal for international audience we shall mine were not holier Indian cricketers so let me have can see just for international audience so let me add Brad Pitt here you can see Brad Pitt is in married I did so this whole application is developed using MVVM pattern and also I mean forgot to mention one thing that in the constructor of this person view model class I have initialized this person in persons right this person is the person class so we were using only the person variables so I have initialized this person here and also this observer collection okay if we do not do so will get error so let me comment it out and let's try to run this again now and let us see what happens you can see I am getting a null difference exception and says check to determine if the object is null before calling the method so before calling this class or entire view model my person is not initialized okay so for that you need to initialize these persons right okay so let me try to run this again now and you can see it's working fine you can see it's added right so I had a model I had a view model I had a view okay and I have it I had a separate folder for commands just to make you understand so this is the normal terminology what we follow we try to separate a generic form of commands from view model okay we can define the general structure of this command into this view model also but that will confuse the audience right so generally what we do we define the generic command in a separate folder and the implementation of that command is done into the viewmodel okay so that's it guys for this lecture if you have any doubt please leave a comment below this video and thank you so much for watching this video patiently if you have any doubt please leave a comment and please do subscribe to my channel thank you so very much

Channel: DotNetSkoool

Views: 70,972

Keywords: C# Training, DotNetSkoool, WPF Training, WPF Tutorial, MVVM, MVVM Demo, Mvvm application

Id: 0IKOphciSZo

Length: 28min 41sec (1721 seconds)

Published: Sun Sep 11 2016