C# WPF UI Tutorials: 03 - View Model MVVM Basics

[@AngelSix]

My Setup & Recommendations www.amazon.co.uk/shop/angelsix

[@YadigarM]

Some Time Points 5:00 Types with Enumerators 17:00 Task 21:00 PropertyChanged.Fody Helper 25:45 BaseViewModel Class 29:30 ObservableCollection (is a list with Inotify property) 37:55 Command (is like method for UI) 42:20 Action (is a function with no parameter and no return value) 48:35 Main ViewModel (that holds all other VMs) 57:08 Style Binding

[@TheMorrogoth]

For those who had an issue with following this when adding the NugGet package "PropertyChanged.Fody" and adding [ImplementPropertyChanged] to "Class1.cs" - This is what you do now: 1. PropertyChanged.Fody: When adding this and notice that "FodyWeavers.xml" isn't created - Just add an empty XML file named "FodyWeavers.xml" and add this code and save: 2. [ImplementPropertyChanged] - Just don't add it. Its obsolete now and useless. This part you can just skip! These tutorials are VERY helpful! You def are helpful man!

[@AngelSix]

Your welcome

[@asdasddas100]

Glad to see someone is making the long videos. People actively avoid making them but I like them because they usually don't skip over crucial details. Thank you for this mate.

[@AngelSix]

No problem. Yeah I like to show the whole process, not just snippets. That is what so many others miss

[@gregorymaniatis1401]

You can still get the Fody package(s) to work. Just install the same versions used in the video, namely: Fody v 1.29.2 PropertyChanged.Fody v 1.52.1 It makes it easier to follow along with the video if this is all new to you.

[@mlomb_]

I like how you focus on 'I'm going to teach this' and not on 'I'm going to make a 30 minute video' I like to watch long videos and explain every detail, in addition to exploiting techniques to code fast, like double click and and Control shift selection etc becomes much more enjoyable. Keep going!

[@AngelSix]

Thanks. Glad you like it :) Plenty more coming

[@timomuller9392]

yes this is true.

[@ernie_hudds]

This guy is actually very good at explaining the things that you are thinking in the back of your mind when you watch 99% of other tutorials. Explaining why things are the way they are. Good work, keep it up.

[@palakshavikas9855]

Luke is just amazing. He has been uploading very best quality videos. If you can please consider donating patreon.

[@jannickbreunis]

The transformation from the previous tutorial to this is absolutely amazing. From bad architecture to this good architecture: great! Not the main purpose of the video but one that is very important.

[@Kyrathos]

To anyone watching this in the future: i tend to pause the videos, trying to understand what just happened, doing it myself. I recommend to you: do not do that with this video. Watch it to the end and then redo it. The whole concept needs a lot of parts to work, and if you stop half way through you are missing pieces to redo the content on your own. That said: these are by far the best tutorial videos on wpf on the internet. Insanely well done and i loved that it just assumes you know C# and doesn't waste time explaining trivial stuff.

[@bryzor9244]

aint feeling that, how are you suppose to watch 80 min of a video, without takin any take on

[@ViralVideos-tt4sr]

Your start-to-end example is awesome! Many KZbinrs don't understand that we need these like full videos, without any edit, even if you make a mistake in it, so that we can learn how to debug. Wonderful, intelligent tutorial, I have become a fan of you because of this video!

[@NullReferencer]

In case you're watching in 2023, [ImplementPropertyChanged] has been replaced with [AddINotifyPropertyChangedInterface].

[@marekstefanecofficial]

Thanks a lot!

[@NullReferencer]

@@marekstefanecofficial np

[@DeepakAggarwal77]

This series is outstanding. The best part here is the mentor who seems to be a professional developer with a lot of experience. We find few videos by professional devs on web. Thanks Luke :)

[@AngelSix]

Thanks, glad the videos are of use

[@abasszeros]

If you had the same problem I had with the Fody change the [ImplementPropertyChaned] to [AddINotifyPropertyChangedInterfaceAttribute] 'ImplementPropertyChangedAttribute' is obsolete: This attribute has been replaced by AddINotifyPropertyChangedInterfaceAttribute.' Great video as always ;)

[@danielbancsi3677]

You don't actually have to add an attribute anymore.

[@수없음알-m4x]

In South Korea, there are not many companies using WPF in C#, so there are few educational institutions where you can learn WPF. However, I am very happy to offer it for free on your KZbin channel. Thank you :)

[@StarDrawings]

Hi, so I am learning MVVM on WPF, and on 22:14 I've done the same procedures of installing PropertyChanged.Fody on .Net Core WPF. And it didn't work as the video shows. Is it because it has changed something during these years? or .Net Core can't use PropertyChanged.Fody ?? (Edit) As I researched, It is no longer needed to have [ImplementPropertyChanged] in the Code.

[@KrzysiekDerkowski]

Thanks for these, I really appreciate the little tangents like taking a few minutes to do a basic ViewModel with your own INotifyPropChanged to make the concept simple to grasp before jumping into something like Fody. I think you strike a really good balance between introducing practical wpf constructs and moving through these fast but explain it along the way with simple examples. I'm looking forward to finishing watching these entire series.

[@AngelSix]

Thanks. The first 3-4 videos are basics, after this we ramp up pretty fast. However I do plan to do some true basics of WPF for those without any C# or WPF knowledge. I kind of made these WPF ones for experienced developers who simply have no WPF knowledge. So if you have solid C# experience you should be fine, but if you are still learning programming in general they may start to go a little fast, I do plan to do simpler videos though in the future

[@feralpapertiger]

The syntax for CanExecute at 41:06 is: public bool CanExecute(object parameter) => true;

[@zohar127]

Thank you for taking the time to produce these videos and explain in detail all of the things you are doing. I'm kind of just getting started in the WPF world and these videos, this one in particular, have been immensely informative. I have seen countless tutorials on MVVM and this is the only one that explained not only what it does, but why it does it, and provided good examples both in code-behind, the VM class, and the XAML. I'm currently on a design team at a company making our own software to do some work for us. Our lead programmer is an old-school guy who uses winforms and his designs are exactly what you would expect from someone who doesn't care about presentation at all (his UIs are impenetrable to anyone except for him and a few select people that he has shown how to use). Our current software project is a huge improvement over his older designs, but we're still stuck on winforms and hitting every limitation of that format. I'm the only person on the team exploring advanced ui techniques and I am hoping to create a basic framework ui that I can convince the team to port our project into. Key to doing that, is properly setting up MVVM because the old project is practically welded to the UI. Thanks again for these awesome videos!

[@AngelSix]

Glad you like the videos... and good look trying to get some movement on the progression of your dev team :) Wishing you luck

[@zohar127]

AngelSix Thank you! I do have a quick question about mvvm "rules" so to speak. One of the things our programmer has on all of his solutions is a "functions" class. It's all C# but he's used to VB so he calls them functions. I've been following your example and created that async counter task on a piece of text on my ui. With the data context of the window set to my windowVM all works well. I went ahead and created another method on my VM that implements Icommand to show a message box. This works well. After I did that though I started wondering how many methods I should have in the VM of the mainwindow. Because the async counter on the label directly effects a ui element, it seems to make sense to have it in the VM, but the message box is essentially a stand-in for business logic (where our programmer will want to store all of his methods in a separate class to reference them) so I created a class just for methods like that. In the VM I instantiate my methods class and basically point the icommamd to it. This works for the message box because it's not dependent on a ui element. However, if I were to do this for the counter text it does not work because the data context for the ui is set to the mainwindowVM. Is the VM just there to house properties for the ui? Can a window have more than one data context? Should there be methods in it that relate just to ui tasks or no methods at all? How do I expose properties in the VM to methods in a method class and let the method change those properties and trigger Inotifypropertychanged? Sorry this question ended up not being too quick. I'm going to keep watching your videos and hope that it's something that is covered!

[@AngelSix]

So just think of the VM as the non-visual way to represent the UI... that being said it means your VM should be able and have all functions, methods, properties (everything) the view it is bound to needs to do what that view needs. That means if your main window as a UI element needs the methods it should be in the VM, or the VM has a method that then calls the helper classes to do it. The key is remembering that the Main Window should be just the window itself, the outline, the border, the system menu, title etc.. so that VM should represent only that part of the UI. Does that make any more sense?

[@zohar127]

AngelSix That definitely does clarify it for me. Thank you for taking the time to answer my newbie questions.

[@BrainSlugs83]

@5:08 -- No, "enum" is short for "Enumeration" (not "Enumerator" or "Enumerable" -- those are classes that implement IEnumerator / IEnumerable respectively, and are used for traversing collections).

[@sarahahmed4875]

Thanks for the amazing tutorial. Have to say, I had to watch-and-do it thrice (because you have to admit, mvvm is a little bit hard to digest at first with the Commands and Binding and all the jumping around). I also took small breaks in between the tutorial and read a few articles about mvvm during my breaks. But it was all worth it!! Knowing that I created something similar to the WIndows File Explorer and understand all the code too, it feels great. Thanks again!

[@AngelSix]

Oh yes definitely, MVVM is confusing as hell for a while. It is definitely a very good way to do things though. The WPF series I'm making is not so much for beginners more about just WPF but people who know the other stuff. I do plan to make beginner tutorials more and expand the current C# tutorials I have to cover more basic concepts however the WPF UI series is simply in demand right now so I have to keep doing those

[@sarahahmed4875]

AngelSix Yeah it's slowly starting to all make sense, you teach really well :) Also, are you going to include a mysql database into this chat app as well?

[@tryrabbit]

I just did this using .NET 5, worked well and I *very* much appreciate your video, help and the thought that went into making this. The images needed to be referenced slightly differently however. Inside the HeaderToImageConverter, the BitmapImage is constructed so (my namespace/assembly name is WpfApp3): return new BitmapImage(new Uri($"pack://application:,,,/WpfApp3;component/{image}")); The only other thing I needed to do, which the PropertyChanged.Fody package did mention was to remove the other XML tag (can't recall its name); the only tag you want to have in the .csproj for both the Fody and PropertyChanged.Fody packages is the all. Thank you!

[@panosbith4582]

A small correction at 26:41 the attribute used is now obsolete, you can use the AddINotifyPropertyChangedInterface instead.

[@AngelSix]

Yeah just remove the attribute all together now, don't need to add back the AddINotifyPropertyChangedInterface either

[@parko1965]

At last an explanation of MVVM I can understand.

[@MrShapronForU]

I've searched alot of time a good tutorial for mvvm . and you're the best. Thank you man!

[@AngelSix]

Thanks and your welcome

[@IronTeddyBear]

25:01 I'm using a recent version of Fody, and the attribute to use is now [AddINotifyPropertyChangedInterface], because [ImplementPropertyChanged] is now obsolete.

[@Living4Memes]

You know that you see the guru when after 20 min of coding his project runs without any mistakes and exceptions.

[@orealexander8073]

Thank you so much, I love your tutorials, a little long, and very fast but great. thanks again

[@AngelSix]

Glad you like them :)

[@tunAliUTube]

Hi. I'm now able to get hold on the MVVM concepts thanks to your video. However I'm still can understand a few. If you could help me to clear it out, I be grateful. 1. In MainWindow.xml, the following is used: I taken that this is supposed to bind the TreeView 'expand button' in each TreeViewItem to a command. 2. However it's look like DirectoryItemViewModel.IsExpanded() is not a command rather than a simple method. DirectoryItemViewModel has a command call ExpandCommand. in DirectoryItemViewModel Constructor, DirectoryItemViewModel.ExpandCommand was casted into RelayCommand and DirectoryItemViewModel.Expand() is passed as argument to be used as Action Delegate. 3. Thus, because in MainWindow.xml, IsExpanded (as for DirectoryItemViewModel.IsExpanded()) is used for binding, the DirectoryItemViewModel.ExpandCommand has never been utilized. 4. The code just work because DirectoryItemViewModel.IsExpanded() do the necessary job including calling DirectoryItemViewModel.Expand() when needed. So, could it be that this project does not utilized ICommand Binding in MVVM? I'm really trying to connect the dot here and hoping you could help me. Thanks.

[@AngelSix]

1. Correct 2. It isn't a method, its a property. So it's bound just like you bind to any other property MyProperty {get;set;} 3. Expand is fired if IsExpanded property changes to true. There is also an ExpandCommand should any binding want to explicitly call Expand, without setting IsExpanded to true. But it isn't called in this application no. It is because in a view model you should not have any public method without a backing ICommand so it could be bound to 4. Answered via 3

[@JJayToKlamca]

I got a book about MVVM and after reading around 100 pages I didnt really get the idea of how they work and how to use them. You explained it to me in 10 mins (or less) in the video (the example Class1 was very appealing). I guess if you wrote a book it would be 10 pages long :P

[@AngelSix]

Awesome. Glad it helped. I'll have to write a 10 page book now :)

[@macrixxon]

I honestly think this is the best tutorial on ViewModels. It definitely outstrips everything else I have investigated, and I have done a lot of that over the last few days. Thanks a lot for such an easily understandable video!

[@AngelSix]

Thanks. Glad you liked it

[@kayodeokusanya9633]

AngelSix thanks for the top of the line WPF tutorial. this is epic, learnt a lot from just the way you write code with proper documentations. Awesome. also just wanted to put out there that the PropertyChanged Fody has changed some of there implementation and depreciated "ImplementPropertyChanged" which was replaced with "AddINotifyPropertyChangedInterface" also one will manually have to create a fodyWeavers.xml file. with the same values as previous. Updating this video may be great for other Learners . Thanks once again #Thumbs up....

[@AngelSix]

Kayode Okusanya yeah I'll perhaps add it to comments at top for the Fody changes. Glad the video was useful for you

[@nayakashu]

The WPF series has been quite interesting till now. Getting started with MVVM seems very exciting after watching this video. I am following your WPF videos to a great extent. I will wait for more such videos from you. I would definitely appreciate that you are putting great efforts in bringing out high-quality content and that's for free. Related to this video on MVVM, I would like to know more about the RelayCommands and where does it stand in the MVVM wrapping. Thanks in advance! Will keep watching and learning!

[@AngelSix]

Ashutosh Nayak I'll explain more about ICommands as soon as I use them again in a video shortly

[@nayakashu]

Thanks for replying to my question. I was trying to make a TreeView using view models. How can I add checkboxes to the children at a specific level of the TreeView, let us say for every second level child of the root TreeViewItem in the TreeView? Thanks in advance!

[@AngelSix]

You would want to add the checkboxes to the main template, so its technically there on all. Then you bind the checkbox visibility to a view model property that you add to the tree view item view model. You then have that boolean properties set to true based on whatever logic on you, that you do inside your view model

[@DavidMattiuz1]

Enjoyed the first two videos in this series tremedously - spent a long time searching for something that really broke things out the way you did with explaining XAML and WPF in general. Definitely appreciate you having taken the time! Perhaps because I'm new to C# and haven't touch VisualStudio in (15+) years, but.. I started to get a bit lost in the later portions of the second video, and this one felt like you were approaching warp speed with bouncing between different files. I know you said you'd be plugging along with converting your app and taking folks along for the ride to explain things, but is there any chance you'd be willing to do something with a really dumbed-down MVVM introduction? As I said, your presentation skills are spot on but for someone who's out-of-touch with using the built-in .NET goodies it would be good to see something a little more vanilla to cut my teeth on. (If any of that makes sense) Thanks again for a great set of lessons! I'm sure I'll be revisiting the series once I get my head on straight when it comes to the basics!

[@AngelSix]

Sure thing. It is hard to explain why and what for in MVVM without enough data. I will either do it in the next few videos once the login screen has some background data (like a dummy client to sign into the server) or in the near future when it has real data. Then I can explain and show making a page with a view model and without, and you can see then the real benefits of it, and the differences. I kind of cover it in the treeview videos showing one example without and one with, but its hard to grasp as that is still kind of a "dummy" example. I'll cover MVVM in more detail either way shortly

[@gossiz]

Absolutely superb tutorial. So informative, many thanks for your hard work.

[@AngelSix]

+Phil Lloyd no problem glad you enjoyed it

[@AlejandroHernandez-hx9mh]

I have to tell you that you are amazing as a teacher. You begin by the easy and introduce the concepts until the knowledge born by itself

[@AngelSix]

Thanks. I'm really glad I can help

[@AlejandroHernandez-hx9mh]

@@AngelSix Can I try to make this tutorial in spanish? I think there is a lot of people doesn't have information as good as the one you made

[@tlsmex]

your the bomb. best I've seen to get some comprehension of how and why

[@AngelSix]

+Terry Stanley thanks glad it's helpful

[@tunAliUTube]

This is a great tutorial for MVVM Data Binding. I suppose it was not covering Binding to Command. I track down the code which now I have good understanding, thank to your video. I found out that the RelayCommand class was not utilized even though we wrote the class. Thus some item in DirectoryItemViewModel that should be working with RelayCommand was not utilized. These include: a. ICommand ExpandCommand property. b. bool CanExpand property c. "ExpandCommand = new RelayCommand(Expand);" code in DirectoryItemViewModel Constructor In this tutorial, there are no command utilized even the above code has been wrote. The expand action was bind to the IsExpanded, a property of DirectoryItemViewModel. This still work great, unless if we have concern on View Model exposing its public property rather than via its command. I'm ok with this. I'm only just want to learn if there are ways to do the binding with a command. I have search other tutorial, and seem that they doing the same. If I redo the RelayCommand class with the following: a. rewrite CanExecute(). Rather than always return true, the method call a View Model method that handle the check. b. rewrite the RelayCommand CanExecutedChanged EvenHandler which add and remove delagate from CommandManager.RequerySuggested. But how do bind the TreeView IsExpended with the command? Is there any special code for that? I been seing some tutorial quoting on creating "Behaviour" for such command binding. Hope you can help.

[@AngelSix]

The IsExpanded is bound to a boolean property as thats how it works. You bind Comamnds to things like input bindings, buttons etc... We create the RelayCommand and effectively the ICommand for every public method on the view model so that both UI can bind to the command, and code behind can just invoke the method. No need to try and bind IsExpanded to a command, binding to the property is correct and how its naturally done in that instance too

[@tunAliUTube]

AngelSix oh good then. I though because the the action happen as we click the TreeViewItem 'expanding button', it should be done via command, not property. Thanks.

[@Min3vidz]

I'm able to understand most of it, but I think that in practice I'll still need to lookup a lot of keywords. Thanks for making such a great and lengthy tutorial!

[@AngelSix]

Thanks. Yeah I plan to do beginner WPF tutorials eventually too, this is more of a begineer WPF for people that already know programming, MVVM and C# quite well, they just don't know WPF.

[@Min3vidz]

Ah I see. I'm currently transitioning from 1 year of java experience to C# ,WPF and MVVM, so thanks for the effort! :)

[@conkerconk3]

if you made a project that got your computer's CPU usage (say as an integer between 0 and 100), but you were getting that in a task or another thread, how would you go about updating the view once a new CPU usage value has came in? how you get the value is really up to how you program it, but how would you actually notify the view about the new value? i guess you could pass the viewmodel into the model that fetches the CPU usage, but that doesn't seem right. Or another way, maybe by having an interface called ICPUUsage with a CPUUsage property, and your viewmode inherits that, and you pass "this" into the CPU usage model's constructor maybe? or maybe instead of ICPUUsage, it would be called ISystemInfo, which might contain more than your CPU usage (ram, disk, etc). So your viewmodel just inherits that, and those properties will update the view, and your model which fetches that info (say on another thread) will have a reference to ISystemInfo (via that constructor trick, dependency injection i think) and it would set those properties. Im going to assume thats how one would actually do it, although im not sure if properties are thread safe. akaik they are though so you probably wouldn't need to do any extra steps

[@f1nal1ty]

For anyone getting a headache using a newer Version of Fody. The [ImplementPropertyChanged] Tag is deprecated and no longer needed. But instead you have to add (so basically the Name you gave the PropertyChangedEventHandler) into the Weaver Tags in the FodyWeavers.xml file.

[@valleykid6577]

Hey, look I'm a very experienced developer; though I've spent most of my career working on "back-end" typed things. So much in fact that I've sort of developed a hate for anything user interaction related. I've watched several of your video tutorials on WPF today, and I just wanted to extend a thank you. I've found your videos to take some of which I'm most intimidated about when it comes to user interfaces, such as feeling my lack of creativity somehow means I don't have much to work with in terms of how it looks, or how it behaves,you've let me see you break this thing down and talk about it's personality. (things like how button templates don't work the way you'd expect out of the box) While I'm certain I'll still be relying on our UI guy.. It's just really nice to see the perfect combination between something clearly scripted (or at least with a solid plan), but not edited so much that you cant see how it comes together. Through some of which I've seen today, I'm actually pretty excited to take a second look at some of this, and see if I can't get a little more comfortable. amazing work, I hope to see more to come!

[@AngelSix]

Your welcome I'm glad it was helpful :)

[@Pdude2k9]

Top level stuff, man! Thanks for making these professional tutorials.

[@AngelSix]

No problem, glad you like them

[@benzel5659]

Simple question, at 34:20. How come the function "ClearChildren" use a "this." statement when being called and "Expand()" didn't? They are in the same scope?

[@AngelSix]

this. is a preference I originally preferred so it is obvious where the property is coming from. It makes no difference at all and is basically a redundant bit of code which I have since preferred to not include, so just remove the "this."

[@CataRemixDj]

Hello! I cant get my head around something. So here is my issue,I hope you can help me with. I have a basic ViewModel that holds a string called Test which is binded to a textblock. PS: Im using the updated Fody.PropertyChanged public class Model : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged = (sender, e) => { }; public string Test { get; set; } } Then,in a separate file and class called Data,I have a simple function that increments an int and converts it to a string. public class Data { public static int i = 0; public static string IncTest { get; set; } public static void Inc() { i++; IncTest = i.ToString(); } } How do I update/notify the Test variable inside the ViewModel so the UI can display the changed text when calling the Inc() function? For example, when clicking a button public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); this.DataContext = new Model(); Data.Inc(); } private void Increment_Click(object sender, RoutedEventArgs e) { Data.Inc(); }

[@AngelSix]

You have bound your DataContext directly to instance so you would have to do ((Model)DataContext).Test = ...

[@CataRemixDj]

So basically inside the Inc() function I should change the Model.Test variable directly using ((Model)DataContext).Test = i.ToString(); ?

[@AngelSix]

Correct

[@CataRemixDj]

AngelSix is it considered good practice? Am I still following the mvvm pattern?

[@AngelSix]

You would typically keep your view models in DI so they can be accessed throughout your application. I do that using the BaseViewModel to try and pull a view model from DI if available. For now if it works for you though its fine. Get your application working then you can always improve afterwards

[@ИльнарБикмаев]

Thanks a lot! Friends, if you are going to use the new version Fody package note that it's not necessary to use [ImplementPropertyChanged]

[@351yt]

Should I be using AddINotifyPropertyChangedInterface in the BaseViewModel?

[@SezginAkman]

I was trying to inject the code of property changed via VS code snippets this is more fun and elegant way looks like thanks.

[@AngelSix]

Yeah no need to manually fire the events. Fody just intesects the IL code, smartly detects any properties that get changed in the setter, and adds the notify property changed to your output code for you.

[@donaldconsole9695]

My brain died watching this.

[@sarathpv4615]

Hi, Good tutorial I learned a lot. One question is, what is the use of CanExpand prop in DirectoryItemViewModel it is never used anywhere. Could explain... Thanks

[@AngelSix]

In a view model you typically have properties and commands (methods). Commands are there so UI can bind to the methods. So if we have a method to Expand, we should have a command bound to that, so if we made another UI or wanted to unit test it, we can bind to it. In this example we don't need it due to how we expand, but its good practice to have a complete view model

[@loam]

So, I installed that fody weaver thing, nothing appeared in solution explorer, and I got couple errors. Tried to fix them , then I unistalled fody, then my project went completely nuts, saying that there is no Window in System.Window and other bullshit 23 errors and now I sit and hesitate how do I those eliminate. Also, thank you for your tutorial. I've read a lot about MVVM, and didn't grasped anything, but this one video and I feel like I kinda have some conception of it. Funny thing is, today my 4th day at a new job as a programmer (like junior or trainee, but payed), and I have to deal with HUGE project written in C# WPF with MVVM pattern and some other relatively new programming approaches. Sometimes I feel like I'm at a dead end and don't know what goes where and comes from. And there's a guy who's set as a kinda mentor of mine, but when I start asking him questions he gets really annoyed, so I try real hard only to ask a question when there's no other way around.

[@AngelSix]

Upgrade project to .Net Framework 4.7.1 or 4.7.2, manually add the FodyWeaver xml file and include the

[@loam]

@@AngelSix Much thanks for the reply, will try soon)

[@loam]

So, by the way, I did what you said. They've replaced [ImplementPropertyChanged] with [AddINotifyPropertyChangedInterface]. And when I fixed that, everything started to work.

[@AngelSix]

Cool glad it worked

[@ZaHaDum1984]

This is by far the best video about MVVM with the .NET Framework that I've ever seen. Great job! But there is one thing that I still miss: How do I get Design-Time support for this, so that I can see the binded view models (with dummy default content) in the GUI-designer? Keep going!

[@AngelSix]

You will see this in future videos. We start doing design time binding and data

[@TheMohsell]

Hi Luke, I was following your video, great as usual. However, i can't figure out how does the command is hooked up. It is not referenced in the xaml, nor in the code behind. Is there any convention, default behaviour which is in play here ? Thank you

[@navdeepsingh-qn4cu]

Because IsExpanded property did the work for us. We can delete it

[@pierreortiz85]

Your videos helped me a lot. You totally deserve more subs. Thank you! I hope you keep uploading more.

[@AngelSix]

Thanks

[@kimheesoo19]

For someone who got an error at [ImplementPropertyChanged] : New version of Fody.PropertyChanged you don't have to add the attributes so just delete [ImplementPropertyChanged] and it'll work

[@gamehubby]

Thanks for this video. I like to know why you added an ExpandCommand in the DirectoryItemViewModel?

[@AngelSix]

A ViewModel should expose commands for all functions it should be capable of. Expand is one of those, however in this example we just set the Expand property directly and don't bind that to the UI using a command, but it should still be available should we change our UI or make another UI.

[@BorderKeeper]

Do you even need the Fody.PropertyChanged considering ObservableCollection fires up it's event every time it is modified? In my code I just made sure I either .Clear() or .Add() to collection on .Expand() and .Collapse() and it worked fined without me having to call PropertyChanged event once.

[@AngelSix]

If you use an observable collection then not for that specific type no, but you need it for all other types that dont fire the events

[@BorderKeeper]

@@AngelSix Cool thanks. Good to know.

[@TheAxeForgetsTheTreeRemembers]

Thank you very much for this awesome tutorial. It took me some time but I eventually managed to finish it. Adding open and closing folder images was very easy thanks to your architecture. I was thinking about how would you remove the arrow from empty folders and inaccessible ones, from the beginning? It's bugging me a little because I've already seen this in Windows itself.

[@ABCo-ABMedia]

By the way, "ImplementPropertyChanged" is COMPLETELY obsolete now - you don't need it at all.

[@krwawy5657]

What do you mean? Program will do this same without ImplementPropertyChanged or you use something else?

[@x-yl]

​@@krwawy5657 Yes, it will automatically detect that your class implements INotifyPropertyChanged. No need to do anything else.

[@ClintonVincen]

Hello Luke, Great video again, I was wondering about the nature of it being portable, you said the code can be reused and ported to different platforms (37:39). Could you tell in a little more detail as to how the C# code can be used as the backend logic, in conjunction with other UI frameworks to build a DesktopApp on Linux/MacOS. With .NET Core we have some deployment choices but its not of much use if you want to build a cross platform desktop app. Thanks in advance ..

[@AngelSix]

.Net Core is 100% cross platform so anything in that can be used in all of them. Including this view model stuff. So I'd design your entire code with the exception of the UI, in .Net Core (as .Net Core only has ASP.Net Core as any cross platform UI right now). They are getting very close now to having a cross platform UI then its going to take over the world. For now I'd use Electron wrapper running an ASP.Net Core backend to serve the UI for cross platform UI

[@supportcubexsoft1583]

How to impement checkboxes in the same treestructure... Any idea?

[@KTMFerr]

I really like your videos, and they explain well. But I think the example pick up to show the MVVM Basics is not that straight, should have focus on something that would show the logic between the properties binding, and not focus so much on the treeview code.

[@7531PETER]

How did you master your understanding of WPF (MSDN/KZbin/Personal Projects)? I'm really curious?

[@AngelSix]

Only used it a few times. Before this series hadn't used it in years. I just understand things by using them, breaking them, and the odd bit of googling to find out specifics

[@Ownage4lif31]

Here I am crying at winforms hahaa. God this makes it so easy Holy damn. Just a tad bit confusing though, I guess practice makes perfect. I just watched you do it all and hopefully when I try this myself, I will understand. Now I understand why people go down this path.

[@antoniro13]

Hi! Awesome tutorial! However, even after reading the comments, I still can't wrap my head around the Data Model. In this video, what was the purpose of creating the DirectoryItem class? Correct me if I am wrong but it seems you don't use that class anywhere in the code. But instead you only use the properties that are in the view model. I don't see the link between the View Model and the Data Model. Can you please provide or redirect me to an example where the data model is actually used, even if the same properties are in the view model? Thank you!

[@AngelSix]

This is the reason I try to avoid specific topics without context. MVVM is one of the hardest things for people to see the point of if there is no direct and large real world project as an example. I will cover this again once the fasetto word project is done and I can use that as an example of why we need data models

[@bmbul788]

to be honest, I am a starter in this field, All I knoW about WPF is the 3 videos, I am too happy to find this kind of really good done tutorial videos. I have got a problem. It seems I have done everything correctly, have done some debugging, I don't know how to deal with the problem: when I run the program, I get the C and D disks with images, but cannot extend and don't have the icon on the left side. Any help would be appreciated. Thank you

[@tunAliUTube]

Hi Luke, I having error from DirectoryItemViewModel class on "return this.Children?.Count(f => f != null) > 0;". The error description is "Invalid Expression Term '.'" which is referring to the dot prior to Count. I have "using System.Linq;" on top of the code. I'm using VS2013. Probably that the cause of error on unsupported new Linq syntax?

[@tunAliUTube]

Seem it is as what I'm suspected as I able to try in on another computer.

[@sdriver3501]

hello, is there a way to populate items like buttons starting from the center of user control and it continues in a clockwise manner? Also is there a way to construct cells(with rows and columns) in user control and then refer a specific cell to bind something on it

[@fifty5six6]

Question here. I may have missed something but I understand how the DirectoryStructureViewModel was bound to the ui. However I do not understand how the DirectoryItemViewModel was? From what I can tell it is looking to both viewmodels without any binding to the DirectoryItemViewModel. Also, if that is the case what would happen if you were to have two variables of the same name. How would it know which to use?

[@zerosandones7547]

In a real project, where do we put our resources? like the images?

[@duncanmcdonald5250]

Again, a fairly easy to follow tutorial, so thanks again. Although when you worked on the XAML I did get a little lost. A couple of stylistic questions though: 1. At 34:50 you have your "ClearChildren()" function set the "Children" member to a new instance of the ObservableCollection. Why do this in preference to clearing the existing list? I guess it might be my C++ aversion to dangling references, but it just felt "off". private void ClearChildren() { //Clear the child items if (this.Children != null) { this.Children.Clear(); } else { this.Children = new ObservableCollection(); } //Show the expand arrow if we are not a file if (this.Type != DirectoryItemType.File) this.Children.Add(null); } 2. At around 42:00 you create a Constructer for the RelayCommand class that takes and Action argument. Would it also have been prudent to make the constructor that takes no arguments "private"? Same at 46:15 with the DirectoryItemViewModel? /// /// Hide the default constructor /// private RelayCommand() { } /// /// The action to run /// private Action mAction; public RelayCommand(Action action) { mAction = action; }

[@AngelSix]

+Duncan McDonald for question 1 it's about smaller cleaner code. The way .Net handles the references there is simply no benefit at all clearing an existing list instead of making a new one. On top of that clearing a 10k long list takes longer than assigning a new empty list Questions 2 in C# if you make a constructor then it overriders and automatically hides the auto default constructor

[@wegunterjr]

So, what if don't want to use the fody weavers plugin - i can not get the full path, am i missing something? I have this in my viewModel: public string FullPath { get; set; } public ObservableCollection Children { get; set; } and this in my view XAML It shows the first level drive, but when I click expand, there are no children...

[@AngelSix]

If you are not using Fody then in your property setters you need to manually call the PropertyChanged(nameof(YourProperty))

[@wegunterjr]

got ya... that works on the set, but what about the get?

[@NCN8iveinOK]

Been working in C#/WPF for a while now, but just beginning with the MVVM pattern. In this tutorial, you put the model, view and viewmodel in the same project file. How would you work the bindings if the three components were in separate projects?

[@AngelSix]

Typically I have all of them in a core project, as your whole application relies on the data models and the view models (although you could move out the view models to another project if you really like). How you work that is up to you. Say you had the data models in Core project, the View Models in Views project. You could just reference Core in the Views project, or you could use IoC (via NInject or something) and have interfaces for your view models and any project that needs access to the view models can get them via IoC without needing to reference the actual project containing the view models. You will see in future videos this second approach as we separate out stuff into more projects

[@gamshadroshan6032]

Installed fody , but fody weaver is not there in solution explorer

[@stupid4662]

I done this video C# WPF UI Tutorials: 01 ~ 03 and What can I say I learned from this video? i think i learn so much so i confused , i dont know what did i?

[@louismaurin7234]

On the GetLogicalDrives() I have an issue :"Inconsistent accessibility: return type 'List' is less accessible than method 'DirectoryStructure.GetLogicalDrives()'" Please help

[@AngelSix]

Make sure your DirectoryItem class has public in front of it

[@louismaurin7234]

@@AngelSix Thanks but I have another issue. In Class1 : INotifyPropertyChanged I have : "'Class1' does not implement interface member 'INotify PropertyChanged.PropertyChanged'"

[@AngelSix]

Put cursor over INotifyPropertyChanged then press Ctrl + . then press enter to Implement Interface

[@louismaurin7234]

@@AngelSix And also in "PropertyChanged(this, new PropertyChangedEventArgs("Test"));" I have "Argument 2: cannot convert from 'System.ComponentModel.PropertyChangedEventArgs' to 'System.ComponentModel.ProgressChangedEventArgs'"

[@thingsinthebox]

probably best tutorial i have ever seen! so clear and perfect on the balance of details and overview

[@AngelSix]

Thanks

[@upperbit5291]

Hi Luke. Sorry, i might have missed this but is there a particular reason that in the DirectoryItemViewModel, you made the exact same properties as in the DirectoryItem class (Type, FullPath, Name), instead of just puting a reference to a DirectoryItem class in there? Is it because the binding expression would become longer in the xaml perhaps, or any other reason? I'm curious because i think i've seen that used in another mvvm project. Also my thoughts behind it, if you put a reference to a model in the ViewModel and you change any of its properties, you are making direct changes to the model itself because of the reference, whereas if you give the ViewModel its own properties (like you did) and if thoes properties are value types, you are only changing the ViewModel's properties and not the model itself - maybe you want this in some cases. I hope my question was not too unclear. Also thank you very very much for making these videos!

[@AngelSix]

It is again preference really. This is a very basic example, but in the real world your data models would not be so clean, simple or similar. I tend to keep my ViewModels separate from data models (so don't simply inherit from them) and instead pass in information and bind to them as needed. But honestly it's all about what works for your application. This is just my common style here

[@upperbit5291]

Ah, thank you very much for the quick answer :)

[@peterrottach1323]

Great Tutorial, greetings from Germany. Just one question. I don't get why we need the RelayCommand or the ExpandCommand in the DirecotryItemViewModel. I can comment this in the constructor and it still works since we have bound isExpanded. So why do we need that? However, you're doing great work! Keep it up

[@madrasmonsta5499]

My exact question is this. I think he missed using the ExpandCommand and instead directly calling the expand method inside the setter of IsExpanded. For things like Buttons maybe the command is useful.

[@end1dream]

The program runs even without the ICommand property in the view model. Where do we actually call it?

[@AngelSix]

It's common practice to expose any public method in a view model via a command so UI elements can bind to it. We don't use it here as we invoke the method itself inside the IsExpanded property but if you keep watching more videos you will see why we create them

[@norbertbraun9718]

As I put in the [ImplementPropertyChanged] Attribute I got this error when compiling the code : " Error CS0619: 'ImplementPropertyChangedAttribute' is obsolete: This configuration option has been deprecated. The use of this attribute was to add INotifyPropertyChanged to a class with its associated event definition. After that all classes that implement INotifyPropertyChanged have their properties weaved, weather they have the ImplementPropertyChangedAttribute or not. This attribute was often incorrectly interpreted as an opt in approach to having properties weaved, which was never the intent nor how it ever operated. this attribute has been replaced by AddNotofyPropertyChangedInterfaceAttribute. " So it seems to work fine but only without this Attribute .

[@AngelSix]

Thats fine this shouldn't of been included and we removed it in future videos. Just don't add that property and all works the same

[@zbigniewcwiakalski7253]

Hi ! I have just watched the whole video and I'm confused ... 1) how do I know where to put methods like GetLogicalDrives(), GetDirectoryContents(), GetFileFolderName() ? I don't know if this is silly question but why are they in DirectoryStructure class and not in DirectoryStructureViewModel class ? 2) when actually I should create ViewModel and what should I put into it ? 3) why actually there was DirectoryStructureViewModel created if we have DirecoryItemViewModel ? 4) which classes in this whole structure actually correspond to Model from MVVM ? if these are stupid question sorry ... I'm a beginner in MVVM and this is so frustrating:) help

[@AngelSix]

1. It is up to you where you put stuff. Do what works best for you. The only thing is if it is specifically to do with a view, place it into the ViewModel only. Otherwise, everything else can go where you see fit 2. You create a view model when you need to add any properties to your models that are specifically related to UI. Such as a property for when a button is enabled, a page is visible, etc... then you subclass your data model and add in your UI specific properties 3. DirectoryStructureViewModel is for a list of items, the ItemViewModel is a view model per item. The TreeView binds to the structure, the tree view items bind to the item view model 4. The Model is basically everything that isn't the view or the view model. More specifically it is usually the base class that the view model inherits from.

[@zerosandones7547]

[ImplementPropertyChanged] is now - > [AddINotifyPropertyChangedInterface]

[@PyxelBlobsStudio]

THANKKSSS bro !

[@vistalee2838]

thank you

[@orm225]

ImplementPropertyChanged has been deprecated. Could you explain the alternative?

[@AngelSix]

Or Malka yeah just remove it

[@Whoisemmanuel]

Downloaded Fody Property Changed when using the latest version It says ImplementPropertyChanged is obsolete and has been deprecated. It goes on to say a bunch of other stuff and that it has been replaced by AddInNotifyPropertyChangedInterfaceAttribute which didn't work when I tried to use it in the same square brackets, but when I update it with the earlier version you shared ImplementProeprtyChagned works fine.

[@AngelSix]

When you upgrade Fody, you have the option to override the Fody.xml file. If you chose yes, it removes the from the xml file. Easiest fix is to remove Fody and Fody.PropertyChanged from your solution, then re-add Fody.PropertyChanged and it will then ask to override the xml and update it to include the element. Remove the [ImplementPropertyChanged] and all should work then

[@bertramstier2540]

just 1h 19minutes into this (plus two previous videos): "so that's view models in a nutshell". LOOOL Love it!

[@AngelSix]

:)

[@N3rdBoundGaming]

Very thorough in explanation. I appreciate all your help. I do have a few questions. 1) at 1hr 8mins 28 seconds you have. A folder called documents and settings that does not seem to be expandable. Is this a bug? 2) do you have a video on creating framework? I know it would be similar, but trying to bind resource dictionaries from other code seems to be quite irritating to deal with. 3) do you have anything in regards to content control/user control binding? It's another thing that doesn't seem to be working in my favor. Thank you.

[@jerrygardner9445]

Nice video, but it moves at a breakneck speed that'll leave someone who doesn't already know the material in the dust. Kinda like teaching a beginning driver in a Formula 1 car.

[@AngelSix]

Yeah the WPF UI videos are not aimed at someone with no programming knowledge, simply someone with no WPF knowledge. I plan on doing more C# beginner tutorials and WPF beginner tutorials in the future

[@relliv2019]

Beginner or not, if you want to learn this, you must fast. I think he's normal, and should be more fast. Peoples will be fast every about in the future.

[@ScottKFraley]

That's what the Pause button is for! ;P I've been a dev for over 20 years, and have even done WPF w/MVVM, but since it's been a while I'm watching this as a review.. and need to hit the pause button QUITE often! (I'm typing in the code, well, some of it anyway so that I remember it better.)

[@abinashbaral3266]

@@AngelSix Waiting for those series :D, Thank you for your videos so far.......Have a good time ahead

[@DL-gx5cr]

@@AngelSix Yeah - this was perfect for me. I listened to your video at 2x speed, and it was a great refresher. :)

[@ngodiu]

Thank you for this amazing tutorial. It's really helpful, even in 2021 :)

Great tutorial! Concise and practical. Thanks, man.

[@armandoferreira1346]

One thing I would like to know is could I implement INotifyPropertyChanged in the Model instead of the ViewModel? If not then why? Something that confused me was when you were writing the view model you were mostly putting properties that already are in the model

[@AngelSix]

The notify property changed is all about the view model, to inform the UI. Thats all it is for. In this basic example it looks like the model and view model are mostly the same, but they should never be strongly bound or related to each other as the data (the data model is the model) can come from database tables directly, from third party sources, manually created etc.. whereas the view model is all about representing what the UI needs to see. So the short answer is no you should not add the property changed to the model, it is not the purpose of the model

[@infangerdaniel6714]

Your tutorial videos are awesome, thank you very much! Hope you keep up the good work!

[@AngelSix]

Infanger Daniel thanks. so long as people enjoy them I'll keep making them. any suggestions or requests on videos feel free to ask and I can always plan them into future videos

[@SaratChandraP]

Great tutorial, AngelSix! It helped me refresh most of my past WPF knowledge. I really enjoyed the transformation of the application from everything being done in the code-behind file to moving it to a application that adheres to the MVVM pattern. I have one question though, for which I couldn't find straight-forward answers elsewhere. How would you convert this tree view control to lazy load data (time consuming operation) from say a database that fetches the child nodes dynamically when a parent node is expanded? Probably show a spinner icon in place of the Expander (arrow) when data is being fetched. Can this be done without breaking MVVM guidelines, i.e. View Models being free from UI element references? Even if it isn't possible, can you show how this can be accomplished in a clean manner? Thanks in advance.

[@jeremyflowers8908]

Shame after the refactoring you didn't show open/closed folder icon based on IsExpanded. Would have liked to have seen how you implemented that tweak

[@AngelSix]

Some of the comments I suggest how I would do it

[@jeremyflowers8908]

@@AngelSix Do you think you can give me a term to search on for that please? A bit like looking for a needle in a haystack otherwise. Shame you can't use urls like stack overflow to specific comment!

[@AngelSix]

Its the top pinned comment

[@pcanteroh]

Hello, load, through code, a treeview with data from a database table sql server. My query is, how would the code be that allows me, when selecting an item from the treeview, to store the data of the selected item in a variable and then retrieve that data and display it in one or more textboxes?

[@shweta.pandey]

how to implement search box here. when we entered text in search box, it shows only filtered tree node item that matches entered text in search box?

[@AngelSix]

shweta pandey I do a search on another video check out the newer WPF videos. Similar approach

[@shweta.pandey]

thank, i'll look into it

[@richarddickerson8305]

Hey @AngelSix, love your tutorials. I had an issue with adding the Fody Weavers package, version at the time I installed (PropertyChanged.Fody v2.5.13; Fody v3.2.17), it didn't actually add in the FodyWeavers.xml file to the project which confused me for a while. I don't know if something changed along the way from the version you used to the one I installed. I did end up manually adding it in, but not sure if there is something I missed or something in the package behavior changed. The attribute name has definitely changed.

[@AngelSix]

It will no longer add that file, you need to manually add it and include it in your project and add it as BuildAction = None in properties

[@childofthetao]

Visual Studio says [ImplementPropertyChanged] is now deprecated, is that still the thing to use for that fody extension? (Awesome videos btw).

[@AngelSix]

Just delete that attribute, no need for it. Just make sure you still have the FodyWeavers.xml file with in your project though otherwise no properties will get updated

[@SimonYells]

Can you run WPF applications on a different OS? Like Linux or Mac?

[@SilisAlin]

No, WPF is Windows only. Doesn't mean you can't reuse your code for other operating systems.

[@MadMunky6682]

Really like these tutorials your actually making me understand WPF which I've stuck with Forms for so long as I could not get my head around it but you do a lot of short hand C# so it would be good if you should to a little guide on this as I like how you explain things. I'm talking about things like PropertyChange = (sender, e) => { }; .Select()

[@AngelSix]

Chris Richardson yep I'll cover those in the c# tutorials. In the meantime I'll try and briefly explain in the next videos as I use them

[@maryobrien3596]

Around 5:00 you add another class which you called an enumerator. I believe this is an enumeration. I had to go look it up to figure out what you were doing.

[@AngelSix]

It's an enumerator list and each item is an enumerator, or the whole thing is an enumeration object. Either is fine, and enumerator to me sounds more correct :)