C#/WPF - Learn MVVM with the .NET Community Toolkit
HTML-код
- Опубликовано: 14 авг 2022
- .NET Community Toolkit 8.0 Announcement: devblogs.microsoft.com/dotnet...
Docs: docs.microsoft.com/dotnet/com...
Broadcasted live on Twitch -- Watch live at twitch.keboo.dev 
Наука
I have sat through a course on Pluralsight going over MVVM and I got pretty lost when it came to the 'wiring it up' side of things. Your video has HANDS down helped understand this. Thank you for doing this. I have subbed to your channel and look forward to more content. Again, thank you for passing down knowledge to help others.
Thank you for your kind words. Happy coding!
Used to Prism but was looking for a intro to the Community Toolkit, great video mate, picked up a few good pointers here and there too
Thank you so much Kevin for being awesome!! Love you streams and content! ♥
Glad you enjoyed it. Happy coding!
Stylet MVVM has been my love for the past 2+ years, but I’m switching to this PRONTO due to all the SAVINGS in the code I have to write within my ViewModels - PROPS to all involved w/this v8.0 release of this MVVM framework - I’m loving the potential that you’re demonstrating!
…And thanks, so much for showing how to start working with this framework, especially showing how to FIX that ‘duplictes’ bug - I had ran into that same issue right before I found this video!
Even though WPF is my HEART, and I love it to death, I planning on learning MAUI, next so I can finally create some mobile apps, and I’m so glad this MVVM framework will carry over to that as well - great times ahead as a C# developer - I’m loving all of this!
It is an awesome library. Happy coding!
Appreciate the video. Especially the bit at 1:15:00. My exact situation. Also appreciated the primer on stuff. My first venture into WPF and a lot of videos bypass the "magic" side of these frameworks/kits which leave me scratching my head on how the hell things are just "happening".
Glad you found it helpful. Happy coding
My mind is definitely blown rn. It amazes me how concise the code is :D
Yep, source generators are awesome. Happy coding
Thanks very much, exactly what I needed
I am glad I discovered this channel 👍, it deserves far more recognition.
Thank you for the kind words. Happy coding
Thank you for taking the time to make this video. Much appreciated. You are a good teacher.
Thank you for the kind words. Happy coding
Can't thank you enough, is simply outstanding! 100 lines of navigation code replaced by just 2 can't believe it yet! Thank you!!!!😀
Glad you liked it. Happy coding!
Thanks for this video Kevin! This library is just awesome!🔥Also great explanation about MVVM in general, including code-behind. You can see a bunch of contents saying code-behind is evil which it's not if it's UI related (and if it works for you😜). Cool mug btw👏
Thanks Andrew. I appreciate the kind words. Happy coding!
This is awesome!! Really enjoyed seeing you go through all the MVVM Toolkit features, I'm really happy you like it! Also love how you showcased all the various [RelayCommand] features - a lot of work went into making that as easy to use as possible and super flexible, so it's great to see that being useful for folks! Cheers! 🍻
Hi Sergio,
Thank you. I really appreciate the awesome work you are doing on the project. I am looking forward to making a follow up with the 8.1 feature when it releases.
This "already contains" bug in MVVM Toolkit is the reason I abandoned this. Thank you for solve it out! I really thought the team will fix it up before official launch. If I proper understood this bug is only with WPF projects, seems that it is not important for them.
No problem, glad I could point you to the fix. In this case the bug is spread across multiple teams, making the testing for this a bit problematic. I myself was also hoping for a more rapid fix, but that simple MSBuild target will suffice for now. Happy coding!
Agreed, tripped me up as well - if I hadn't seen this video, all of this greatness would have been lost to me!
My FIRST passion is WPF, I'm hoping to eventually come to grips with MAUI, and Blazor, but I"m def 100% a WPF developer!
Hi Kevin
Thanks a lot for introducing me to the Community Toolkit in WPF. I loved both the content and your occasional funny comments.
A few years ago I played with the Prism library in WPF for a few months I find it pretty handy when it comes to abstracting out the features of a WPF app. I find the Community Toolkit very similar in a few ways. But a few parts of the application architecture in the Community Toolkit were missing in your video for me. I am specifically interested in how you integrate and set up a DI container for the toolkit-driven app and how you handle "navigation" from one view to another. Would you have a tip for me to look at to see this implemented with the Toolkit? Thank you.
I plan to start writing a desktop app and I am in the process of deciding on the framework I will use.
Thank you for your kind comments.
For the DI stuff, I do have both a dotnet new template (you can see it hee: github.com/Keboo/DotnetTemplates) as well as a video on it here: ruclips.net/video/j3pl2tkBM1A/видео.html
Navigation is a bit trickier as so much of it hinges on the layout of your app. If you are looking to do something browser-like (ie a tab style window) I did also cover an option for that using a DI type approach here: ruclips.net/video/aIuzYg_0nas/видео.html
Thank you. I'll give it a try!
Thanks for this excellent video, Kevin. Great content and enjoyable entertainment 😁 Two suggestions for future projects, however: maybe you want to drop the annoying background music and please avoid switching between windows with very dark (VS) and extremely light (browser) background (if only for elderly folks' sake 🙄). Thanks so much for all of the coding inspiration 🤝
Thanks for the feedback. I have dropped the background music while streaming (first video comes out tomorrow). And yes I will do my best to avoid massive changes in brightness. It is quite annoying, even to me.
Thank you for going through this toolkit and highlighting the various functionality!
I've been using Stylet for my last few projects (I love the ViewModel First approach), but I want to start reaping the benefits from these new code generators and reduce all the required boilerplate code I have to type in!
I almost decided to go with MVVMGen, but after watching this, I'm going to transition to using this framework.
I just need to figure out on how to rework navigating between my views w\the loss of Stylet's marvelous View Conductor functionally (I would love it if he adopted code generator functionality into Stylet! - I would keep using it forever!!)
Thanks again for this very informative video!
Thank you for the kind words. Happy coding!
The way this library uses source generators seems really nice for MVVM! One issue for me though is that VS no longer shows the references to your properties as you only have the fields in your code. Do you know if there is a good workaround for that? Might not be such a big deal though as the benefits of this library would outweigh that inconvenience.
Unfortunately, there is not a solution that I have found for this. Hopefully as the tooling around source generators improves this may improve in the future.
Hello Kevin. Thanks for this amazing video. I'm new to WPF and it helped me a LOT to transform from WinForms. If may I ask... Do you think that you can sacrifice one stream to explanation expected architecture of WPF app with usage of MVVM toolkit. I mean like catchnig events for different controls, folders and so on? However.... Thank so much for what you are doing 👍
Thank you for the kind words. Have you seen these two streams that I have done around similar concepts:
ruclips.net/video/HOFQhUOR3yY/видео.html
ruclips.net/video/j3pl2tkBM1A/видео.html
Happy to cover additional topics as well. At some point I probably need to do an updated version of that first one using this toolkit.
Thanks for the links. I'll definitelly check it. I haven't seen it yet.
Ok, I got the jist of working with this new MVVM platform - wiring up properties and commands etc., saves so much time and code writing, I love it!
As I responded in another reply, I'm coming from Stylet MVVM, (which has Conductors for "orchestrating" the display of your View Models (hence Views, which are located by naming convention), I'm confused moving from View to View w/Community Toolkit MVVM?
This toolkit looks to be a _View First_ paradigm vs Stylet's View Model first paradigm? Instead of "launching" a view model (which then locates and displays the associated view), w/Toolkit MVVM, I see myself displaying the View, which has the Data Context set to the View Model in the code behind (or XAML)?
One tutorial I'd like to see here, if possible, is how to tie a View event (say the _Visibility_ event which fires when the View is shown or hidden), and _tie it back+ to a Command (Event to Command), in a CLEAN way.
Coming from and accepting the mantra of "nothing in the code behind", I find myself looking to _add code_ in the Views code behind file, way more now w/Toolkit MVVM, vs w/Stylet MVVM which I've gotten away with in several projects with NO code behind code at all?
Any help appreciated on w/Events to Commands with this toolkit. I'm looking to write a "Wizard" application, with Next, Back, Cancel and Finish buttons, for navigation between the Views to replace a project I started w/Stylet. I figured this would be a great project for myself to come to grips w/using Community Toolkit MVVM.
Any pointers / tips on creating such an application here with this Toolkit would be a great launching point to getting comfortable writing Toolkit MVVM applications.
Really enjoying your channel and the amount of details you provide.
Question: we say we don’t want UI code in our ViewModel, but aren’t CanClick and relay commands UI code? I know this is how it’s done but just seems weird to tell the UI whether can or can’t click. I wish these things were in the code behind that utilized data from the ViewModel. Anyway, thanks for your videos.
That is a great question and to some degree it is a bit about semantics. Often with commands we describe them in terms of Execute/CanExecute rather than Click/CanClick. This seems like just a naming thing, but it really does help separate the UI from the application logic. Even though most of the time, the command could be bound to the Command property on a button, it doesn't have to be a button. For example, it could be used with a KeyBinding to implement keyboard shortcuts. This is why having the view model ignorant of how the command is used, and just have it focus on what the command should be doing is important (and often will result in more maintainable code).
Another key aspect of this is testability. WPF UI components are difficult to impossible to test with simple unit testing frameworks. This is a big reason why we try to avoid passing UI objects down into the view model since one of the objectives is to be able to unit test the view model.
@@Kitokeboo thank you.
Great stuff - thanks for the video. I get the VM - V part (at least the basics). However I am not sure how to do the M - VM part. How should the model notify the VM when a property change in the M? Do the M need to implement INPC or is there a "better" solution?
Great questions. Unfortunately, there is not going to be a clear answer. The reason is because most of the time Model (M) portion is going to be specific to your application and what you are building. With that said there are some techniques that may be worth consideration (do note that these are not mutually exclusive).
1. A publish/subscribe (often simply called a pub/sub pattern). The big idea here is that when changes occur in your model, the model publishes a message. Then relevant view models can update their state. Sometimes this means the VM goes out and re-retrieves the model from a service or database, other times it can mean simply updating some of its local properties. If you are using the community toolkit, this is implemented as the IMessenger interface.
2. Wrap the model in a view model. Often, I find that when people want to know when a model is changing, it is changing because it is being used directly in the UI. Though this does work (at least in the simplest of cases), I find that that moment you need this type of interaction it is best to wrap the model in a view model. Often this means the VM has a constructor that takes in the model and simply copies its properties, into similar looking properties on itself. The key here is that even though the class may look similar, they are serving two different purposes. The VM can watch for changes and perform any needed logic, the model is then free to remain a simple data model of your domain and remain uncoupled from any UI or VM.
3. Implement INPC on the model. This is technically a valid option. Because the interface is in the BCL even things like EF Core have direct support for it (learn.microsoft.com/ef/core/change-tracking/change-detection#notification-entities). This tends to be a fallback option and not the first thing I recommend to people if there are alternatives. The biggest disadvantage is you have to deal with events, which can be the source of many memory leaks. With that said, it is still a valid option and sometimes the cleanest option; but I would recommend trying the prior techniques first before jumping here.
Happy coding!
Hi awesome introduction to MVVM, I was so lost before watching this video !
Can you please make a video about a new WPF Library that is popping off lately called "WPF UI" by lepoco ? It is a great library that brings moderns WinUI 3 and Windows 11 style controls and navigation to WPF, and its 3 built in project templates use .NET Community Tollkit's MVVM
Thanks for the tip. I have not looked into WPU UI much yet, but I will look it over and see. Happy coding!
Hi, Thanks for great video you shared. How can we do constructor injection in view-model?
Great question I have another video that covers that. ruclips.net/video/j3pl2tkBM1A/видео.html
You might also find these other videos helpful:
ruclips.net/video/ic5WXNmoULo/видео.html
ruclips.net/video/aIuzYg_0nas/видео.html
@@Kitokeboo Thanks Again kevin, absolutely helpful
I am looking to refactor a .Net Framework 4.8 app that relies on a MainViewModel that holds a collection of AppDomains which executes parallel instances of a class instance. I require some two-way communication between the main view model and each instance.
Would a singleton messenger registered in the app cross the AppDomain boundary and be consumable inside the app domains? The messenger interface looks great, this consideration is the only thing giving me pause to me implementing it.
Great question. Unfortunately, no, the built in implementations for IMessenger will not work across AppDomains. A big limiting factor is the necessity of the recipient instance being passed around. You are probably best off keeping whatever AppDomain communication is in place already. However, this library can probably help in other ways.
@@Kitokeboo That's a bummer but makes sense.
I've thought about it some and I believe I can put a service that is just a singleton facade to manage the proxy instances and marshalling and allow my app to use the interface as shown. Thanks!
Hi, Kevin. What browser do you use?
I use Microsoft Edge most of the time. I do also have chrome around as well.
In your opinion IMessenger is better tha Mediatr and its Ping pattern? Can you also elaborate on the answer? Thanks in advance!
That is a great question. Really IMessenger is a very basic publish/subscribe (pub/sub) pattern; while MediatR is a .NET implementation of the MediatR pattern. In my opinion, if you are already using MediatR, you should not need IMessenger as they effectively accomplish the same goal. However, for people who do not wish to take that dependency, and only want a simple pub/sub implementation, the IMessenger works well for that.
en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern
en.wikipedia.org/wiki/Mediator_pattern
@@Kitokeboo I tried Mediatr yesterday by implementing its INotificationHandler interface to my MainWindow... the problem is that every time a notification is sent, Mediatr creates a new instance of the class that implements the handler, effectively creating a new MainWindow and then executing the Handle method... at least this is my understanding... which makes the whole thing, at least for UI purposes unusable.
Unfortunately, your solution for bug "already contains" in MVVM Toolkit doesn't work for me.
Good catch. This issue was fixed in the latest release that came out on 9/13/2022. If you are running the latest version of Visual Studio 2022, or installed the 6.0.401 SDK you will not want to include that "fix"; it should be fixed by the SDK now.
@@Kitokeboo Thanks a lot! Yes, it worked after removing "fix".
@@misters6451 Awesome. Happy coding!
Hi Kevin. I'm just getting back into WPF and learning about Community Toolkit. Seems interesting, but I'm having a hard time grasping two problems. I hope you can help me please?
First off, I'm using EF, and I have a simple model with all my properties. Good. Ok. I have a ListView and it's bound to an ObservableCollection that's populated with a GetAll(). All good. But now that I have data showing and I select a row, I set the SelectedInvoiceCode, and the details on the right hand side are also bound to the SelectedInvoiceCode, and they show. Great. BUT, my question is, now I change the Code field, but the Code in the ListView is not updated. I think it's cause I'm not doing a good notify property changed, but I don't know how to get Community Toolkit to do that, nor do I know what to do in the EF model?
Second of all, I'm trying to use RelayCommand and CanExecute...but they aren't firing after I set the SelectedInvoiceCode neither. After I set the SelectedInvoiceCode to what I want, and the details on the right are updated, good....but what do I need to do, to update the CanExecute for the right relay commands?
I'm starting to pull my hair out on this...and I can't afford to do that much longer, there's not that much to pull. Please help. Thanks.
Hi Peter,
Great questions.
For the issue of the Code property not updating you are correct, the issue is with the property changed event. Though it can be convenient to directly bind to your EF core entity objects, I often find that I prefer to "wrap" them in a view model. Beyond very simple UI interactions, you will quickly run into these types of situations where you want your EF entity objects to be more that database entities (in this case; desiring INotifyPropertyChanged implementation for the properties). The issue is trying to combine all of these roles into a single class is rarely worth it and makes working with the class cumbersome. I prefer to think of it in terms of layer separation, with the view model class being there to support the view, and the entity being to data store representation. Often these two classes will have similar properties, but it is often convenient and nicer to allow them to independently evolve. For your case I would suggest not binding directly to the entities, and instead bind to a collection of view models that may have similar (identical?) properties but your view model classes can then have proper property changed events.
For getting the command to re-evaluate its CanExecute method you need to exility notify it. This is done with the NotifyCanExecuteChanged() method that exists on the RelayCommand. If you simply want to trigger this when your SelectedInvoiceCode changes, there is a source generator that can make this easier by applying the NotifyCanExecuteChangedFor attribute to your observable property. Docs on that here: learn.microsoft.com/dotnet/communitytoolkit/mvvm/generators/observableproperty#notifying-dependent-commands
If you are interested, I do have an app that I have done with WPF and EF Core. You might find this stream on it relevant to what you are doing: ruclips.net/video/IDxZYxWUBOo/видео.html
Stream version of the repo here: github.com/Keboo/SimplyBudget-Sample
Full repo here: github.com/Keboo/SimplyBudget
Happy coding
Thank you for the quick reply@@Kitokeboo. I'm certainly going to watch the other vid, and I've already downloaded the code from github. Thank you. I do believe in the VM and the Model separation, and I have that now. I'm just wondering if I need to further separate the model class coming from EF and the another model (which I think would do the notify property changed stuff)? That seems like a bit of extra work to keep both of those in sync, no?
re binding directly to the entities. Apologies if I misled you. :> I do have a viewmodel which the view is bound to (with the [ObservableObject] attribute).
re exility notify it, I'm sorry, what is exility? Do you mean explicitly (and just a typo?) Sorry, I'm trying to get used to properly architecting the solution, EF, MVVM AND the Community Toolkit. Lots to do all at once....and get rightly working. DOH! Your vids are helping, thank you.
@@phenry9999
Sorry for the confusion.
Just to be clear, for many things I often have my EF Entity class, and then I usually create a View Model class (the class that derives from ObservableObject). Typically, you don’t need any further separation than this.
My apologies for “exility”; that was supposed to be “explicitly”.
Thank you@@Kitokeboo for the reply.
re EF + VM classes, I have those as well. Does the EF class has to extend\implement anything special? Mine aren't at the moment. The VM does have the ObservableObject attribute from the Community Toolkit. My question is, from the EF object class, when the Code property changes, how do I update the listbox in the VM?
re exility = explicitly, no worries, auto correct always gets me too! Thank you for the informative replies. Still watching the vids and learning for more nuggets! :> Thank you.
Thank you @@Kitokeboo for the reply. I'm still trying to learn about EF and MVVM connections. Does this mean I need to have a VM to mimic the EF object? In otherwords, do I need to have an EF getting data from the db context, and that pumps data into a VM which is then bound to the form?
Right now, I have an EF that gets data from the db, and a VM for the MainWindow which things are bound to. But when the Code property changes...I don't see the listbox on the form updating. I think I need to raise some type of property changed event\attribute...but my EF isn't doing anything like that.
I'm looking at your budget sample, and it looks like every object from the db, has it's own VM. Seems like a lot of classes and passing data around. Seems error prone to me, no?
I use the Class Library but it doesn't automatically generate code for me? How do I solve that problem. Thank you.
It should work with a class library. I have a small sample of doing that here: github.com/Keboo/MaterialDesignInXaml.Examples/tree/master/MVVM/MVVM.Lib
The referenced class library is here:
github.com/Keboo/MaterialDesignInXaml.Examples/tree/master/MVVM/MVVM.Lib.Shared
Hi Kevin I have question for you. How to update window datagrid when I add data to grid by child window (another window). ??
Hi Pawel, typically I would handle this by using the a pub/sub pattern. When using the .NET Community Toolkit, this is done with the IMessenger interface. This allows for your child window (or more accurately the view model for your child window) to send a message when there is data to be added. Then the main window (or its view model) can register to receive that message and then update the data grid (or more likely the collection the data grid is bound to).
You can read more about the IMessenger in the docs here: learn.microsoft.com/dotnet/communitytoolkit/mvvm/messenger
Happy coding!
Hi but if I have binding page (View) to ViewModel and I bind also other window to the same ViewModel. I think it should work like that if I change variable in window it should also change in pave. But in my app it doesn't work like that.
@@pawes9611 you are correct. If both are using the same view model it should work. I would confirm that both are using the same instance of the view model. I would also make sure that the collection you are using implements INotifyCollectionChanged. Typically this is an ObservableCollection.
I thought this was to learn about MVVM with the emphasis on LEARN. You certainly know what you are doing but some of us that are trying to learn it DON'T. iIf you could redo this with less show and more teach- GREAT! Thanks
Hello Kevin, I am learning WPF, your videos are very good and have helped me a lot. I would like to know if you can help me with MVVM using multiple DataContext. It has been impossible to get help. Greetings and thanks for sharing.
Hi Carlos. Sure, could you describe a bit more about what you are trying to accomplish?
@@Kitokeboo To be direct, I would like to send you an email to send you the code where I have the problem and then we can discuss it here. I thank you for answering me.
@@carloscuenta4766 There is an email address on my about page (it is labeled for business only), that you can contact me at. www.youtube.com/@Kitokeboo/about
Prism or Community Toolkit?
Personally I really like Community Toolkit, but prism does have some additional features
1:15:35
Content starts at 14:10
You shouldnt be referencing it as MVVM. You put your Model inside your ViewModel, so you should reference it as VVM…just sounds silly huh. JM also did it in one of his beginner videoes and had to make an updated video apologizing for the confusion. Great video though.
Hello Kevin, thank you for that great explanation of this excellent toolkit !
A comment about the part "messenger":
I think, the constructor of the viewmodel doesn't need a parameter.
Also no private messenger var is required.
The existing, non nullable var "Messenger" only needs to be set
in the constructor to whether WeakReferenceManager.Default or StrongReferenceManager.Default.
The "Messenger" var then can be accessed all over the class ...
Still irrelevant chatter out to the 10 minute mark, so I gave up on this video.