List Vs ObservableCollection in WPF

hey guys so in this lecture we will learn that why do we use observable collection in WPF and not a normal list in WPF now many of my subscribers have asked me that why do I use observable collection instead of list in my mmm application what we made it earlier so I decided that we would rather make a practical demo to show why do we need of the row collection in WPF and not a list in WPF now remember guess that for this video you need to understand that what is a inotify property change interface in WPF it's not directly used in this demo but I will be referring many of things from that video too right so if you have not watched that lecture please do watch that lecture once again okay so let's begin with our lecture now the role of observer collection WPF is for maintaining collection of objects just like a list or generic list maintains collection of objects in when forms web or console of applications now many of you have would have worked with web applications of inform application or console applications right there if you have to maintain a list of students you would have made a generic list of students or a generic list of customers right so this case does not work in WPF that's because WPF UI constantly needs notification from the code-behind or from the from your code so rather make rather making it more complex let's quickly jump onto our demo we will see the the demo how it's working and then we will come back to our slides so let's quickly jump onto our demo so here I have made a application which is called as list versus observer so let me add a new class in here so let's add a new class and let me make it a player class okay okay let me make this class as public class let me just add two properties it says ID and then let me have one other type of type string and say its name okay so I have Italy a player class and it has two properties ID and name okay now let's go to the code-behind of this last and remember I am not using any mmm pattern just to make this video as simple as it it is and then let me make it a list of my player class so I will store my players in here so it will be called as players equals new list of players okay so what I have done I have used a normal list of my player class okay just as we do in web applications or console applications now let me make a method which will get me the list of players so it will have written type of list of player and it will say name is gate player okay so I have some pre typed code with me so let me paste it in here so I am adding three players into my method now into my list okay and then I will call these three players using this get player method okay so first player is Ronaldo second player is Messing and third plate his name or the ID is one two and three okay so a very simple collection of objects okay the object is player and the instance of those objects are Ronaldo Messi and Nima now let's go to my UI and let me make a UI first okay let me change this to canvas just to make this video as simple as its it is possible now I have some pre typed code with me again to make this video as short is as it is so I will paste this code in here and then I will explain you one by one what I have done okay so okay so I have a list box in here you can see in here right let me make this window a bit more big so I have a list box which is highlighted in here so this list box teams player the itemssource property is responsible for binding anything to the list box combo box or ListView okay so I am using the mark-up as binding the height of this list box is 200 and width is 300 okay so if you have not if you if you are not familiar with what is a data template so please go and watch my data template lecture so data template is something which is responsible for the objects to be displayed on to the screen if you do not define a data template it will just give a fully qualified name onto your screen so please go do watch my data template lecture if you are not familiar with data template so for displaying any items on this under inside this list box I am using a data template and how do we do declare a data template inside the list box or ListView we define it as a item template okay so inside this list box I have defined a data template and inside this data template I have a stackpanel okay so I have stackpanel inside which I have two text blocks one is one says ID and the second text blocks I bind the ID property of my player third text block I have defined it as name and then I find the name property of my player class and then I close my stack panel then I close my data template and then I close my attempt template and then I close my list box so then I have button which says act player okay and the event handler of this button is button underscore click so I hope this is clear to you so I have already generated the click event of this button so when we will say any add player we will add a fourth player with with my three players okay so since I have bound my ID and name to my list box all these player should be displayed when I run the application and for to do to do that I just need to set my data context and remember data context is also very important topic and if you don't know what is a data context please do watch my lecture on data context to okay so I am just setting up the data context to this method rather than a class or object okay so I am just setting this object so whenever this application will run this get player method will automatically fire okay so because I have set the data context of this get player method to my data context okay so let us run this application now you can see when my application runs ID is one name is Ronaldo it is two name is messy ideas three name is Neymar okay and when I will click this add player a new player should be added in here but I have not written any logic to do so right so let us add a player when I click on this add player button so we'll just say players dot add and I will say it is a nuclear so and then I will initialize this player s ID is four and name equals bail okay so whenever I will click on this add player button my player or I will say in Gareth Bale should be added on to my list okay now let us try to run this application and see if we are able to add the player on Tovar screen so let us add a player and you can see nothing happens okay so I will explain you the reason why it does not happen a bit later first let us try to debug and see if this Gareth Bale is going onto our list or not okay so let me have my debugger in here let me run this application let me click on this ad player and you can see now you see the players count s 3 okay so my list is already loaded with three players okay now let us try to move forward and you can see now my player has been added so this players list should become four and you can see the list of players has become 4 all right but when I go to my application there are still three players in it so can you guess the reason why it is happening that's because we are using a normal list in our application and WPF is not aware that how to notify the UI whenever a new object is added on to the list okay because this list is not notifying my UI so internally there is a object which is added on to the list but it is not notified on to the you I so what's the answer of this problem the answer of this problem is also recollection okay so let me change this thing to my observable collection and I don't find any observable collection in here that's because I don't have system start collections dot objects model so please remember that this observable collection is present on system dot collections dot object model namespace so I am using this namespace now and then I will just say change this to new observed collection and change it here okay now let's try to run this once again you can see now let me add a player it goes to the debugger let's see the initial count it is three let me move forward a new player is added get a billion on the list the players count has become four and let me now go to our application and you can see Gareth Bailey's I have added so this was not possible with a normal list okay the moment you add more players and Gareth Bale is added on to the list okay but if you change this to this to list your players will be added to the collection but it will not be notified on to our WPF screen okay I hope this concept is clear now so why do we use lists why we do not use lists and why do we use AWS or well collection so let us go back to the slides and then see the remaining of the points so only difference between a list and observed collection is when object is added to or removed from an observer collection the UI is automatically updated so this works in the same scenario as we it was working with inotify property change interface remember if you do not use inotify property change interface with the normal properties it will fail to update the UI at this I have shown in my previous demo also so if you are new to it please do and watch to it so the observer collection is present in system rock collection dot objects model namespace please remember because it is always fast in the interviews when binding to an observer collection WPF automatically adds a collection change event handler to the observer collection events so let me go back to my application let me browse to the definition of this observer collection okay and you can see it implements this I notified collection change interface and I notify property change interface so the moment you use observed collection with your list you don't need to explicitly use identify property chain interface or inotify collection chain interface okay and you can see there is a collection change event handler then a property change event handler defined inside this observe collection so Microsoft has already done this for us okay and this is what is mentioned in our slides so I hope the concept of observer collection is cleared so thank you so much guys for listening if any doubt please leave a comment below and please do subscribe to my channel also I have a every page now so please do like that page for latest updates thank you so very much

Channel: DotNetSkoool

Views: 32,359

Keywords: C# Training, DotNetSkoool, WPF Training, ObservableCollection in WPF, WPF

Id: YW3gq-zyzoE

Length: 13min 35sec (815 seconds)

Published: Sat Jan 14 2017