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!
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
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.
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 :)
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.
Your start-to-end example is awesome! Many RUclipsrs 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!
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
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?
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 RUclips channel. Thank you :)
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.
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 ;)
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?
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
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!
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!
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 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....
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'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.
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
@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).
4 года назад
Great tutorial! Concise and practical. Thanks, man.
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, 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.
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.
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
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.
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.
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()
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.
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.
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 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.
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.
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
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 :)
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 !
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
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.
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 RUclips 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 RUclips. 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? ruclips.net/video/tLt7lPE6bXI/видео.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.
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
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.
25:01 I'm using a recent version of Fody, and the attribute to use is now [AddINotifyPropertyChangedInterface], because [ImplementPropertyChanged] is now obsolete.
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
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
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
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 @AngleSix. QUESTION 1 --------------------- I'm really stuck on the principle for a week or so. I'm trying to understand the responsible of MVVM Component. View: (1) Represent selected data in its DataContext scope in graphical environment. (2) Code behind which handling the logic is to be minimize or eliminate; use Binding in XAML instead. Model: (1) Pure data structure. (2) No logic implemented. ViewModel: (1) Has Model class objects as its field/properties to serve data binding for View. (2) Has ICommand instance to handle command binding for View. (3) Implement business logic. (4) Implement INotifyPropertyChanged to let View know that the binding data its own has been changes so View can response. (5) Because ViewModel own Model objects as its field/property, ViewModel changes the said field/property directly without using any binding/property change event. Are the above understanding is correct? QUESTION 2 ---------------------- I keep seeing other peoples example whom are implementing INotifyPropertyChanged in the Model. The Model raise PropertyChanged. Why the Model need to implement the INotifyPropertyChanged and raise PropertyChanged? To whom the Model is notifying upon changing value? Why can't they implement INotifyPropertyChanged in the ViewModel and raise PropertyChanged via ViewModel? I'm sorry I asking this to you when you teaching the other way. This seem to be a normal way for other tutorial. QUESTION 3 ----------------------- In DirectoryItemViewModel, you have used: return this.Children?.Count(f => f != null) > 0; Why there is a question mark in the statement? Sorry for the length of the questions. I'm stuck. Also, this video tutorial is great. It really teach practical coding.
Question 1: Your assumptions are basically correct. Let's make it even simpler: Model - is all your applications/programs data. Everything, including logic. Everything _except_ UI specific code. ViewModel - Typically extends any class from your "model" layer, adds any variables, commands, code etc... that are needed purely for UI stuff, but _without_ any actual specific real UI code (like showing a form, textbox, dialog box or so on). So if you should disable a button for example, the ViewModel would add a "DisableButton" boolean that the View will then bind to. View - anything to do with your real UI. So in WPF that view is a xaml control or page or window etc... In WinForms its a form or control. In web its a web page. Question 2 You should raise the PropertyChanged to be a view model. Because I use Fody Weaver PropertyChanged it does it for us, after our code compiles and automatically adds all required PropertyChanged calls. Question 3 The ? is an if this is null, dont do it. So: return this.Children?.Count(f => f != null) > 0; Is the same as: if (this.Children == null) return null; return this.Children.Count(f => f != null) > 0;
Thanks @anglesix. But on question 2, I'm wondering why OTHER people are declaring MODEL but implementing INotifyPropertyChanged instead only on VIEWMODEL. I do understand on the FODY.
It's the same. ApplicationPage for example is a model, and ApplicationViewModel is the ViewModel. Only our ViewModels (via BaseViewModel) implement Fody. So there is no difference.
On Question 3: I am not familiar with Linq yet. What does the using Linq; enable us to do here? I understand your answer, to 90%, i think. But since bool i = this.Children?.Count>0; is accepted by VS without using Linq; Is Link needed add the Lambda expressions? I assume "bool i = this.Children?.Count>0" would generate an error if noOf children is null, I just 'constructed' this line to research the need for Using Link.
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 :)
Great tutorial. One thing tho, where was the custom ICommand we implemented (RelayCommand) used? I didn't see it bound or hooked in any way. Not sure if its used behind the scenes somehow, or you intended on using it but ended up using the default actions. Thanks
@@AngelSix i know it's kind of late but i am trying to understand the code and if i comment anything related to the ExpandCommand in DirectoryItemViewModel it still works just fine.
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.
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!! :)
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 ..
.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
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
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
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.
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!
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
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
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.
Thanks for the great video :) I have a question to the TreeView view model binding. Is it posible to make the binding more flexible? For example you have a list of objects you want to show. They are all of the same object type and have simple properties like generatio, distance, fitness,... The default View would be to display the generation as parent and the children are the other properties. Can you change the position or order of the properties? For example swap fitness with generation. So that fitness is the parent.
Sure it's possible. To change child orders in the parents simple sort/construct your child list in the order you want. To change the hierarchy itself you would need a parent to host a "DisplayParent" property, thats the real top parent, and it holds a list itself of all the items that complete the entire data. Then you bind your top-level items to the "DisplayParent" property instead. This means the parent can change itself in a sense. Without more info or a direct code example you want to do, it's hard to provide more detail
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.
I really like how you use Fody for this, I was looking at making something to help trim down the WPF application I will be building and this is perfect. BTW to inline a function you use the lambda "=>" after the method signature. For example: public bool CanExecute(object parameter) => true; PS. Do you know if Fody.PropertyChanged has a cascading effect to properties that are computed from other properties? for example public int BreadQuantity {get; set;} public decimal BreadCost {get; set;} public decimal TotalCost => BreadQuantity * BreadCost; would a change to BreadQuantity trigger the propertychanged event from TotalCost as well?
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?
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."
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.
So, by the way, I did what you said. They've replaced [ImplementPropertyChanged] with [AddINotifyPropertyChangedInterface]. And when I fixed that, everything started to work.
Adding in the "Open Folder" to the code is quite simple. Firstly, in the DirectoryItemType Enum we change the existing Folder value to FolderClosed and add an FolderOpen value. public enum DirectoryItemType { /// /// A Logical Drive /// Drive, /// /// A Closed Folder /// FolderClosed, /// /// An Open Folder /// FolderOpen, /// /// A Physical File /// File } Now change the existing uses of the "DirectoryItemType.Folder" value in DirectoryStructure.cs -> public static List GetDirectoryContent(string fullPath) to use "DirectoryItemType.FolderClosed". Next we adapt the HeaderToImageConvertor -> Convert(object value, Type targetType, object parameter, CultureInfo culture) function to get the appropriate resource icon: public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { //We need to access the application resources and get to the particular image file. var image = "Images/file.png"; //Default to file type. switch((DirectoryItemType)value) { case DirectoryItemType.Drive: image = "Images/drive.png"; break; case DirectoryItemType.FolderClosed: image = "Images/folder-closed.png"; break; case DirectoryItemType.FolderOpen: image = "Images/folder-open.png"; break; } return new BitmapImage(new Uri($"pack://application:,,,/{image}")); } Finally, we change the DirectoryViewModel -> IsExpanded accessor to change the DirectoryItemType when the folder is expended or contracted: public bool IsExpanded { get { return this.Children?.Count(f => f != null) > 0; } set { //If the UI tells us to expand if (value == true) { //Find all the children Expand(); this.Type = DirectoryItemType.FolderOpen; } else { //Remove all the children this.ClearChildren(); this.Type = DirectoryItemType.FolderClosed; } } } The only issue I have is that if I open a folder with no content, I can't get it back to the Closed icon. Is there a better/easier/different way of doing this AngelSix?
You are pretty close. Simply change the code so if no items are returned, instead of returning an empty list, return an item that states "> no content no content
Thanks AngelSix. I had to read your reply a couple of times before it clicked that you weren't outlining a different way of doing this, you were outlining the solution to the issue with opening a folder with no content. I didn't fully follow the method you said. What I did is: I Added (another) DirectoryItemType public enum DirectoryItemType { /// /// A Empty type /// Empty, /// /// A Logical Drive /// Drive, } I (like you said) captured this in the HeaderToImageConvertor -> Convert(...) function and returned Null public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { //We need to access the application resources and get to the particular image file. var image = "Images/file.png"; //Default to file type. switch((DirectoryItemType)value) { case DirectoryItemType.Drive: image = "Images/drive.png"; break; case DirectoryItemType.FolderClosed: image = "Images/folder-closed.png"; break; case DirectoryItemType.FolderOpen: image = "Images/folder-open.png"; break; case DirectoryItemType.Empty: return null; } return new BitmapImage(new Uri($"pack://application:,,,/{image}")); } I (like you said) tested for the Expand() function returning an empty list and replaced it with a single item of type "Empty" private void Expand() { //A quick exit if this is a File if (this.Type == DirectoryItemType.File) return; //Find all the children this.Children = new ObservableCollection (DirectoryStructure.GetDirectoryContent(this.FullPath).Select(content => new DirectoryItemViewModel(content.FullPath, content.Type))); if (this.Children.Count < 1) { this.Children.Add(new DirectoryItemViewModel("", DirectoryItemType.Empty)); } } Lastly (I think) I needed to add an extra condition in the ClearChildren() function to prevent the expand arrow being added to the Empty DirectoryItem. 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 or null (no item) if (this.Type != DirectoryItemType.File && this.Type != DirectoryItemType.Empty) this.Children.Add(null); } I ran across a bug in my existing solution where if you double clicked on a File in the TreeView (and this new Empty item as well), the OpenFolder icon would be shown. That was fixed by changing the IsExpanded accessor: public bool IsExpanded { get { return this.Children?.Count(f => f != null) > 0; } set { //If the UI tells us to expand if (value == true) { //Find all the children Expand(); if(this.Type == DirectoryItemType.FolderClosed) this.Type = DirectoryItemType.FolderOpen; } else { //Remove all the children this.ClearChildren(); this.Type = DirectoryItemType.FolderClosed; } } } I hope this helps to demonstrate to others just how easy it is to adapt and extend the M-V-VM pattern. It definitely showed it to me.
Hello everybody, Maybe I wrote too late... This solution is still not 100%, because if the root is closed than the drive picture also changes to closed folder picture and even its object display name. I would suggest to add one more condition to IsExpanded it the set and into the else: public bool IsExpanded { get { return this.Children?.Count(f => f != null) > 0; } set { // If the UI tells us to expand... if (value == true) { // Find all children Expand(); if (this.Type == DirectoryItemType.FolderClosed) this.Type = DirectoryItemType.FolderOpen; } // If the UI tells us to close else { //Remove all the children this.ClearChildren(); if (this.Type == DirectoryItemType.FolderOpen) this.Type = DirectoryItemType.FolderClosed; //Modified line } } }
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?
@@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!
Thank you for your great video, it really helps me to build up the concept of MVVM. Here's a little question I got: I didn't see any connection bewteen ViewModel and Model in the video. Is ViewModel supposed to contain Model?
Think of the model as everything that isn't the view or the view model. Typically thats data and logic, and wherever the view model gets its info _from_ is the model
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
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!
My Setup & Recommendations www.amazon.co.uk/shop/angelsix
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
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
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.
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.
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
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
Your start-to-end example is awesome! Many RUclipsrs 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!
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
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.
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 RUclips channel.
Thank you :)
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.
I've searched alot of time a good tutorial for mvvm . and you're the best. Thank you man!
Thanks and your welcome
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.
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?
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
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
Thank you so much, I love your tutorials, a little long, and very fast but great. thanks again
Glad you like them :)
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 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
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 :)
In case you're watching in 2023, [ImplementPropertyChanged] has been replaced with [AddINotifyPropertyChangedInterface].
Thanks a lot!
@@marekstefanecofficial np
Top level stuff, man! Thanks for making these professional tutorials.
No problem, glad you like them
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
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!
Your videos helped me a lot. You totally deserve more subs. Thank you! I hope you keep uploading more.
Thanks
Absolutely superb tutorial. So informative, many thanks for your hard work.
+Phil Lloyd no problem glad you enjoyed it
You know that you see the guru when after 20 min of coding his project runs without any mistakes and exceptions.
your the bomb. best I've seen to get some comprehension of how and why
+Terry Stanley thanks glad it's helpful
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! :)
just 1h 19minutes into this (plus two previous videos): "so that's view models in a nutshell". LOOOL Love it!
:)
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
probably best tutorial i have ever seen! so clear and perfect on the balance of details and overview
Thanks
At last an explanation of MVVM I can understand.
this video series is awesome, thank you!
+Mastermind your welcome glad it's useful
@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).
Great tutorial!
Concise and practical. Thanks, man.
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
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.
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.
The syntax for CanExecute at 41:06 is:
public bool CanExecute(object parameter) => true;
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
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.
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
A small correction at 26:41 the attribute used is now obsolete, you can use the AddINotifyPropertyChangedInterface instead.
Yeah just remove the attribute all together now, don't need to add back the AddINotifyPropertyChangedInterface either
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.
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
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
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.
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.
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.
My brain died watching this.
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.
Thank you man, this is a wonderful tutorial.
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.
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
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 :)
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 !
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
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.
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 RUclips 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 RUclips. 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? ruclips.net/video/tLt7lPE6bXI/видео.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.
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 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.
25:01 I'm using a recent version of Fody, and the attribute to use is now [AddINotifyPropertyChangedInterface], because [ImplementPropertyChanged] is now obsolete.
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
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
Thanks a lot!
Friends, if you are going to use the new version Fody package note that it's not necessary to use [ImplementPropertyChanged]
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
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
great learning source, as always!
Hi @AngleSix.
QUESTION 1
---------------------
I'm really stuck on the principle for a week or so.
I'm trying to understand the responsible of MVVM Component.
View:
(1) Represent selected data in its DataContext scope in graphical environment.
(2) Code behind which handling the logic is to be minimize or eliminate; use Binding in XAML instead.
Model:
(1) Pure data structure.
(2) No logic implemented.
ViewModel:
(1) Has Model class objects as its field/properties to serve data binding for View.
(2) Has ICommand instance to handle command binding for View.
(3) Implement business logic.
(4) Implement INotifyPropertyChanged to let View know that the binding data its own has been changes so View can response.
(5) Because ViewModel own Model objects as its field/property, ViewModel changes the said field/property directly without using any binding/property change event.
Are the above understanding is correct?
QUESTION 2
----------------------
I keep seeing other peoples example whom are implementing INotifyPropertyChanged in the Model.
The Model raise PropertyChanged.
Why the Model need to implement the INotifyPropertyChanged and raise PropertyChanged?
To whom the Model is notifying upon changing value?
Why can't they implement INotifyPropertyChanged in the ViewModel and raise PropertyChanged via ViewModel?
I'm sorry I asking this to you when you teaching the other way.
This seem to be a normal way for other tutorial.
QUESTION 3
-----------------------
In DirectoryItemViewModel, you have used:
return this.Children?.Count(f => f != null) > 0;
Why there is a question mark in the statement?
Sorry for the length of the questions.
I'm stuck.
Also, this video tutorial is great.
It really teach practical coding.
Question 1:
Your assumptions are basically correct. Let's make it even simpler:
Model - is all your applications/programs data. Everything, including logic. Everything _except_ UI specific code.
ViewModel - Typically extends any class from your "model" layer, adds any variables, commands, code etc... that are needed purely for UI stuff, but _without_ any actual specific real UI code (like showing a form, textbox, dialog box or so on). So if you should disable a button for example, the ViewModel would add a "DisableButton" boolean that the View will then bind to.
View - anything to do with your real UI. So in WPF that view is a xaml control or page or window etc... In WinForms its a form or control. In web its a web page.
Question 2
You should raise the PropertyChanged to be a view model. Because I use Fody Weaver PropertyChanged it does it for us, after our code compiles and automatically adds all required PropertyChanged calls.
Question 3
The ? is an if this is null, dont do it. So:
return this.Children?.Count(f => f != null) > 0;
Is the same as:
if (this.Children == null)
return null;
return this.Children.Count(f => f != null) > 0;
Thanks @anglesix. But on question 2, I'm wondering why OTHER people are declaring MODEL but implementing INotifyPropertyChanged instead only on VIEWMODEL. I do understand on the FODY.
It's the same. ApplicationPage for example is a model, and ApplicationViewModel is the ViewModel. Only our ViewModels (via BaseViewModel) implement Fody. So there is no difference.
On Question 3: I am not familiar with Linq yet. What does the using Linq; enable us to do here?
I understand your answer, to 90%, i think. But since
bool i = this.Children?.Count>0; is accepted by VS without using Linq; Is Link needed add the Lambda expressions? I assume "bool i = this.Children?.Count>0" would generate an error if noOf children is null, I just 'constructed' this line to research the need for Using Link.
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 :)
Great tutorial. One thing tho, where was the custom ICommand we implemented (RelayCommand) used? I didn't see it bound or hooked in any way. Not sure if its used behind the scenes somehow, or you intended on using it but ended up using the default actions.
Thanks
Our command properties are RelayCommands so when we bind to them, it fires the RelayCommand
@@AngelSix i know it's kind of late but i am trying to understand the code and if i comment anything related to the ExpandCommand in DirectoryItemViewModel it still works just fine.
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.
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!! :)
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 ..
.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
Thank you for this amazing video for mvvm logic.
Your welcome
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
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.
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
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.
Should I be using AddINotifyPropertyChangedInterface in the BaseViewModel?
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!
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
Ah, thank you very much for the quick answer :)
How did you master your understanding of WPF (MSDN/RUclips/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
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.
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
Thanks for the great video :)
I have a question to the TreeView view model binding. Is it posible to make the binding more flexible?
For example you have a list of objects you want to show. They are all of the same object type and have simple properties like generatio, distance, fitness,...
The default View would be to display the generation as parent and the children are the other properties.
Can you change the position or order of the properties? For example swap fitness with generation. So that fitness is the parent.
Sure it's possible. To change child orders in the parents simple sort/construct your child list in the order you want. To change the hierarchy itself you would need a parent to host a "DisplayParent" property, thats the real top parent, and it holds a list itself of all the items that complete the entire data. Then you bind your top-level items to the "DisplayParent" property instead. This means the parent can change itself in a sense. Without more info or a direct code example you want to do, it's hard to provide more detail
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.
I really like how you use Fody for this, I was looking at making something to help trim down the WPF application I will be building and this is perfect. BTW to inline a function you use the lambda "=>" after the method signature.
For example:
public bool CanExecute(object parameter) => true;
PS. Do you know if Fody.PropertyChanged has a cascading effect to properties that are computed from other properties? for example
public int BreadQuantity {get; set;}
public decimal BreadCost {get; set;}
public decimal TotalCost => BreadQuantity * BreadCost;
would a change to BreadQuantity trigger the propertychanged event from TotalCost as well?
+Taylor yes it would.
How long have you been working with C# and WPF?
+Taylor C# since it come out. WPF only ever made on thing in it 3 years ago lol
Very nice, do you have any videos on creating tests and test driven development?
+Taylor not yet but we will do
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?
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."
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.
Upgrade project to .Net Framework 4.7.1 or 4.7.2, manually add the FodyWeaver xml file and include the
@@AngelSix Much thanks for the reply, will try soon)
So, by the way, I did what you said. They've replaced [ImplementPropertyChanged] with [AddINotifyPropertyChangedInterface]. And when I fixed that, everything started to work.
Cool glad it worked
Adding in the "Open Folder" to the code is quite simple.
Firstly, in the DirectoryItemType Enum we change the existing Folder value to FolderClosed and add an FolderOpen value.
public enum DirectoryItemType
{
///
/// A Logical Drive
///
Drive,
///
/// A Closed Folder
///
FolderClosed,
///
/// An Open Folder
///
FolderOpen,
///
/// A Physical File
///
File
}
Now change the existing uses of the "DirectoryItemType.Folder" value in DirectoryStructure.cs -> public static List GetDirectoryContent(string fullPath) to use "DirectoryItemType.FolderClosed".
Next we adapt the HeaderToImageConvertor -> Convert(object value, Type targetType, object parameter, CultureInfo culture) function to get the appropriate resource icon:
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
//We need to access the application resources and get to the particular image file.
var image = "Images/file.png"; //Default to file type.
switch((DirectoryItemType)value)
{
case DirectoryItemType.Drive:
image = "Images/drive.png";
break;
case DirectoryItemType.FolderClosed:
image = "Images/folder-closed.png";
break;
case DirectoryItemType.FolderOpen:
image = "Images/folder-open.png";
break;
}
return new BitmapImage(new Uri($"pack://application:,,,/{image}"));
}
Finally, we change the DirectoryViewModel -> IsExpanded accessor to change the DirectoryItemType when the folder is expended or contracted:
public bool IsExpanded
{
get
{
return this.Children?.Count(f => f != null) > 0;
}
set
{
//If the UI tells us to expand
if (value == true)
{
//Find all the children
Expand();
this.Type = DirectoryItemType.FolderOpen;
}
else
{
//Remove all the children
this.ClearChildren();
this.Type = DirectoryItemType.FolderClosed;
}
}
}
The only issue I have is that if I open a folder with no content, I can't get it back to the Closed icon.
Is there a better/easier/different way of doing this AngelSix?
You are pretty close. Simply change the code so if no items are returned, instead of returning an empty list, return an item that states "> no content no content
Thanks AngelSix. I had to read your reply a couple of times before it clicked that you weren't outlining a different way of doing this, you were outlining the solution to the issue with opening a folder with no content.
I didn't fully follow the method you said. What I did is:
I Added (another) DirectoryItemType
public enum DirectoryItemType
{
///
/// A Empty type
///
Empty,
///
/// A Logical Drive
///
Drive,
}
I (like you said) captured this in the HeaderToImageConvertor -> Convert(...) function and returned Null
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
//We need to access the application resources and get to the particular image file.
var image = "Images/file.png"; //Default to file type.
switch((DirectoryItemType)value)
{
case DirectoryItemType.Drive:
image = "Images/drive.png";
break;
case DirectoryItemType.FolderClosed:
image = "Images/folder-closed.png";
break;
case DirectoryItemType.FolderOpen:
image = "Images/folder-open.png";
break;
case DirectoryItemType.Empty:
return null;
}
return new BitmapImage(new Uri($"pack://application:,,,/{image}"));
}
I (like you said) tested for the Expand() function returning an empty list and replaced it with a single item of type "Empty"
private void Expand()
{
//A quick exit if this is a File
if (this.Type == DirectoryItemType.File)
return;
//Find all the children
this.Children = new ObservableCollection
(DirectoryStructure.GetDirectoryContent(this.FullPath).Select(content => new
DirectoryItemViewModel(content.FullPath, content.Type)));
if (this.Children.Count < 1)
{
this.Children.Add(new DirectoryItemViewModel("", DirectoryItemType.Empty));
}
}
Lastly (I think) I needed to add an extra condition in the ClearChildren() function to prevent the expand arrow being added to the Empty DirectoryItem.
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 or null (no item)
if (this.Type != DirectoryItemType.File && this.Type != DirectoryItemType.Empty)
this.Children.Add(null);
}
I ran across a bug in my existing solution where if you double clicked on a File in the TreeView (and this new Empty item as well), the OpenFolder icon would be shown. That was fixed by changing the IsExpanded accessor:
public bool IsExpanded
{
get
{
return this.Children?.Count(f => f != null) > 0;
}
set
{
//If the UI tells us to expand
if (value == true)
{
//Find all the children
Expand();
if(this.Type == DirectoryItemType.FolderClosed) this.Type = DirectoryItemType.FolderOpen;
}
else
{
//Remove all the children
this.ClearChildren();
this.Type = DirectoryItemType.FolderClosed;
}
}
}
I hope this helps to demonstrate to others just how easy it is to adapt and extend the M-V-VM pattern. It definitely showed it to me.
Duncan McDonald nice work!
Hello everybody,
Maybe I wrote too late...
This solution is still not 100%, because if the root is closed than the drive picture also changes to closed folder picture and even its object display name.
I would suggest to add one more condition to IsExpanded it the set and into the else:
public bool IsExpanded
{
get
{
return this.Children?.Count(f => f != null) > 0;
}
set
{
// If the UI tells us to expand...
if (value == true)
{
// Find all children
Expand();
if (this.Type == DirectoryItemType.FolderClosed) this.Type = DirectoryItemType.FolderOpen;
}
// If the UI tells us to close
else
{
//Remove all the children
this.ClearChildren();
if (this.Type == DirectoryItemType.FolderOpen) this.Type = DirectoryItemType.FolderClosed; //Modified line
}
}
}
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?
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
Some of the comments I suggest how I would do it
@@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!
Its the top pinned comment
Thank you for your great video, it really helps me to build up the concept of MVVM.
Here's a little question I got:
I didn't see any connection bewteen ViewModel and Model in the video.
Is ViewModel supposed to contain Model?
Think of the model as everything that isn't the view or the view model. Typically thats data and logic, and wherever the view model gets its info _from_ is the model
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
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!