XAML Data Binding and MVVM Basics (.NET MAUI, WPF, UWP, Xamarin.Forms)

Today, we attempt to fix up some code that was submitted by a viewer. They were having issues with some data binding in their XAML application and sent me some source code to look at. We diagnose the application to understand what is going wrong with the application including commands, two-way data binding, and some best practices to bind to objects.
Links:
Source Code Sample: github.com/jamesmontemagno/Da...
Join this channel to get access to perks:
/ @jamesmontemagno
👕 Buy some swag! - jamesmontemagno.myspreadshop....
☕️ Buy me a coffee - www.buymeacoffee.com/jamesmon...
Follow:
👨‍💻 GitHub: github.com/jamesmontemagno
🦜 Twitter: / jamesmontemagno
📄 Website: www.montemagno.com
📰 Newsletter: newsletter.montemagno.com/
Chapters:
00:00 - Overview of MVVM
01:50 - Binding Overview and Compiled Bindings
04:00 - Command overview & static issues
06:10 - Two-way databinding
09:00 - INotifyPropertyChanged
13:45 - Enhancing databinding to objects
18: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.
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:
💡 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
#xaml #databinding #dotnetmaui

[@waynepeters8551]

Fantastic idea for new videos! Data binding can definitely be a little confusing at first. But seeing the pro fix common errors is infinitely helpful to say the least. Much appreciated James!

[@enzodiaz3921]

Thanks James, a very very simple explanation that unravels the whole binding thing for those of us just starting out with xaml binding.

[@lnagy88]

I wish that we had this video back in the day when I learned XAML the first time. Good explanation and examples for beginners!

[@rory6315]

You're awesome James, I hope your channel grows to the behemoth it deserves.

[@WolfRose11]

Definitely helpful, this is the main issue that I was having that was unclear in the Microsoft documentation.

[@bkaankose]

One tip from my side: VS light bulb suggestions are enabled in XAML. So if you are looking to import some namespaces in your XAML, you can just write the name of the class and press Ctrl + . (control and dot). That will suggest you to import proper namespace into your XAML directly. Very useful for providing x:DataType for the DataTemplate and DataContext.

[@matomarkovic6765]

Good Job on this. Really easy explained on how it works. A lot videos go in deep explaining and losing the simpicity. Thanks :)

[@xixixiaojie]

Thank you very much James, it was super helpful. I learnt alot and noted my mistakes. I'm very new to Xamarin and all so I still run into alot of problems in my code. Yea, I was trying to send it to a database and it ran successfully. Thanks a lot!

[@JamesMontemagno]

Yay!!!! Glad it helped out!

[@giourikilinkaridis1138]

Amazing video!!! Straight to the point and most importantly simply explained. Could you please cover the Backgrounding subject like Long-Running-Tasks for both IOs and Android.

[@Tamer_Ali]

Thanks James, someone of our colleagues was asking for the same topic 2 days ago on Twitch. 👍

[@evedickson2496]

Great video... super helpful

[@ezzaldeen]

Every day I learned something new from James ❤️

[@KenllyAcosta]

Me too.

[@ShareKnowledge76]

Excellent explanation👍

[@Widgets19]

Love It James.

[@aboubacar.traore]

Great video, i just learned something new !

[@GuildOfCalamity]

Great video! Would like to see you do a deep dive on RelativeSource AncestorType and RelativeSource AncestorLevel.

[@mkgungor]

I am loving it ❤

[@FaheemRasheed]

always waiting for your videos and always gets to learn new things. thanks james. and thank you again, for best quality practices and showing what not to do ! please tell us as well. where can we send our code.

[@hwod44]

Hi James! You are exposing the Model to the View. You're breaking the MVVM principles. Thanks for your videos!

[@JamesMontemagno]

Maybe. As I said it is an option based on your app. I like to say you can make your own MVVM principles :)

[@hwod44]

@@JamesMontemagno haha! :) you look Groucho Marx

[@xavier.xiques]

Good video, thanks!

[@drivetrainerYT]

Goldmine Channel. Subbed.

[@microdesigns2000]

I'm just here to say how much I appreciate the pachinko machine!

[@toma1385]

Really good idea.

[@David-qz1rd]

Nice.. we should focus more on the basics and common mistakes!

[@rogerio43898]

Muito interessante, aprendo "English" e programação ao mesmo tempo. I'm from Brasil.

[@ChrisStayte]

Good basic video.

[@BinaryNexus]

Another awesome video. I would love for you to do a video on the proper way to handle secrets for open source apps and setting those secrets during deployment to the AppStore/GooglePlay using AppCenter.

[@JamesMontemagno]

I am learning all things GitHub actions now and may do a video on that. Checkout github.com/jamesmontemagno/app-ac-islandtracker/blob/master/appcenter-post-clone.sh for secrets in app center

[@ishmaa6804]

Oof. I always put logic in getters/setters to update UI stuff. Not sure if I will use this method from now on - but now I know of it and it is awesome

[@joshlueck1302]

Cool video. Can you do a video showing how to handle environment configurations in Xamarin/Maui. Include things like how to substitute in the plist and manifest, plus a recommended way to manage api calls. Been doing Xamarin for a few years and this seems to be absent from the documentation.

[@Jad.abouzaki]

Thank you

[@al02525942]

Super amazing

[@turgaysenlet]

Once again, very concise and helpful video, thanks! I learned a life-long skill from a video under 20 mins :)) I have a question about the possible React integration that is being mentioned here. Is there a good way to use React with Xamarin Forms or MAUI? I have not found any tutorials or descent-looking NuGet packages for this purpose. Do you have any pointers? Thank you

[@majesticjester1]

How do you data-bind/notifypropertychanged if there is a list inside the person model

[@efexzium]

Can this work for a collection of objects that have internal properties?

[@rushas]

Great tips. I'm also amazed with the capability of the auto-complete. Is that regular intellisense? Because mine does not seem to be as clever as yours. Any suggestions on configuring it?

[@JamesMontemagno]

Just regular Visual Studio 2022 community edition:) nothing else

[@rushas]

@@JamesMontemagno Then I guess I should start using 2022, instead of 2019 :)

[@Adam-ce5mq]

Excellent video - really well presented and clear information! I really appreciate content where best practices are explained and coding problems solved in real-time. I do wonder about moving the INotifyPropertyChanged implementation to the model. I think it's been mentioned it in other comments but it does feel like UI concerns are leaking into the domain. With a simple example like the Person class in the video, where it's essentially just a POCO, I'm not sure it matters too much. But if the Person class were to grow more rich, encapsulating more person-y behaviour, as it would in a real application, then I think the INotifyPropertyChanged code starts to look more and more out of place. To be clear, I don't think this is an issue with your content, more something which seems to be an inherent quirk of the MVVM pattern.

[@JamesMontemagno]

Yeah, every app is different, but again think about the situation where you have a list of people and their properties are updating and you want to update the UI. INotifyPropertyChanged actually has nothing to do with the UI and is just an interface that people can subscribe to. Maybe i'll do a full video on it :)

[@mamahaha7472]

@@JamesMontemagno beginers here. stuck on this problem too, hope you do a full video 🥲

[@dyn01234567]

@@JamesMontemagno I'd really appreciate a video on this! One thing that has always confused me about MVVM is how and where OnPropertyChanged() should work. I usually put it on properties in my VM, which have a backing store from a model. However, if I have a service that updates my Model, then what is the best way to push these changes to the VM? Should the model notify the VM the way the VM notifies the view?

[@radoslavatanasov8846]

Awesome video James! Could you show us how to notify property of PersonViewModel when some of the Person properties is change? I mean when we change Person.Firsname from the UI to change property that is in the PersonViewModel.

[@doublebass120]

The Person model implements INotifyPropertyChanged ("INPC"). This interface has a PropertyChanged event, which is raised whenever you make a change to a property. You can add an event handler in the view model to subscribe to that event: Person.PropertyChanged += (s,e) => Console.WriteLine("property on person changed");

[@BeastModeDR614]

Any examples on how to pass data between views? Like Lists, Single Objects etc....

[@jamesbalisciano2922]

6:15 Just for a more thorough understanding of the C# language, I think it's worth noting that the error message was correct. There was no firstName *property*. A variable declaration without getters and setters is a field. Fields are not properties, and the binding system works with properties.

[@eddienoureddine7408]

Is there a situation where we need to notify property changed for static properties ? ! if yes why does it not work with OnPropertyChanged?

[@frankruscil680]

Any Data Binding examples for Lists within Lists? I have a collectionview that binds to a list of "Functional Areas" (a,b,c, etc.) but within each "Functional Areas" (a,b,c, etc.) I need to display a list of buttons. The "Functional Areas" and child buttons are displayed based on user permissions.

[@BeastModeDR614]

Any examples on how to pass data between views? Like Lists, Single Objects ???

[@aboubacar.traore]

Great video, but I wonder wouldn’t INotifyPropertyChanged cause an error if the object is used in EF as Database?

[@JamesMontemagno]

Shouldn’t it is a copy out of the database, you would want to save it if it was changed

[@dreamdancer8212]

Great video. Its clearing up a lot of little things for me. I wonder however whether implementing the NotifyPropertyChanged functionality into the (Domain) class Person is violating the Seperation of Concern principle? Shouldn´t dealing with the UI exclusively be done by the ViewModel? Or did you not regard the Person class as a Domain class? Or am I wrong at all with this thought and there is something I didn´t understand?

[@JamesMontemagno]

I think it is up to you. You may have a list of people in a ListView and then be updating their properties and want the UI to update so that would be the main way of doing it. I don't think it is an issue personally. It is still separated and if no one is listening then it doesn't hurt anyone :)

[@dreamdancer8212]

@@JamesMontemagno Hi James, thank you for the quick response. I guess you are right and it most likely depends on what you are trying to achieve. My Question arose from remembering working on a WPF project and trying to figure out where to put the functionality - into the Class or into the ViewModel. Both seemed to have pros and cons. And as always there don´t seem to be the one, "always right" answer. Thank you for the really helpful videos and I am eagerly waiting for the next one. :)

[@mohamedzarif4473]

good

[@zechsd1756]

Ok, maybe someone can help me out, I am wondering, cause I still kind of had problems telling the difference between ViewModel and Model. At the end of this example, the Person file would be the model and the PersonPageViewModel file would obviously be the ViewModel, am I right?

[@mdrahbarahmedkhan]

Hi James, I need help. Actually I have an Item Control and when I populate the same with data it comes around 50-80 item in the Grid Each Item Control has button. On click of that button I wanted to open popup but that pop-up should be inside the item control area. Could you please help me

[@cptechno]

I want to create a XAML visual component (rectangle) that will have lots of copies but with different information. Let's suppose 100 copies. I plan to use the XML Grid container to display the visual components. My question is: How can create a visual component in XAML? Can you point to possible parent classe(s)? Can I use XAML to implement the visual component? Any advice or pointers would be greatly appreciated.

[@richardle899]

Please make a video of Xamarin bluetooth connection tutorial, Thank you.

[@JamesMontemagno]

Will try

[@richardle899]

@@JamesMontemagno, Thank you very much 😃

[@ElCidPhysics90]

Why did you write get => password instead of get { return password} in the additional optimization part?

[@JamesMontemagno]

Just more modern syntax, newer C# features

[@ElCidPhysics90]

@@JamesMontemagno thank you.

[@sl023]

Hello James , Need about the unit test in .NET MAUI .

[@JamesMontemagno]

nUinit, xUnit, and of the standard unit testing stuff would work. Checkout what the team uses github.com/dotnet/maui/tree/main/src/Core/tests

[@prakashsza]

Please create a binding advanced video, thanks

[@JamesMontemagno]

What specifics would you like to see?

[@beelzaBob]

Here's what's confusing to me about this: in all of Jason's tutorials, he has a page and a corresponding ViewModel. For example, MainPage would correspond with MainPageViewModel. That isn't the case here -- there's a View without a ViewModel and a ViewModel without a View (MainPage has no ViewModel, PersonPageViewModel has no View). I know it's not his code, but I'm surprised he didn't address this, as it's confusing the heck out of me. I'm brand-new to everything except C# here, so I know there are assumptions concerning basic understanding that I'm missing, but... I don't know how to deal with this issue. EDIT: I didn't see he posted the code. So, yeah, that sort of solves that.

[@romekin]

yup, without a get/set its not a property but a field!

[@weslyarfan8407]

Hai Bro, is there any suggest from you? Sorry to ask you here, my Problem is, I want to export Xamarin.Forms Scrollview to Pdf. Please help me to reach it out. Thanks..

[@JamesMontemagno]

Do you mean you are trying to display a Pdf?

[@achilleaskaragiannis4947]

I have done this in WPF you first convert it to XPSand then to PDF its quite a headache but it can happen

[@yobofunk5689]

[CallerMemberName] is quite nice instead of declaring every name...

[@JamesMontemagno]

Checkout my MVVM helpers that really simplifies all of this stuff kzbin.info/www/bejne/r2m9oniFgamYpZo

[@matheusguifer]

captions could use a review

[@snapback9221]

Observerpattern

[@berto3538]

you must have BindableBase¡¡¡

[@JamesMontemagno]

In MVVMHelpers I do. checkout my other videos on it.

[@kamertonaudiophileplayer847]

Never keep a password with a person. Why? A password isn't an attribute of the person.

[@JamesMontemagno]

I probably wouldn’t store a password in clear text in the database is what I’m saying. I’m not a security expert but there are some best practices to follow out there.

[@kamertonaudiophileplayer847]

@@JamesMontemagno So my remark is a perfect for these best practices.

[@earthlingthings]

Xaml can't bind unless default constructor in vm. That's.oftem left out of these binding tutorials. These are not real world examples.

[@yaroslavpanych2067]

I call it "rotting of the brain" syndrome. The field "firstname" is there, and there IS a way to get or set it, just by getting or setting it. Dude has already forgot his basics. Property is a tool to achieve some specific purpose. That purpose is to control value assignment or reading. In this case, such control is not needed, so FIELDS are OK. And if some stupid library doesn't accept fields where properties are fed, that is the problem of the library.

[@JamesMontemagno]

Yes it is totally true that you can just get and set fields. Binding generally doesn't work to fields. Most binding is based, in part, on the ComponentModel PropertyDescriptor model, which (by default) works on properties. This enables notifications, validation, etc (none of which works with fields).