MVVM for Beginners: Model-View-ViewModel Architecture for Xamarin.Forms, .NET MAUI, WPF, UWP, & More

It is go time! Time for some architecture with MVVM, data binding, commanding, and more. In this episode I walk you through everything you need to know about MVVM, what it is, why you need it, and how it can help you be more productive and write less code that is more testable.
I break down MVVM with Xamarin.Forms, however most of the concepts are the same across WPF & UWP. Some key differences are that you have DataContext instead of BindingContext (WPF/UWP) and x:Bind instead of x:DataType - docs.microsoft.com/windows/uw... on UWP for compiled bindings (nothing available for WPF).
Full Xamarin Beginner's Playlist - • Xamarin & Xamarin.Form...
👕 Buy some swag! - jamesmontemagno.myspreadshop....
Time Codes:
00:00 - Introduction
01:30 - What is MVVM?
05:30 - Using Data Binding and INotifyPropertyChanged
14:10 - What is ICommand
17:30 - Using Commands, not Click Handlers
20:30 - Our First View Model
25:00 - Wrap-up
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.
Links:
* XAML: docs.microsoft.com/xamarin/xa...
* Data Binding: docs.microsoft.com/xamarin/xa...
* Source Code: github.com/jamesmontemagno/my...
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
Follow:
👨‍💻 GitHub: github.com/jamesmontemagno
🦜 Twitter: / jamesmontemagno
🔴 Twitch: / jamesmontemagno
📄 Website: www.montemagno.com
📰 Newsletter: newsletter.montemagno.com/
My Setup:
* 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
#MVVM #Xamarin #XamarinForms #XAML

[@omarsebakhi]

OMG!!! I couldn't believe that one day I would understand MVVM, I was so disappointed until I saw this video. What is that easy?!!! Now, MVVM is not magic, you are the magician in explaining things!!!

[@ryanrobbins4391]

You have by far explained MVVM the best out of everyone I have watched...and I have watched hours of people trying to explain it. Don't stop making videos!

[@JamesMontemagno]

Thanks so much! Glad that you found it helpful

[@khalednabilcs]

WOW, I am amazed by the content of your videos!! Thanks James!

[@MrFrawsty]

Bro I love your teaching style and explanations for everything. Thank you for these videos!

[@marcioviana7352]

Thanks James. I'm just start learning Xamarin and I really think your tutorials are being very very helpful for me to learn good practices on writing code.

[@danhayworth6338]

Man, you are the best in youtube tutorials! Just putting it out there.

[@Mikosha97]

I was terrified of all this stuff, now I think it's possible to understand and use! Thank you so much!!

[@maso4u]

I'm a quarter through watching this video and already there is so much understanding that I've gained on the MVVM architecture I feel confident in using it with my applications/projects

[@disalfa]

I started learning Xamarin about 3 months ago. Self taught and with a huge thirst to learn (although i am 44 with family and tiiny amount of time for me). After wandering around from tutorial to tutorial i saw your videos! WOW! You make it look so simple that anyone can understand it. Like you usually say "Boom ...magic happens". You are a person who loves what he does and that's why you do it so right. Keep on educating and inspiring the world MJ (that sounds like Michael Jackson by the way!) P.S. => One last thing. Is there any video tutorials for Xamarin (from 0 to Hero style) created by you? 'Cause i seem to consume knowledge far more better with videos.

[@chrisjlocke]

> Is there any video tutorials for Xamarin (from 0 to Hero style) I'm just learning Xamarin. WHat videos would you recommend?

[@addtyu6176]

I also did the same thing about 5 months ago!!! And it was a bad decision... I really shouldve gone with flutter... XAMARIN, while it is native... the APP launch time is ridiculaus. My first App took 2 seconds to start!!

[@chrisjlocke]

@@addtyu6176 ; Did you mean '2 seconds' or '2 days' - 2 seconds to start doesn't sound that bad...

[@addtyu6176]

@@chrisjlocke Are you seriously joking? 2 seconds is too long... Game apps, yes understandable, but utility apps should be less than a second. This is the norm for all apps like the Facebook App (Made with ReactNative), Phone, SMS App, Contacts App, Whatsapp, Telegram, reddit, AliBaba App (Made with flutter), linkedIn... all of them load under a second.

[@rikudouensof]

Right? He is amazing. I also follow him in other social media, like twitter.

[@samcamphyn1950]

I love your video's, all of them are explained in a clear and unambiguous manner. Thanks!

[@JamesMontemagno]

Glad you like them!

[@tienpham-pc3lb]

Thank you James, you make the topic much more interesting.

[@joshuamanalo8323]

Hi, I am starting to learn Xamarin Forms, and this video series helped me a lot! So I want to thank you and please keep it up!

[@JamesMontemagno]

Happy to hear that!

[@maheshkumbhar4216]

Thank you James Clearly understand What is Binding , Command , View model, Binding Context , flow of get set.

[@ethansue6341]

Your tutorials are amazing! Learning xamarin through your videos for a personal project and its amazing how useful and informative your videos are!

[@JamesMontemagno]

Thank you so much!

[@kopilkaiser8991]

Absolutely great tutorial to introduce yourself properly to ViewModel. I really was facing issue understanding it from looking at different sources but you've made it possible to understand the topic easily.

[@user-sv3fz3pg4z]

Awesome! Efficient and straight to the point!

[@srikanthl9399]

Very useful the most craving subject for xamarin developer, Please keep the great work.

[@mayanmaster92]

Good lord thank you for this. I've been looking how to actually start an mvvm project and now I feel like I can actually do it. Thank you!

[@slimbenromdhane436]

This video is awesome, I know I'm not there yet and I have to rewind this video few times to really understand this architecture but this was very informative. Thank u.

[@iamashyura]

What can I say? ONLY WOW!!! This is really helpful!! Everything is now clear for my understanding. Thank you for all your videos. This is how i like it. Explanation and how to do it.👍👍👍👍👍

[@sunnychahal1237]

After falling asleep through countless videos finallt a video i could get through, thanks for sharing this in the way that you did

[@kardo205]

Thank You!!!!!! In 30 minutes you clarified all the doubts and complications that existed in my brain about Binding and MVVM! Thank you very much

[@JamesMontemagno]

👍👍👍

[@--Eric--]

Amazing, less than 30 min, ought to be the #1 of MVVM videos. Thanks, James.

[@JamesMontemagno]

Wow, thanks! Glad that it helped so much :)

[@parko1965]

I'll second that.

[@baranikumars8952]

You are the best .Net teacher in the whole world, wonderful tutorials😍

[@Emrys_Gough]

Dang man. These videos are awesome. I'm trying to build my own app that I was to eventually publish, but I have a lot to learn and to do before it gets there. These videos are incredibly helpful. Thank you.

[@nohopestage]

Hey, how's the progress? I'm in the same position right now

[@Emrys_Gough]

@@nohopestage I've shelved my project for the time being. Someone else with more financial backing and more manpower already had my idea and built an app for it. That's my situation though. Don't let my experience stop your progress.

[@hackertitan]

Awesome videos man. I learn a lot of new things. Thanks and keep on making these videos.

[@rikudouensof]

Thanks for the basics again, been over a year

[@zx-xn1lb]

mvvm so coooool！Thanks James.Really helped.

[@alessandroaggio]

This video is GOLD!!!! Thank you man!!! BIG THUMBS UP!!

[@scigama71]

This is great.. You are an excellent teacher. Thank you.

[@JamesMontemagno]

Wow, thank you!

[@taiwantoklip]

Dear James,your lecture really healed my MVVM-phobia Thank you.

[@omarsebakhi]

Oh my God! Same thing!

[@JasonPurkiss]

That was great thanks for that. ps thanks for all your hard work for ages my in app billing didn't work but the other day I upgraded to Xamarin forms 5 and the latest version of in app billing and it all came to life :) many thanks

[@JamesMontemagno]

Awesome, that is great to hear!

[@stefanbogdanovic590]

Amazing video! I am really interested in learning Xamarin right now. Thank you for amazing explanation.

[@JamesMontemagno]

Happy to hear that!

[@JonathanHobbe]

Really nice comming from the WPF world and watching this

[@davidkim7812]

Hello James, this video is very useful for me. I have a great information.

[@gendir9827]

Yes...Great...This is really the video which really TEACHES the MVVM, not thirdparty helpers ,classes, frameworks,etc... This is really the tutorial for the MVVM Architecture in Logical Concept...Thanks...was very informative and effective video... !!

[@gelbermahecha7272]

Nice explanation. Thanks James

[@mikegrainger8082]

This is great info and expertly explained. TVM.

[@MrLordknoblauch]

another incredibly informative session, although i'll really need to practice this to really get a grab on it. thanks

[@vukilesimelane2033]

Thank you soooo much James!!!!

[@pauldudley1273]

James towards the end of the video you talk about how the ViewModels become testable, Could you make a video in future on how you would go about testing stuff, Maybe a video just dedicated to testing would be awesome. Thanks for the great video series.

[@maxalmonte14]

BEST... VIDEO... EVER!

[@eduardoalvescanuto7135]

Thanks, your explain is amazing and very clear!

[@JamesMontemagno]

Glad it was helpful!

[@tapbrandsllc7982]

Thank you, James, for another useful video. My take-away, that I didn't know before, is that defining the BindingContext in the XAML, instead of in the code-behind, activates IntelliSense for editing the XAML file. NICE!!!

[@JamesMontemagno]

Yes, exactly!

[@tapbrandsllc7982]

@@JamesMontemagno I tried defining the BindingContext in BOTH the XAML and the code-behind, expecting either an error or a warning. Instead, my app seems to compile and run just fine. Isn't this duplication of code (basically), and so shouldn't it be flagged by the analyzers?

[@JamesMontemagno]

@@tapbrandsllc7982 I use the d:ContentPage.BindingContext design time usually docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-previewer/design-time-data else you are creating 2 instances of it. I don't think analyzers are smart enough to figure that out.

[@sudidav]

Very clear... Thanks James!!

[@JamesMontemagno]

Glad it was helpful!

Just perfect video!

[@austintownsend3974]

We saw that World of Warcraft launcher James, you're the man.

[@davidwynn539]

Great video!

[@sem_the_man]

You have enlightened me

[@marna_li]

In more advanced scenarios, I would wire up IoC and Dependency injection. Letting the IoC container resolve Pages, ViewModels, and Services. I inject ViewModels in the Page constructor. (There is a NavigationService involved) The downside is that you don't automatically get IntelliSense in your XAML views. Luckily, the x:DataType comes in handy.

[@kidstube3239]

Compiled bindings are truly great feature of XAMARIN forms.

[@chester0bennington]

Thank you so much again!

[@MukelabaiMukelabai]

Thank God I found your channel!

[@omarsebakhi]

Me too, that's exactly what I felt!!!

[@johnolawale2749]

This is one awesome tutorial

[@Kokityo]

Thank you, you saved my life !

[@JamesMontemagno]

Glad it helped!

[@keithkatane4854]

Sublime. Thank you.

[@lifelover69]

Excellent!

[@MarekLS60]

Great video tutorial...

[@Vitormauricio]

Excellent article! I really appreciate if you could record a video demo with a simple login and logout forms, using shell and JWT ;-)

[@buddysnackit1758]

OMG...If I find out your making us do this stuff and later in your MVVM helpers go..."Remember last time when we had to do all that tedious stuff, well good news folks! You don't have to do that tedious stuff! Which is where I run over to you and say "I am mentally slapping you right now for wasting 1000 peoples time you twit!". Very good! Right to the point.

[@veerendrashah3601]

Great and simplicity

[@ritavafadar]

You are 100% awesome :)

[@alaminhossain3199]

You explain good, man. Damn good.

[@ddng9969]

Thanks!

[@his-worddevotionals540]

Thank you.

[@olcatgaming859]

7:49 as a beginner, when you did this. my brain just broke

[@mukeshnishad1887]

Nice article

[@KatoNamus]

Thank you

[@PinkMappy]

James, I love you

[@AmitTaparia]

Hi James, great content as usual. I know my question is for advanced use of MVVM but I will ask here. Do you think the VM(View Model) should call data services to get data to be bound to the view or is it the model which should call the data services. Most of the examples I have seen around Xamarin Forms uses Data Service calls directly from VM but then their Models are just POCO. If I am writing a enterprise business app with lots of business logic(residing in my Models) then shouldn't I be calling the data services(fetching/saving data using rest/web services) from my models so that my models have an opportunity to validate those data before pushing out to the remote server?

[@rsrodas]

Dear James...Thanks for the Show... Any tips for the right way to use gRPC in Xamarim? Doing a Show with these kind of topics could be nice for the community too... Thanks.

[@logank.70]

The amount of projects still putting business logic-y things in code behind makes me cry. I've had to teach this to pretty much every team I've worked with because it just isn't taught and people stay with what they know.

[@chrisjlocke]

Guess it depends on the languages you learned with. I started with VB5/6 which didn't really have classes, so buttons on the form did the work - added a record, got records to fill a grid, etc. Now with .Net and classes are a thing, its easier to split the tomato in half. Or something. I create database classes, but a lot of logic is still in the form buttons.

[@logank.70]

@@chrisjlocke I wish more colleges spent time on code composition. Not every college/university is the same, but from what I've seen up to this point they mostly just go "these are objects, and here is how you make them." What I'd love to see are examples of taking things like a VB6 program written in the traditional way and showing how you can use composition within those boundaries. Still a good point though. Sometimes it's the limitations of a particular framework that make it much more difficult to compose things in a certain way.

[@talalmaman957]

You,ve a great experience and awesome explanation, please, can you publish a book for developing .net Maui Apps?

[@jeffreywilliams3646]

Very helpful. Thank-you. I do not understand why they call it MVVM rather than VVMM, the latter much more accurately describing the flow of things. The former is very confusing to me.

[@MrDinakdakan]

Hi james, I have a nuget packge video player, in a content view how to call method or bind the events of the player to my viewmodel/viewbase? thanks for the vid

[@makino500]

Hi James, what program do you use for create this wonderful videos? Camtasia? Thanks a lot for this and other video!!!!!!

[@JamesMontemagno]

I made a full video on this. Check it out: kzbin.info/www/bejne/d3Tdp2eaesylgaM

[@dominickdougherty4662]

Question: I'm following along on a Mac with the M1. When I try to bind my ViewModel in my code(min 22). Visual Studio is not adding the namespace for me. When I add it myself it is not recognized. I can also not get the x: datatype to work. I get the error: " The type 'viewmodels:CoffeeEquipmentViewModel' was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built" any suggestions? Thanks in advance

[@tapbrandsllc7982]

Quick question: Is the use of x:Datatype="viewmodels:XYZViewModel" REPLACING or IN ADDITION TO the use of [XamlCompilation(XamlCompilationOptions.Compile)] in the code-behind?

[@JamesMontemagno]

One is compiling XAML and one is compiled bindings, so 2 different things that work together :)

[@trandvinh]

Very good video. Did you work for CDA (Cannon Development Amera)?

[@JamesMontemagno]

Nope, it was part of Oce Reprographics Technologies which was acquired by Cannon.

[@joshua7597]

Hey James. I don't know if it's a new update or anything. But in the Code-behind, there's no notification to use the namespace System.Windows.Input for ICommand. Hopefully I'm not stepping on any toes here. Have a great rest of your day.

[@jean-baptistedioli1692]

Hello. Thanks so much the courses. I've just have one question, I do not understand how to updated the form in the view from the contentPage. the only way I found is by doing BindingContext = myViewModel and this is for me a duplication with the BindingContext that you do in the view, (XAML page). I hope you understand me. Thank you :)

[@JamesMontemagno]

Yes! You can actually just set the "BindingContext = this;" and that will set the page as the binding source.

[@sajanpatel6751]

Hi James, Data biding would not work with Entry right? it only works with things that wants to send some output rather than getting input only like Entry in Xaml

[@JamesMontemagno]

DataBinding totally works with Entry! It is two way data binding

[@varunchopraapj]

To make the intellisense in MAUI working you need to add a DataType with clr namespace in the ContentPage header ``` xmlns:mauiAppLearn="clr-namespace:MauiAppLearn" x:DataType="mauiAppLearn:MainPage"> ```

[@jcvandermerwe5311]

Is there anything specific around working with Xamarin.Essentials Media Picker in MVVM and Data Binding? The moment I apply data binding and mvvm to my code behind the camera doesn't launch...? Any suggestions will be greatly appreciated. And thank you for all of your online stuff, as a new Xamarin developer you are my dreams come true, no jokes.

[@JamesMontemagno]

Not sure, i would look at the sample probably, should work alright.

[@cahyodwc]

Hi, is it best to set Model to implement INotifyPropertyChanged because i need a property updated when there is an action/update for each ViewCell ?

[@JamesMontemagno]

Yeah, you can also use mvvm helpers and observable object that will help you out. If you are updating a property on the model then go for it.

[@pjkarels]

Does Xamarin Forms support {x:Bind PropertyName} (as in UWP), or is it in future plans to do so?

[@JamesMontemagno]

It doesn’t use x:Bind, but there something called compiled bindings which uses x:DataType and is very similar

[@tazwinsdevchannel]

With everything moving to the ViewModel at the end of the video. I didn't make the ViewModel inherit from BindableObject and it still worked?

[@JamesMontemagno]

Depends what you are binding to. If you are just doing a property and not changing it from the code behind it will work or an observable collection.

[@robertodalmonte504]

Hi James, great sample. I followed your tutorial to set a WPF project instead, and I used .DataContext (instead of .BindingContext) but could not find a way to use x:DataType...sure enough as per my ignorance. How would you do it in a wpf project?

[@JamesMontemagno]

That is correct on the WPF part it is DataContext (as well for UWP). And then take a look at x:Bind instead of x:DataType docs.microsoft.com/en-us/windows/uwp/xaml-platform/x-bind-markup-extension

[@robertodalmonte504]

@@JamesMontemagno Does x:Bind apply to WPF as well, or is it only for UWP?

[@JamesMontemagno]

@@robertodalmonte504 Yes, I think x:Bind is only UWP. I don't know if there is a similar option for WPF, but look at the VS tooling for binding diagnostics, which should help out kzbin.info/www/bejne/rJiQhKtne5yUedE

[@robertodalmonte504]

@@JamesMontemagno Thanks James for your info and your time... this is a Dmitry Lyalin 5 minutes video about the very same topic, in case someone is interested. kzbin.info/www/bejne/o6usXmqflrCYh9U

[@dbaznr]

The contextual list on 23:17 don't worked for me (VS 2019), but the program runs with no problems. Is there any settings to enable this particular type of intelliSense?

[@JamesMontemagno]

In this instance I set the x:DataType but you can also set the Binding/DataContext and it should pick it up.

[@tsilb]

Every MVVM tutorial I've found uses ContentPages for their views. Why, then, is there a separate View item in the VS Add New Item dialog?

[@JamesMontemagno]

You can create small composable views that can go into pages if you desire.

[@buddysnackit1758]

James, Can you tell me why Microsoft has not simply made MVVM a project type and given the user simple xaml popups to create the command options for buttons and similar for other controls. I mean how hard could it be if your starting MVVM had 1 view 1 view model and 1 Model? Then adding the code to complete or populate these files should be VERY similar to how it currently works. Oh and if that is a thing already I'm very interested in what that would be. ALSO: I create a new xaml project for windows applications and run the default stuff it makes. It works. I install xamarin and it won't compile because of a couple errors generated in that magic code in the xaml. I uninstall xamarin and it works again...so I'll watch your video and maybe you address it.

[@matteoc7084]

I'm using a tabbed app. I'm not sure how to do it that when you press button on one tab it updates content on another tab?

[@JamesMontemagno]

You could share your view model between the two different pages.

[@matteoc7084]

@@JamesMontemagno and could I also share it with more than 2 tabs? It would be great if you could make a video about it.

[@JamesMontemagno]

@@matteoc7084 Sure you could just set the BindingContext on any and all pages.

[@ClarenceSimukanzye]

Where's the link to the previous video?

[@JamesMontemagno]

Here is the Xamarin 101 playlist kzbin.info/aero/PLwOF5UVsZWUiHY1CkRVjYJ6dm0iCvAlfw

[@ClarenceSimukanzye]

@@JamesMontemagno thank you!

[@LosWochos76]

I know thats probably off-topic, but I dont actually see any strategy with MVVM helper libraries at Microsoft. I worked with WPF and PRISM a lot. It was great. Nowadays, Microsoft seems to switch to the Community Toolkits which are also great because of the code-generators. But I miss some features, e.g. EventToCommandBeahvior etc. Why didnt anyone simple migrated some PRISM stuff to the Community Toolkits and enriched them with code-generators? Maybe you can make a video about the difference beteween PRISM and MVVM Community Toolkit and the strategy of Microsoft behind that.

[@LosWochos76]

BtW: The official documentation of the MVVM Community Toolkit doesnt even mention PRIMS and its relation to it. Isnt that kind of strange?

[@greeksinmars]

How can pass parameters between viewModels ?? in MVVM

[@Kuuma]

Is it possible for someone to look at my code? The context list never appeared for me @ 23:17 , and after I tried to move on without it, the whole thing just collapsed, and now I have no idea how much damage I did trying to walk back a slew of errors.

[@JamesMontemagno]

Best to post over at docs.microsoft.com/en-us/answers/products/dotnet

[@nuniezjorge]

i know instantiating a view model from code behind (actually assigning it to a property of code behind) is bad practice, but that allows code behind to call functions in the view model, wait for results and apply animations according to results, you can't access UI elements from the view model, hate me if you want, but if i have to choose between following a model that is hard to implement or just making it my bitch and using it at my convenience, i'm not a purist

[@Zygotic11]

Nice but how do I move to another view? i.e. a new page

[@dogukantombul1045]

this "you clicked .. times" thing didnt work on my android device

[@rdvansunger5607]

I am new at Xamarin, my binding doesnt work. I checked many times that i did everything same with James. When I move the cursor to "CountDisplay" at the xaml page I see warning "No datacontext for binding" message. Can anyone help with that please?

[@JamesMontemagno]

Did you set the BindingContext? Would need to see a repro, but if you follow along should be good to go.

[@rdvansunger5607]

@@JamesMontemagno I did repro and it works now. Thanks a lot for the reply and providing such wonderful series 🙏