What is the MVVM pattern, What benefits does MVVM have?
Do you really need to learn MVVM to start developing apps with XAML frameworks like .NET MAUI, Uno, Avalonia, WPF, or WinUI 3? I get asked this question all the time and today, I break down what you need to know about MVVM, what it is, what it looks like to code without it, why you should learn and use it, and finally, how to take advantage of MVVM in your app!
Links:
* MVVM for Beginner's - • MVVM for Beginners: Mo...
* MVVM Pattern - docs.microsoft.com/xamarin/xa...
* .NET MAUI Data Binding - docs.microsoft.com/dotnet/mau...
Join this channel to get access to perks:
/ @jamesmontemagno
👕 Buy some swag! - jamesmontemagno.myspreadshop....
☕️ Buy me a coffee - www.buymeacoffee.com/jamesmon...
Chapters:
00:00 - Introduction, hello!
00:35 - What is MVVM?
03:23 - Development without MVVM & Data Binding
10:00 - Adding MVVM & Data Binding (Community Toolkit Edition)
11:25 - Bindable Properties
16:00 - UI Interaction with Commands
20:15 - Wrap-up on MVVM
Follow:
👨💻 GitHub: github.com/jamesmontemagno
🦜 Twitter: / jamesmontemagno
📄 Website: www.montemagno.com
📰 Newsletter: newsletter.montemagno.com/
Disclaimer: This channel, videos, and streams are created in my spare time and are a product of me... James Montemagno! They are NOT officially affiliated or endorsed by Microsoft (my employer) in any way. Opinions and views are my own.
What is on my hat? It is the CLE clothing logo because I am from Cleveland! Checkout their awesome CLE merch: cleclothingco.myshopify.com/
What is that art on my wall? It is an original piece from the French street artist Gregos of La Butte Montmartre: / bcez1onhiqx
My Setup:
📷 Canon M50 Mark II - amzn.to/3P8R7lp
💡 Nanoleaf Elements Lights - amzn.to/3umwJVW
🎙 Blue Spark Microphone - amzn.to/3qgtYkq
🎙 Blue Pop Filter - amzn.to/3jEWM3r
🤳 Rode Microphone Arm - amzn.to/2Z68AlE
🎧 Sony MDR7306 Headphones - amzn.to/372jxta
📲 Stream Deck - amzn.to/373Uk1n
📹 Elgato Cam Link - amzn.to/3a9eGbh
📷 GoPro Hero - amzn.to/374lm90
🖱 MX Master 2S Mouse - amzn.to/3d7J2gj
⌨️ Tecware Phantom Keyboard - amzn.to/3aUP4y9
#dotnet #mvvm #dotnetmaui #xaml #winui #avalonia #uno xaml data binding uno data binding wpf mvvm
You're great, thanks James! One request: maybe some harder examples than first name and last name which are over and over again in your videos about Maui and new MVVM toolkit? I would like to see some more sophisticated example of this amazing tool.
Yes, i asked quite the same Q (nested ViewModels) above! :)
Thanks James! The first time in years I get to grasp MVVM concept and from now on I'll adopt it to all my Xamarin projects!
Thanks James, Just what I needed. This was a great example and demonstration. I would appreciate more content/examples along this line. Thank you. :)
God I love your videos James they just hit right, like 80% of my questions get answered with all your content. Love it love it. Thank you so much man, once I land my job in cross plat development I'll buy you a coffee. Thanks again brother.
You just sold me on why I should be trying out MVVM with a new MAUI app that I'm trying to write. I appreciate the video, and congrats on recently hitting 100k subs!
One major benefit of MVVM is that you can just replace one control with another without needing to rewrite a single line in viewmodel as compared to winforms where you would have to rewrite control names and other code in code-behind. For example, you have collection and selected item properties in viewmodel and in view you have a datagrid, so, using the power of mvvm you can replace datagrid with listview, or similar itemscontrol, or you can just bind those properties to any control you want
James you are the man, please continue.
Duuuude.. you are the best!!! Thank you sooo much for all the love and info
Excellent video sir. Easy to understand and well delivered.
Fantastic James!
I felt that Jesús speak to me about MVVM. Thanks, James, for yours excellent videos. Great Look
Thank you very much,This explanation of MVVM is relatively concise.
There's nothing wrong with MVVM at all, it's a great Pattern. Very useful when you want to create a more advanced Application. The only problem I have is the people who get obsessed with no-code behind. They Ignore the Power of the View Layer, and limited their application.
Simple And Super Explanation.
You know what James; I just want you to know that You're the BEST!
Thx a lot James, MVVM is great!
Damn dude! Thank you! I know mvvm, but this community toolkit is really nice man! :)) Thanks!!!!
Welcome back James!
James u are a beast. Very helpful vid!
Like watching your videos. Your enthusiasm and excellent description of the problem is awesome.
Glad you like them!
Realy nice guide of how it works, thanks
Glad it helped!c
Sick moustache! And great, I've wanted to check out a more in depth video about MVVM. Thanks!
I love MVVM but had no idea there was a nuget package for it. Definitely going to try this out!
Hi James Thanks for the video. I think you forgot to cover the "M" in M-V-VM. Maybe you could do another video explaining the "M" in more details and what goes into the model and what goes into the viewmodel - fat viewmodel vs fat model and so on.
Everything is fat in it! The whole thing is extra fat!
Amazing video to show the importance of MVVM and how to do it. I have a question if ViewModel have different project does it effect performance in any way. How to refer to shell for Navigation from ViewModel in different project .
Great video. I use property grids allot. Can I apply attributes to the auto-generated properties, e.g. DisplayName, Description, Category (from System.ComponentModel)?
Great Video. Can you made some video complementary showing pattern to made validations and show errors message, best practice todo this. Thanks.
Thanks for the great video. What if there is an Person object, and it has Firstname and Lastname property? What changes we will need to do?
Been an MVVM user since Windows Phone! MVVM Simple and fast!
can you make a video about creating new controls with Handlers ? that would be awesome !
that is awesome
Great!!!
do you have a project tutorial for an MVVM?
In the best practice. Can we apply MVVM to a popup ? I tried to do it but with much difficulty and some errors. It would be excellent If you could make a video about it if it's in the best practice :) Thank you :)
Thanks for the vid! You are using MAUI and my question what is better to take for the app development: MAUI or Avalonia ? MAUI seems like still in development.
I would like to see similar video on WinForms:)
Harika!!!!
This nuget makes mvvm look modern and pleasant. I wonder if there is an analyzer checking whether you are calling the generated properties instead of the fields. I feel like an analyzer should check that these private fields are only accessed through the generated code.
Hi. Good video. Help pls. How to change button icon (fontawesome) color depending on bound command canexecute?
Do you have a video handling page lifecycle events with MVVM and injecting services into the ViewModel using x:DataType?
hey James , thank you for sharing whats in my opinion the best MVVM video on KZhead!! i have one question though , in 14:27 isn't it bit confusing that the mvvm toolkit package forces you to write class properties in lower case (otherwise it wouldn't work) but when you actually use them to bind in xaml file they need to be in capital case ? I'm still a beginner so it could be something im not quite grasping well
For me it's natural, cause we have private variable, and thanks to MVVM toolkit package we can expose the public property for our view (public property should start with capital letter). The toolkit makes for us public property so we dont have to write it.
Lots of people: "Patterns and templates and modular reusability etc is good stuff. We should do that." Whoever came up with the MVVM nonsense: "Ok, here's MVVM. It's a pattern. It kind of has some of that modular reusability stuff, sort of, a little bit, if you squint at it sideways from a distance." Lots of people: "You realise you're still modifying styles and components in about 50 different files, right?" The MVVM supporters: "Don't mention the shortcomings and mistakes! MVVM is AWESOME!"
Great!! Can you help me create circle progress bar in MAUI? I don't know how to do it? Thank you very much!!
I have a question that I don't find in the internet. How to apply MVVM pattern in the situation when i have WebView and some event happens, like NavigationCompleate, and after that event I need to call ExecuteScriptAsync in WebView class. According to MVVM I can't access to UI from ViewModel layer so I don't need to pass this event to ViewModel. And there is no binding for script that I need to execute. And I'm also can't do it in code behind, where I can have access to WebView instance. So basically MVVM need to have another layer for this kind of situations?
Hi, i want to pass with commandParameter a viewModel parameter. And then supstract or add a specific value. Is this possible? I cant find an example. I can pass the object, but i can not add or substract bacause it is not a double.
How can I maintain decoupling when using info/confirm dialogs?
Thanks!
WHOA!!! Pierre!
Can you create a quick "youtube short video" or something on using behaviors on a contentpage navigatedto eventtocommand with viewmodels? Trying to get viewmodel code to run when page is loaded on the screen.
I’ll add it to my list!
@James Montemagno I think it is important to say that what you are showing with the preview CommunityToolkit will ONLY work if you have Visual Studio 2022 or later and will not work with Visual Studio 2019 as it will throw compilation errors. The reason for this is because it requires a newer version of Roslyn to generate the code. If there is a way around this I would love to know, but so far I have had some serious issues trying to implement this in our project, which unfortunately at the moment needs to be compiled with Visual Studio 2019. An alternative to this is Fody with the packages PropertyChanged & PropertyChanging.
Source generators work fine in 2019 And I tested the CommunityToolkit it works fine in 2019. What doesn't work is MAUI you can use it in WPF if you set the version to .net 5 or you can just use Avalonia it's better anyway.
@@FilipCordas This is interesting because I get the message that code generation is disabled because I need a new Roslyn version. I get the message as soon as I create a .net 5 WPF application and use the CommunityToolkit V8 Preview 4.
@@johnnywernd2593 My mistake it only works with 7.1.2. version and RelayCommand attribute is not supported there.
@@johnnywernd2593 Just to note that property generation works in 7.1.2.
@@FilipCordas Yeah, i'm using Fody PropertyChanged/PropertyChanging to create a similar functionality. The goal of my main post was to point out that @James Montemagno should have at least warn people about the usage as not everyone can or want to use VS2022 for whatever the reason.
Please i need guide, how if text get enter key code and then behind that application will check that user fill will searching in database mysql. If found then application send data to serialport dan wait the response from serialport using asynchronous. Can you guide me please. Thankfully
Can you make a video about “Why MVU”?
Hi James, would say you BIG thanks for your videos and attempting to spread your knowledge for other people. I have a question about source generator you've use to show how mvvm toolkit generates some (properties)output. So my question is how I can enable source generator in my vs2022? Thanks.
Great video! But I want to ask something. Is there a way to use NotifyPropertyChangedFor for an ObservableCollection?
ObservableCollection has change notifications built in for adding and removing items. That’s why it is observable:)
Im just coming from Winforms to WPF and came across this... And the main thing I learnt from this video... I haven't got a clue how to do WPF :p (or Im slowly getting there but very very slowly)
Checkout lots of my xaml and mvvm videos to help out. I’ll have to create an intro to wpf video
Hey James, Is it possible that Maui Community toolkit has problems to update values in custom controls where i have Bindable properties ?
For example: I have custom control where entry is inside a frame. I have all needed bindable properties. So if i call my control on maipage and write hardcoded my text in xaml, when entry has directly the value, so my control works perfectly. If i am using Binding then it doesnt work anymore. I am using Mxxm toolkit for maui.
I almost "invented" MVC/MVVM (I don't get what's real difference between them in that case) implementation in one of my WPF projects (I made model accessible through controller with property so it isn't MVC, view can work with model directly and it actually does but that's easily fixable) I gotta check these MVC and MVVM toolboxes because they seem to really make implementing these patterns easier than I did
James, do you have any good idea about how to connect the VM to View, besides the code behind way? I think it`s not that suitable when adding dependence injections when doing code behind way VM-View connection.
I would use dependency injection into the constructor like i showed in a recent video
@@JamesMontemagno Do you mean by injecting the VM into the VIEW constructor, and then connect this VM to VIEW in the code behind? Please help me clear, thanks James!
finally a very good explanation about MVVM, any link for source code in this video? thanks
That has been a great explanation! I know that it's not very much used these days, but is there a way to use this type of binding in windows forms controls or it just work with xaml? by the way, I used a previous version of the toolkit in xamarin forms and it's incredible the amount of work that it saves you!!
You can do some data binding in WinForms but I'm not sure if it works with observables, now I'm curious. You should look up for the MVP pattern too, can be helpful, I'd like to use it more but we have a large codebase so it's hard change things at that level
@@junior.santana thanks junior! Normally new projects are created with the latest technologies but sometimes I still have to work on older apps and I always look for ways to improve them and make them more testable. I'll definitely look into MVP
@@montanomariano it's a good approach. I've been studying frequently to get up to date and hopefully will work on newer projects/stacks in the future. The thing here is that it took us years to develop a new version of our legacy vb6 software and in the end it was already outdated. We did have a web version in WebForms back then but hadn't time to start a new one (it's a small team)
4:46 I really wonder why you capitalized the name of that field if that's actually Field?
Hi, it's seems like the necessary guides they are not so easy to follow, I know Maui is new but how does it get a GA?, without some needed features. I have a lot of problems with the OAuth authentication. If someone could help me it would me great.
MVVM is my favourite pattern. I learned it first building WPF apps, then successfully used for years with Xamarin apps. I even tried to use it in web dev with Blazor (it didn't not fit very well and was overall over-engineered mess)
ReactiveUI with Blazor wasn't that bad. ReactiveUI is a bit silly with names of things but it's actually really smart in many ways.
Why? What's wrong with using it with Blazor? Just inject a vm into the razor page, and bind everything to the vm
Thank you dotnet Jesus!
Very nice tutorial James. One question though. Dont you think the Model(M) should be the one responsible for making data service calls instead of ViewModel(VM) specially if the Model is responsible for enforcing business logic and VM is only for display purposes and handling user interaction. Most of the samples that I have seen so far invokes the data services directly from the VM but then their Models are plain POCO without any business logic? Do you concur that data service calls should be made from the Model instead of ViewModel?
I like to actually use MVVMS… model view viewmodel services…. Basically the viewmodel shouldn’t know how to get or store data at all and services should. Models should be simple. I think we are on the same page.
@@JamesMontemagno Thank you for your reply. I totally agree that services should be responsible for getting/storing data. However the services should be called from Model classes and not from ViewModel classes(unless your app doesnt have business logic) and business logic should always reside in Model classes. Model(Business Logic) can enact business rules on that data fetched using DataServices before returning to the ViewModel for display. The same way, Model should enact business logic before using the DataService to save them outbound. Please correct me if I am wrong.
@@AmitTaparia UI => ViewModel=>DataService=>DataRepository=>DomainEntities. Read about Onion Architecture. It will help.
@@parko1965 Thank you. I read little bit about Onion Architecture but one thing that still doesn't make sense is the flow that you mentioned i.e ViewModel => DataService => DataRepository => DomainEntities. As per the Onion Architecture, business logic should reside in the service layer which I strongly disagree. Business logic should reside in Domain Entities (as per DDD design). Assuming that's the case, how are business validation performed if we directly call DataService => DataRepository from the ViewModel instead of the Model(which is the Domain object). Correct me if I am wrong or is it my assumption that Model is the Domain object that is wrong?
@James Montemagno/ @Davey Lad, I think I am clear on what the right approach is which is - ViewModel -> Domain Services(Business Logic) -> Data Repository -> DomainEntities(POCO) object.
You can proudly wear the MVVM badge, unlike me who uses vanilla JavaScript.
Great. One question: does "IsNotBusy" achieve the same result that would achieve a CanExecute override?
Would be very similar for sure but could be used one controls that don’t have commands which is why I like them for simple bools
Hi James, can you explain the move from using [ICommand] to [RelayCommand] please? I have CommunityToolkit.Mvvm 8.0.0-preview3 installed and although [RelayCommand] pops up a tooltip explaining what it is, it also says that it is not an attribute class. (It works fine with [ICommand] )
You'll need to use the preview4 for that to make sense, the ICommand was replaced with the [RelayCommand]
Yup preview 4 changed this
@@BMarques803 Weird - I turned on "include prerelease" in my NuGet settings and installed preview 4, but when I build, it is reverting back. Any ideas?
@@JamesMontemagno can you explain the 9:50 bit about testing labels. is that a real world case? why would you test a label?
This is very well explained, but I am still not sold on the MVVM. It completely fails the KISS principle - it adds a ton of complexity and is basically requiring yet another language with its own syntax. It seems to even make code indexing and searching more complicated because things are not named the same across classes. I am sure this is very useful for high-scale projects, but other than that it seems like a development nightmare.
I agree. He started with a small amount of very readable and understandable code and ended up with a small amount of complex code. You can create a simpler MVVM without all the complex XAML. You just need to release the vice from the code behind. I'll study it...but I'm not sold. He provided a good explanation, though
Do you mind elaborating on what exactly that _ton_ of complexity is? Also, which yet another language are you talking about, XAML? It's a declarative language that accesses basically the same properties and names that you would do in code. Those who have at least some experience in XML, json or QML will learn XAML within a day or two. I've worked on UIs for enterprise applications for years now in many many languages and haven't found anything comparable to MVVM and XAML yet.
@@killianlomax8237 Sure - the problem is that it's another language that sits between the UI and the actual code. The language is not just XML - it is based on XML but there are also a bunch of attributes and parameters that are badly documented and not obvious. XAML is very powerful which means it is relatively easy to screw up in it. If you are just doing basic design then it's not too bad, but if you want to do things like specify custom formatters and more advanced bindings then it quickly becomes really annoying, especially since they have a syntax that is not part of XML. Custom controls and styles add more complexity on top of that. There is also no real way to debug the XAML bindings at runtime - you just have to get the code to compile and then try things out. Since it is all machine generated based on the XML, there is nowhere to put a breakpoint to figure out why a binding or a formatter doesn't work the way you expected it to.
@@elimgarak1617 Thanks for answering my questions in such detail. Honestly I'd disagree that it would somehow sit between the UI and code, it rather _is_ the UI (or defining instruction set whatsover). The benefit of not having to build and compile UI in code allows (technical) UI/UX designers to create Interfaces independently from developers. To my experience this has been of tremendous advantage. I agree it's relatively easy to get lost in the beginning or to break things when your knowledge is scarce, and yes, documention is sometimes poor. It has been this way also with Win32 API since the early days, .NET devs got used to it. Then again there's a strong and active community so help and support are at hand anytime. XAML diagnostics are possible, there's a namespace that comes with an attribute that adds a lot verbosity regarding Binding expressions but the easiest way to debug errors there is to pipe your binding through a value converter. Nothing special but a simple boilerplate class and just set a breakpoint in the Convert function. Reusability and freedom of design sure come with some increased complexity, but to me it has always been worth the price big time.
Perfect explanation for what i want to say
Is MVVM more efficient than code binding?
Now is MVI！
this is the best intro video on mvvm that i've seen. but why did the pick such a confusing acronym for this pattern. i get the view and the model but the ViewModel is such a dumb and confusing name
I'm creating an application that needs to work in .netframework 4.8. I installed Community.MVVM toolkit and followed all your tutorial, the source genarators don't trigger. I create the partial class with observableobject and private properties with observablepropety, but it doesn't trigger the public property, like nothing happens.
You will need to enable newer versions of c# in your project. I have it on my github repo mvvmsourcegenerators
6:42 anyone knows what is the keyboard shortcut to make the event? Thank you?
Just tab auto complete for events in Visual Studio
so, this is basically React/Vue?
Thanks for the explanation MAUI Jesus
Your brilliant, i have request or query, at work, how often do you actually plan/design this architecture before actually coding it up? What's the process? Tools? Or do you just have to know it and go straight to coding?
Is source generator integrated into community toolkit mvvm 8? That’s a killer package!
Yup! Version 8. Checkout my video on it
Other than testability, I don’t see any net benefits. Every other benefit listed has a cost. Hiding the code makes the code cleaner, but more obscure because some code is somewhere else. Declarative programming via attributes make it look like fewer lines because we don’t put square brackets on a different line unlike curly brackets. And relearning the same thing over and over and over each new Microsoft product is tiring. Started with MFC in ‘97 and tired of going back and forth between concise vs explicit approaches. Similar stuff could be achived if IDE auto-generated most of the stuff. Again I exclude testability from the rant above.
I just don't get this observable stuff - in the sense of why??? I mean, you state you got rid of naming the fields and decoupled the ui from code, but then you bind to property names. This looks more like wpf than old school mvvm. Good video though.
thanks. that beard and long hair is cool.
can you use mvvm with winforms?
You can't
@@hwod44 but you have databindings also in winforms controls.
⭐⭐⭐⭐⭐
Dear JM! I have watched some of your videos on MVVM, CommunityToolkit (i am using 8.2.1) & WinUI3, and i understood them all (i guess). But i have a problem with nested View Models. The following code is working fine: *) My MasterViewModel has an ObservableCollection. *) The ChannelViewModel has an "[ObservableProperty] string name" and an "[ObservableProperty] CoordinatesViewModel cvm". *) The CoordinatesViewModel has 3 "[ObservableProperty] double x, y, z". (all three classes implement base class ObservableObject for generating the notifying Properties) GOAL: Whenever any x,y or z of any CoordinatesViewModel changes, both the ChannelViewModel and the MasterViewModel shall be notified. I have successfully implemented it like that: The outer ViewModel subscribes the PropertyChanged-event of the inner ViewModel by my own code lines. IT WORKS in the App and i can unit-test the chain of events (PropertyChanged) raised from inner to outer. I can validate my own code lines: When commenting out my lines of subscription, UnitTest and App-functionality, both FAIL. So far so good, i know what is going on. (y) PROBLEM: I guess, the CommunityToolkit provides specialized code for that "nested notification from inner to outer". Does it have something to do with base class ObservableRecipient, with attribute [NotifyPropertyChangedRecipients] and/or with Messaging? At that point, i am lost. Googling/Githubbing/ChatGPTing did not bring fruits. Now i'm trying Montemagnoing :) Thank you and Best, inv(JM)
Why are such nice tools in an extern package? Why doesn't it come preinstalled?
It’s always a balance for preinstalled stuff, you don’t want to add too much as not everyone may want to use it and they may have other libraries they want and then they would say why is this here. Also things like community packages also have different support
Hi, James. I've noticed you drop your 't's when pronouncing 'button'. May I ask where your accent is from, please?
Ohio :)
Very nice, but super disconnected from my MVC website that I want to turn into a native app
On my MVC site I'm using Ajax requests to get back partial views and update the DOM with new elements, I guess MVVM is the best way to achieve the same thing in MAUI? But how on earth do I do that in a MAUI Blazor view then? So confuzzled. p.s. thanks for the amazing vid, you're getting really good at these!
I've been doing .NET for a while now and I just can't get behind MVVM. I understand the need, I understand the why and I understand the how but I get so bored writing it and I find myself just wasting time. MVVM isn't a solution I would say is great for huge projects anyway so MVM is fine for everything in between.
Damn, they finally got rid of this really annoying OnPropertyChanged boilerplate stuff to notify the UI that there are changes to fetch, lol 😂 I'm a bit concerned about the auto-generated code though. Still stickin with Caliburn Micro 😅😅😅
Hello. I respect your tech expertise and your great effort for teaching people but around 12 minute mark, you calling C# fields as "properties" isn't cool in my opinion. Would you mind adding a correction annotation there?
Fody
This package doesn't work with VS for Mac
Are you using vs for Mac 2022 preview? Should work there just fine
@@JamesMontemagno no. Used for Xamarin.
I’m a novice, but I just don’t see how the final result compared to 10:00 is more condensed, more readable, or runs faster.
With the toolkit it is actually much more optimized code that runs, so would be much faster. You have to write way less code as well since it is generated. Readability is up to you and your preference.
where is the model part of mvvm? you're missing something important
just like a qt singnal
Still don’t get it you didn’t even explain what an observable object is, it’s like just download this and it writes a bunch of code for you
the video is good. but I started to dislike the MVVM with Two-Way binding after 10 years of WPF in favour of one way data flow. I would check out other frameworks to build apps, looking at you #flutter
MVVM == MVC == MTV?
As someone who's written a framework before I utterly cringe and die when I see how much crap is generated in a lot of frameworks noawadays. I'm glad I'm not a coder anymore. That looks like a bloody mess. Just install this toolkit and you're goot do goo!
Jesus Christ is Talking about MVVM. Good beard.
This is honestly a really bad representation of why MVVM is a useful pattern. This video only demonstrates that a UI framework that is entirely built around the principles of MVVM works very well if you use those same principles which should be a surprise to exactly no one. There is no example in this video of how an application not following MVVM or even MVC could be implemented properly based on a framework which actually properly supports it. I don't disagree that MVVM as a UI pattern can be very effective and I agree that it is important that people stop writing windows forms app in the WPF framework but this is just not a good representation of why this is a bad practice.