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
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!
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.
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!
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.
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 ;)
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.
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 :)
Your start-to-end example is awesome! Many UA-camrs 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!
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.
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.
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
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.
Thanks a lot. I've seen a lot of things talk about the model view controller paradigm, and I vaguely understood what it was supposed to do, but this is the first I've found that really *implements* one and shows how the connections work. You're definitely right that it seems like a lot of work and I'm worried about how well I'll be able to pull this off when I start my next project, but at least the concept of the disk being the model and the view model being a class with methods to access the things the view needs to see and communicate about makes a lot more sense now.
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 UA-cam channel. Thank you :)
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 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!
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?
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!
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
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?
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!
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
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!
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!
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!
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!
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
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!
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
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!
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!
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.
@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).
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....
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
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.
3 роки тому
Great tutorial! Concise and practical. Thanks, man.
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.
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
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.
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.
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.
nice video. a couple questions - I am not clear what is the actual "Model" in this example; there are static classes and methods, and a view and a bunch of view models? Where is the model class actually being instantiated? Which classes are part of the model- the DirectoryItem or ? What if the model is publishing events that the viewmodel needs to be aware of? Also - the Fody add in has changed a bunch so it really causes issues when trying to follow that section of the video. Good to be aware of it.
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.
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
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.
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
I've made the source code available here www.fasetto.com/file/preview/2a7d535dae9a48199ea3bdbbd1d4f64a. I didn't upload the first 3 videos as they were small examples but lots of people are after them so there is the link :)
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()
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!
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
I'm sorry, but I don't understand why you declare Type, FullPath, Name instead of DirectoryItem because they are already in DirectoryItem. Or, in MVVM, do we want to keep everything separated from each other? Sorry, kinda new
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(); }
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
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?
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
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
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
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.
Hi, Thank you, you are very pedagogic in your way to explain stuff. I really like the time you take to go threw interveined code calls (using debugger too from time to time). Also I'd really congrats you showing your natural habit to comment your code on the fly !! I'm kinda jealous how it is natural for you as myself I trend to do the commenting work afterward. ;) I have one more question to fully understanding your MVVM tutorial here : So you code "this.DataContext = new DirectoryStructureViewModel()", and then, on XAML, coding {Binding Items} refer to the corresponding "DirectoryStructureViewModel.Items". OK I get it. But How the hell XAML know to look for DirectoryItemViewModel properties for the TreeViewItems ?? We didn't set anywhere a "DataContext = new DirectoryItemViewModel()" for the treeview Item, didn't we ? Thanks !
Do any of the videos in this series, explain how to get the selected item from the treeview in this video? I really enjoyed this video, and it was very helpful. For my app I only need to select a folder. My app is almost working, but need to get the selected path back to the main app. Thanks for the great videos.
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.
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.
Hey there, really good tutorial, just one thing I don't understand : Why do we need the ICommand and RelayCommand? We never use it as we call Expand in IsExpanded directly. I understand you used it to manually expand the first item, but why then not make Expand public, why do we go the long way? :) Edit : I just read some more about ICommands and found there are ways to do it differently but ICommand is obviously the most elegant...
In this particular example I don't make direct use of the ExpandCommand. However, a ViewModel should have a Command for every action it should make with the UI. As expanding is one of them, it should provide a command so the UI (perhaps not WPF, but maybe when it moves to another UI or platform) can make use of the command binding as needed. In WPF we made use via another method, but its still important to remember the whole point of view models (well,, 50%) is to cater for unknown UIs to come, and MVVM has the view interact with the view models via Commands and properties, and that any action should be available as a command. It's totally up to the designer though, you can remove it in this instance with no harm, but it's more about getting in to good coding practice
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.
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.
AngelSix, many tanks for your videos! But can You please answer me one question: why do You prononounce [fuŋkʃn] intead of [fʌŋkʃn], [kənˈstruktə] instead of [kənˈstrʌktə] and so on. To say briefly you almost always change the sound [ʌ] to the sound [u]. Is this a sort of dialect or what? Thanks once more!
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
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
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
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
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
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.
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
I'm enjoying the videos, but I'd love if there were 'Jump" Markers that let you jump to specific parts of the videos. For example where you start working on a different module/class/wpf design, or when you explain a concept, etc. I've seen them in other UA-cam videos, but I'm unsure what they are called. Since these are very long videos, It'd make navigating to what we need/want to listen to easier.
Sure I can look into adding that in UA-cam. I'll take a look in my next video... I'm guessing its just markers in the comments like I did in one of my earlier videos here? ua-cam.com/video/tLt7lPE6bXI/v-deo.html&lc=z22oyrra5mi5y54ga04t1aokgmpwxu0gizekjnhfytfgrk0h00410
Yeah pretty much like that. I thought I had seen them in the actual video before too, along the timeline control. Maybe I am thinking of a different video site though. Either one would be great.
Thanks so much for this. On my current project I have to use WinForms; however I am attempting to implement the MVVM model using .NET Core. You mentioned that the same technique of ViewModels you demoed in this video can be used for WinForms. How can we achieve that? WinForms doesn't have the same concept of DataContext, but rather DataBindings, which doesn't work exactly the same way as DataContext in WPF.
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.
Thanks for the wonderful tutorial! You have given me a lot to play around with! I was wondering if you could do a video (if you haven't already and I missed it) on how to reference the MainWindow class from other .cs files? For example, I would like to output information from another .cs to a textbox. The idea would be to have the the UI all on the MainWindow .cs and have all my other logic in other classes. Thanks again!! :)
25:01 I'm using a recent version of Fody, and the attribute to use is now [AddINotifyPropertyChangedInterface], because [ImplementPropertyChanged] is now obsolete.
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.
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 :)
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?
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?
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.
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
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.
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.)
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
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
I just spent an hour sorting my applicaiton out after adding fody !!!! It says it is deprecated, but it puts itself all over the place and stops the app form compiling ? Maybe you should remove this reference form your otherwise excellent tutorial ? It almost gave me heat failure trying to get my app to rebuild after adding Fody.
My Setup & Recommendations www.amazon.co.uk/shop/angelsix
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
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!
Your welcome
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.
No problem. Yeah I like to show the whole process, not just snippets. That is what so many others miss
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!
Thanks. Glad you like it :) Plenty more coming
yes this is true.
In case you're watching in 2023, [ImplementPropertyChanged] has been replaced with [AddINotifyPropertyChangedInterface].
Thanks a lot!
@@marekstefanecofficial np
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.
Luke is just amazing. He has been uploading very best quality videos. If you can please consider donating patreon.
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 ;)
You don't actually have to add an attribute anymore.
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.
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 :)
Thanks, glad the videos are of use
Your start-to-end example is awesome! Many UA-camrs 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!
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.
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.
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
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.
aint feeling that, how are you suppose to watch 80 min of a video, without takin any take on
Thanks a lot. I've seen a lot of things talk about the model view controller paradigm, and I vaguely understood what it was supposed to do, but this is the first I've found that really *implements* one and shows how the connections work.
You're definitely right that it seems like a lot of work and I'm worried about how well I'll be able to pull this off when I start my next project, but at least the concept of the disk being the model and the view model being a class with methods to access the things the view needs to see and communicate about makes a lot more sense now.
Cool glad it helped. I'll be doing more MVVM videos to keep explaining it and showing it off in other situations to explain it in many ways
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 UA-cam channel.
Thank you :)
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!
Glad you like the videos... and good look trying to get some movement on the progression of your dev team :) Wishing you luck
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!
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?
AngelSix That definitely does clarify it for me. Thank you for taking the time to answer my newbie questions.
I've searched alot of time a good tutorial for mvvm . and you're the best. Thank you man!
Thanks and your welcome
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!
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
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?
At last an explanation of MVVM I can understand.
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!
Thank you so much, I love your tutorials, a little long, and very fast but great. thanks again
Glad you like them :)
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
Awesome. Glad it helped. I'll have to write a 10 page book now :)
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!
You will see this in future videos. We start doing design time binding and data
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!
Thanks. Glad you liked it
You know that you see the guru when after 20 min of coding his project runs without any mistakes and exceptions.
Top level stuff, man! Thanks for making these professional tutorials.
No problem, glad you like them
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!
Ashutosh Nayak I'll explain more about ICommands as soon as I use them again in a video shortly
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!
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
your the bomb. best I've seen to get some comprehension of how and why
+Terry Stanley thanks glad it's helpful
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!
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
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!
Your welcome I'm glad it was helpful :)
Absolutely superb tutorial. So informative, many thanks for your hard work.
+Phil Lloyd no problem glad you enjoyed it
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
Thanks. I'm really glad I can help
@@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
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!
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.
Ah I see. I'm currently transitioning from 1 year of java experience to C# ,WPF and MVVM, so thanks for the effort! :)
@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).
this video series is awesome, thank you!
+Mastermind your welcome glad it's useful
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....
Kayode Okusanya yeah I'll perhaps add it to comments at top for the Fody changes. Glad the video was useful for you
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
Your videos helped me a lot. You totally deserve more subs. Thank you! I hope you keep uploading more.
Thanks
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.
Great tutorial!
Concise and practical. Thanks, man.
just 1h 19minutes into this (plus two previous videos): "so that's view models in a nutshell". LOOOL Love it!
:)
probably best tutorial i have ever seen! so clear and perfect on the balance of details and overview
Thanks
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.
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
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.
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.
The syntax for CanExecute at 41:06 is:
public bool CanExecute(object parameter) => true;
I was trying to inject the code of property changed via VS code snippets this is more fun and elegant way looks like thanks.
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.
nice video. a couple questions - I am not clear what is the actual "Model" in this example; there are static classes and methods, and a view and a bunch of view models? Where is the model class actually being instantiated? Which classes are part of the model- the DirectoryItem or ? What if the model is publishing events that the viewmodel needs to be aware of? Also - the Fody add in has changed a bunch so it really causes issues when trying to follow that section of the video. Good to be aware of it.
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.
Your tutorial videos are awesome, thank you very much! Hope you keep up the good work!
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
Thank you for this amazing tutorial. It's really helpful, even in 2021 :)
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.
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
This was amazing WPF tutorial!
Thanks a lot for sharing this with us. It is really useful and helpful:-)
Where can we download the code from?
I've made the source code available here
www.fasetto.com/file/preview/2a7d535dae9a48199ea3bdbbd1d4f64a. I
didn't upload the first 3 videos as they were small examples but lots
of people are after them so there is the link :)
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()
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
I think 'ImplementPropertyChanged' has been removed from use, but the video still says something, thanks, I will follow the series. Good work ;)
Version 1.5.2 still work.
Yep just remove the attribute when you upgrade, it isn't needed
great learning source, as always!
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!
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
I'm sorry, but I don't understand why you declare Type, FullPath, Name instead of DirectoryItem because they are already in DirectoryItem.
Or, in MVVM, do we want to keep everything separated from each other?
Sorry, kinda new
My brain died watching this.
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();
}
You have bound your DataContext directly to instance so you would have to do ((Model)DataContext).Test = ...
So basically inside the Inc() function I should change the Model.Test variable directly using ((Model)DataContext).Test = i.ToString(); ?
Correct
AngelSix is it considered good practice? Am I still following the mvvm pattern?
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
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?
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
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
Should I be using AddINotifyPropertyChangedInterface in the BaseViewModel?
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
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.
Hi, Thank you, you are very pedagogic in your way to explain stuff. I really like the time you take to go threw interveined code calls (using debugger too from time to time). Also I'd really congrats you showing your natural habit to comment your code on the fly !! I'm kinda jealous how it is natural for you as myself I trend to do the commenting work afterward. ;)
I have one more question to fully understanding your MVVM tutorial here :
So you code "this.DataContext = new DirectoryStructureViewModel()", and then, on XAML, coding {Binding Items} refer to the corresponding "DirectoryStructureViewModel.Items".
OK I get it.
But How the hell XAML know to look for DirectoryItemViewModel properties for the TreeViewItems ?? We didn't set anywhere a "DataContext = new DirectoryItemViewModel()" for the treeview Item, didn't we ?
Thanks !
Do any of the videos in this series, explain how to get the selected item from the treeview in this video? I really enjoyed this video, and it was very helpful. For my app I only need to select a folder. My app is almost working, but need to get the selected path back to the main app. Thanks for the great videos.
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.
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.
I'm big fan of your videos. They are so valuable. But in this video, i lost myself inside after 40th min. :)
+Serhat DELİGÖZ if you need more explanation on specific things you don't understand just let me know and I can explain more
With the file path you can do new FileInfo(path) and get information you need about each file
Hey there, really good tutorial, just one thing I don't understand : Why do we need the ICommand and RelayCommand? We never use it as we call Expand in IsExpanded directly. I understand you used it to manually expand the first item, but why then not make Expand public, why do we go the long way? :) Edit : I just read some more about ICommands and found there are ways to do it differently but ICommand is obviously the most elegant...
In this particular example I don't make direct use of the ExpandCommand. However, a ViewModel should have a Command for every action it should make with the UI. As expanding is one of them, it should provide a command so the UI (perhaps not WPF, but maybe when it moves to another UI or platform) can make use of the command binding as needed.
In WPF we made use via another method, but its still important to remember the whole point of view models (well,, 50%) is to cater for unknown UIs to come, and MVVM has the view interact with the view models via Commands and properties, and that any action should be available as a command.
It's totally up to the designer though, you can remove it in this instance with no harm, but it's more about getting in to good coding practice
Thanks a lot!
Friends, if you are going to use the new version Fody package note that it's not necessary to use [ImplementPropertyChanged]
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.
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.
Thank you man, this is a wonderful tutorial.
AngelSix, many tanks for your videos! But can You please answer me one question: why do You prononounce [fuŋkʃn] intead of [fʌŋkʃn], [kənˈstruktə] instead of [kənˈstrʌktə] and so on. To say briefly you almost always change the sound [ʌ] to the sound [u]. Is this a sort of dialect or what? Thanks once more!
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
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
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
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
Because IsExpanded property did the work for us. We can delete it
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
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.
How did you master your understanding of WPF (MSDN/UA-cam/Personal Projects)? I'm really curious?
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
I'm enjoying the videos, but I'd love if there were 'Jump" Markers that let you jump to specific parts of the videos. For example where you start working on a different module/class/wpf design, or when you explain a concept, etc. I've seen them in other UA-cam videos, but I'm unsure what they are called.
Since these are very long videos, It'd make navigating to what we need/want to listen to easier.
Sure I can look into adding that in UA-cam. I'll take a look in my next video... I'm guessing its just markers in the comments like I did in one of my earlier videos here? ua-cam.com/video/tLt7lPE6bXI/v-deo.html&lc=z22oyrra5mi5y54ga04t1aokgmpwxu0gizekjnhfytfgrk0h00410
Yeah pretty much like that. I thought I had seen them in the actual video before too, along the timeline control. Maybe I am thinking of a different video site though. Either one would be great.
Thanks so much for this.
On my current project I have to use WinForms; however I am attempting to implement the MVVM model using .NET Core. You mentioned that the same technique of ViewModels you demoed in this video can be used for WinForms. How can we achieve that? WinForms doesn't have the same concept of DataContext, but rather DataBindings, which doesn't work exactly the same way as DataContext in WPF.
Thank you for this amazing video for mvvm logic.
Your welcome
Thanks for this video.
I like to know why you added an ExpandCommand in the DirectoryItemViewModel?
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.
Thanks for the wonderful tutorial! You have given me a lot to play around with! I was wondering if you could do a video (if you haven't already and I missed it) on how to reference the MainWindow class from other .cs files? For example, I would like to output information from another .cs to a textbox. The idea would be to have the the UI all on the MainWindow .cs and have all my other logic in other classes.
Thanks again!! :)
Great Video mate. Especially for a 51 year old rookie ;-)
25:01 I'm using a recent version of Fody, and the attribute to use is now [AddINotifyPropertyChangedInterface], because [ImplementPropertyChanged] is now obsolete.
I followed along for two hours typing as i go, and at the end it didn't work. and now I don't know where the bug is.
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.
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 :)
Also, the Fody PropertyChanged is this something that will not allow for commercial release without payment?
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?
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?
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.
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
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.
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.)
@@AngelSix Waiting for those series :D, Thank you for your videos so far.......Have a good time ahead
@@AngelSix Yeah - this was perfect for me. I listened to your video at 2x speed, and it was a great refresher. :)
Visual Studio says [ImplementPropertyChanged] is now deprecated, is that still the thing to use for that fody extension? (Awesome videos btw).
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
The program runs even without the ICommand property in the view model. Where do we actually call it?
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
By the way, "ImplementPropertyChanged" is COMPLETELY obsolete now - you don't need it at all.
What do you mean? Program will do this same without ImplementPropertyChanged or you use something else?
@@krwawy5657 Yes, it will automatically detect that your class implements INotifyPropertyChanged. No need to do anything else.
Hey, could you tell me the difference between TargetType={x:Type Button} and TargetType=Button?
I just spent an hour sorting my applicaiton out after adding fody !!!!
It says it is deprecated, but it puts itself all over the place and stops the app form compiling ?
Maybe you should remove this reference form your otherwise excellent tutorial ?
It almost gave me heat failure trying to get my app to rebuild after adding Fody.
Thank you so much for this video!
Installed fody , but fody weaver is not there in solution explorer