C# WPF Tutorial #13 - ObservableCollection with ListView

welcome back everyone this time we are using an observable collection to populate our list View we'll be using the same xaml from last video so go ahead and copy this down if you don't have it and then in the code behind we need to clear all of our handlers out because we are not going to access the control directly anymore okay now as a quick recap we have an add method a delete method and a clear method that these buttons represent we have a text box and the idea is when we add something to this text box and push the add button it adds an entry into our list view we should be able to select something in our list View and press delete or we can press the clear button and clear our entire list view in the last video all of these operations manipulated this control directly through using its name in the code behind and accessing its items collection here but instead this time we are going to access the items Source property and use a data binding to bind it to some collection called entries so if we remember back to the tutorial on data bindings the first thing that we need is some data context and instead of creating a view model we are going to use the code behind which is this to be the data context so now this knows where to find this collection entries but it doesn't know know what it is yet so we need to actually create the collection to do that we need a full property so I'm going to say profitable tab tab but instead of a string like we did in the previous data binding we're going to use an observable collection of string I'm going to call that entries per case entries and that is because the item source is a collection and we don't need to use a list but instead we need to use an observable collection so the UI can know how to change so if we take a closer look at observable collection you see that it represents a dynamic data collection that provides notifications when items get added removed or when the whole list is refreshed so if you watch the First Data bindings tutorial you remember that we implemented an interface called I notify property changed and then anytime this property was set we had to say on property changed well the observable collection does that for us and it also does it on any list operation including add and remove and clear and refresh all of those things are built into the observable collection so we don't have to check to see every time something happens to the list it will find that for us and then it will notify the UI automatically also if we look at observable collection you'll see that it uses generic argument at T meaning this doesn't have to be a string we could have an observable collection of int or really any object it could be a model that you created yourself making this even more powerful but for now for Simplicity we're going to stick to the basic string so now we're almost ready to roll we have a data context we have an observable collection entries and the list views items source is bound to that collection now before we get going we actually need to initialize this collection we could do it here or we could do it in the Constructor so we need to say entry into the observable collection of string that way this is not null when it tries to get set so believe it or not that's all we had to do to get a collection in code that we can use any way we want load saved from a database or a file but also the UI will respond to it automatically without having to call our control directly so they can be programmed in parallel and tested independently I just realized I messed up a little bit and I'm glad that I did because I can point this out so I initialized entry degrees after initialized component and that's not going to work we need to put this before initialize component because this is what is going to hook all of this up for us and if we initialize this after then our UI is not going to respond properly okay so let's do our operations now and since we're focusing on observable collection I'm not going to use bindings for the other UI controls I'm just going to call them directly for the sake of time and the fact that we've already gone over that so now for add anytime that we add to our collection it's automatically going to add it to our list view we just need to say entries dot add our text box text so that's something in here and press add it's going to add to our list view simple as that now delete can get a little bit more complicated and we're not going to go into it very much but I do want to make you aware of it so if we look at our list View and we look at our selected item property you'll notice that here we don't have access to selected items so we could say selected item is bound to some selected item property that we could create here and we could fire I notify property changed and we could use that binding to delete from our collection but there is no selected items property so we would have to create our own sort of extension to allow us to bind selected items and delete from The Collection that way for the purposes of this tutorial focusing on our observable collection we're just going to call the control directly and then use our collection to remove it since we went over all of the methods of getting the selected items in the last video I'm just going to show using selected item for this one and we're just going to know that we have a string selected item and cast it as a string because we're using an observable collection of string the selected item is always going to be a string so we can assume that this is going to work for now and then all we would have to do is say entries dot remove select an item and this will take care of removing it from our collection and from removing it from our GUI so let's fire this up and add a couple of entries and now when we click one and press delete not only does it remove it from the list view like last tutorial but it also removes it from this collection in our code which means we could immediately then update our search or our database or whatever that we might have that this relies on so now the delete's working I'm going to touch on this one more time we are calling the control directly here instead of using a binding but honestly it's not that big of a deal because the GUI controls selected items property is a GUI specific operation now if we used the gui's list internally to do our business logic we would cause all kind of dependency issues but to know what is selected on the GUI we are always going to have to access the GUI control because that's what it is it's the user's GUI selection now so we still have these separated logically into the GUI specific and the business specific logic and if we used a pattern down the road we could leave the GUI logic and the code behind and put this logic in a view model which would be our context so I wouldn't worry too much about this right now this is more of a how do we make our code better in the future thing this is actually a pretty decent way of doing this right now okay and we saved the easiest for last because all we have to do is say entries.clear that will clear our observable collection which will then clear our GUI and we clear and they're gone so to recap instead of using our list views internal items collection instead we created our own observable collection and bound it to our UI that way we have separated logically our collection with our UI decoupling it and making it more manageable in the future and for common operations like if we needed to search our list to keep things fresh I'm going to put list view aside for now and we're going to go back to GUI layouts and learn about the stack panel control so thanks for watching everybody I do appreciate you if you have any questions please feel free to ask happy coding and as always until next time take care

Channel: Kampa Plays

Views: 19,080

Keywords: C#, WPF, ListView, ObservableCollection, ItemsSource, Collection Binding

Id: qqJUg-HXV3c

Length: 8min 5sec (485 seconds)

Published: Sat Feb 04 2023