MVVM, Databinding and Dependency Injection - .NET MAUI Tutorial Step-By-Step

[@MaddCoder]

Your videos are amazing and easy to follow along. Some of the best tutorials I've seen and you're giving them to us for Free. Just wanted to let you know all your hard work and sharing your knowledge is very much appreciated!

[@jfversluis]

Wowow thank you so much for coming out and taking the time to say this. This is exactly the reason I do this. Thank you so much! 🥰

[@charlesemge3824]

AlsoNotifyChangeFor was changed to NotifyPropertyChangedFor -- Thanks Gerald. Just putting this at the top.

[@jfversluis]

Yep! Sorry about that :( check the attached repo for the latest code. Thanks for sharing!

[@jfversluis]

💡Looking for the next part in this course? Click here to find it, for this one it's all about navigation in .NET MAUI: kzbin.info/www/bejne/pnPLZoaOi7iqjtk Want to review the full playlist? You can do that here 👉kzbin.info/www/bejne/o5i6Z6usns6lh80

[@chezchezchezchez]

Gerald! This was amazing. I was scared of MVVM before this video, and now I added it to my project! Thanks so much!

[@jfversluis]

This is what I make videos for Jim! This is amazing, thank you so much! 🥰 made my day!

[@playerzzt1262]

best maui tutorials I found so far, thanks!!

[@jfversluis]

Thanks friend!

[@davidkim7812]

Your video is easier than anothers, so as like beginner for me good. Thank your your effort.

[@jfversluis]

That is great! Thank you so much!

[@simplebright4199]

Appreciate your hard work gerald

[@jfversluis]

I appreciate that you appreciate my hard work! Thank you!

[@pauldb879]

Great course, very clear and helped me a lot. Looking forward to your workshop thursday ! :)

[@jfversluis]

Looks like you already know it all! See you Thursday! :D

[@pauldb879]

@@jfversluis I'll look forward to the Microsoft job offer in that case ;)

[@KaraboK9Ntswane]

Man thanks for this video. I was always confused by the ViewModel duty. I work in a team of 24 people. Only 3 of us knows XAML and Im a Junior! all because i learned Silverlight while it was still new. WPF I worked at my job but I am really interested in learning MAUI

[@baseljuma158]

I think adding every service and view model to dependency injection will make the application messy ... it just need to be done for services that is used in multiple places or for services that are more likely helpers . Any way even that I feel you jumped multiple steps in one lesson but I think this is the best course I followed for .NET Maui

[@jfversluis]

You're free to do things differently to suit your needs. If you want to not register everything, feel free to do so!

[@michaelrogers6935]

Three questions about the awesome video: 1. The collection of Monkeys is in the view model, not the model. Since the Monkeys is what we are concerned with and adding to / deleting from, shouldn't that be part of the model too? 2. Why is the binding context set in the code-behind? Why not set it in XAML? 3. When it came to adding to containers (dependency injection with building.Services), what exactly should be added? As I (barely, maybe not at all) understand it, any Views that depend on ViewModels; the ViewModels that they depend on; and if those ViewModels depend on Services, those as well? Is that correct? My doubts about dependency injection notwithstanding, I found this video to be absolutely fantastic! I really appreciated that the author waited until the end to introduce ObservableObject, I like to see (a bit) behind the curtain to see how things work, it makes me appreciate the magic even more.

[@jfversluis]

Thanks Michael! I try to explain the under the hood first so that there is a good understanding of what all is happening if you would do it manually. But for most of the concepts there are libraries and helpers that will make your live easier, so I add them at the end. Great to see it's appreciated! 1. Typically your view model is tailored to whatever is shown in the view and doesn't necessarily map 1:1 to your model. Usually only whenever you're going to persist something then you will map things back to whatever it should look like for your backend and save it. If your app is not that complex and/or you don't have any need for that, use it in the model directly, there is no MVVM police that will fine you 😉 2. You can set it in XAML, however typically it's set in the code-behind because that way you can work with dependency injection. Also, if you set the binding context in XAML and the view model needs arguments in the constructor, you can still do it in XAML, but the XAML will become quite ugly, quite fast. Ultimately it's up to you! 3. Rule of thumb is, if you need anything injected or whatever is going to be injected needs to be registered. That typically means most of the things in your app: views, because they get view models injected, view models because they get services injected and the services because they need to be injected and potentially get other dependencies injected as well.

[@sviatoslavvovnianko3357]

Why do we add the ObservableProperty attribute on ObservableCollection property too?

[@jfversluis]

Technically you don't need both. With the ObservableProperty you notify the UI that a completely new instance of a collection has been assigned to the variable. With a ObservableCollection you enable the functionality to let the UI know that 1 (or more) objects inside of the collection are changing. The latter will not happen when you use a List for instance

[@fieryscorpion]

Great video! Thank you! Will you be also covering Unit Testing in this series?

[@jfversluis]

Not for this series, but I'll see if I can add it to my list of future videos :)

[@fieryscorpion]

@@jfversluis Great. Thank you sir!

[@darrabam]

44:00 LOVE IT 🤩!! Thanks

[@jfversluis]

Want to learn some more about the MVVM Toolkit?

[@darrabam]

@@jfversluis if it's going to reduce my code, of course!! I've tried other mvvm packages, but nothing seemed as convenient as this one

[@LordErnie]

I am very impressed by the quality of the course so far. It's been done very well, great job. Do you also get into platform specific code? And will you have a part on blazor integration as well? Me and me classmates would love to see that as we do blazor right now and I'm the only one who knows Maui. It would be a great opportunity for them to start working on app development. Great content, keep it up, much love from students across Einhoven and 's-Hertogenbosch.

[@jfversluis]

Eindhoven! I will be there June 8th at .NET Zuid 😉 thanks for the kind words! For this course there will be no Blazor but I have a full course on also creating a .NET MAUI Blazor app planned!

[@sciman434]

Thank you Gerald for your great content.

[@jfversluis]

Thank you so much for the support! I appreciate it!

[@abelanil]

In short words! The best

[@jfversluis]

Thank you 🥰

[@Cary581]

Hi Gerald, great tutorial! Thank you I really appreciate these. One thing I don't really understand is multiple pages that inherit from BaseViewMdoel. For example if a project has Page1:BaseViewModel and Page2:BaseViewModel. Is there two instances of BaseViewModel being created? If so, how can both pages see updated properties from BaseViewModel? For example, BaseViewModel has a property string Message, If Page1 changes the value, Page2 will still see an empty value or the updated value? I appreciate the help!

[@dmtuan]

Great content and teaching style. Love it, subscribed. I have a question about the Get Monkey button which loads the data. What if I want to load the data automatically as soon as I get on a page, without the need to click any buttons? Normally in Blazor I'd put all the code for getting the data from remote source in OnInitialize() or OnInitializeAsync() method. Is there an equivalent in MAUI? Thanks!

[@jfversluis]

Thanks friend, welcome! Of course that depends a little on how and what you want to do exactly. Probably the best place to do that would be to override the OnNavigatedTo (from the top of my head) on a page.

[@munawarkhurshid1201]

It would be great if you can cover the distribution of dotnet MAUI, perhaps as a single file exe (windows) or MSIX. This can very well be the final video in the series. Also would be nice to discuss implementation of menus l in AppShell using MVVM implementation to call commands in AppShell VM (Like a traditional WPF app). Overall great presentation

[@jfversluis]

Thank you! I got the distribution already covered: kzbin.info/www/bejne/fH_ap5KNaLmnibc

[@jacobhamblin1880]

Thank you so much for this! Very helpful!

[@jfversluis]

Glad it was helpful!

[@MalithBalasooriya]

Thanks for the great course Gerald. I have one issue, I do not see the CollectionView update when I click on the "Get Monkeys" button. It seems to me that the ViewModel has data, but the Page is not updated accordingly. But if you touch the CollectionView on the page, the page will be updated. Any thoughts around this?

[@anandshindey]

Great video Gerald. Just started catching up on MAUI. I have a question. How do i make IsBusy available to all my ViewModel classes? in Xamarin we had BaseViewModel itself where in the IsBusy was defined. What about MVVM in MAUI?

[@jfversluis]

You can of course create that base view model yourself or, I think the MVVM Toolkit has one built-in that you might want to use.

[@anandshindey]

@@jfversluis , Got it, thanks.

[@anandshindey]

Works. Thanks.

[@subramanyaprasad8847]

Very helpful , Thank you !!

[@jfversluis]

Thanks for watching!

[@balajisairamnarasimhan]

Thanks Gerald ham not seeing the text property getting binded from the model. I took the same code from your git repository ? any issues ? how can I fix that ? Can we use PRISM library here in MAUI ?

[@alexarchangel3537]

Wazzup Gerald, your lessons are clear.

[@jfversluis]

That is great to hear! Thank you so much for letting me know!

[@achilleaskaragiannis4947]

Why is it preferable to Clear the ObservableCollection then loop-add each element and not create a new one(like new ObservableCollection(monkeys))? aren't you firing n*collection changed instead of one property changed? Love your work and it's quality, keep it up!

[@--Eric--]

24:20 - In that case, you have to reinitialize the data binding.

[@mikelockyer6653]

Excellent quality video and code a great help. I have though noticed that the MVVM part 5 is not working correctly when using preview 2 (Microsoft Visual Studio Community 2022 (64-bit) - Preview Version 17.3.0 Preview 2.0) - the monkeys don't appear - I came across this in my code as well - seems binding is broken and can't seem to get ListView or CollectView to update - although they work on an initial fill So in your code I filled the Monkeys in the VM constructor and they appear OK but don't get updated correctly if you mess with update code to show only a few for example

[@jfversluis]

Yeah I got a couple of those reports. It might be bugged in .NET MAUI at the moment :( I think in the other comments there was a workaround.

[@mikelockyer6653]

@@jfversluis Yes must be a bug - I found that the only thing that worked was to call ScrollTo(0, 0) on any CollectionViews after updating the ModelView

[@rahul_salokhe]

👍 Please increase volume for next video. Can we call getMonkeyasync() fun. On page apering or viewmodel init ?

[@jfversluis]

Sure, call it whenever it makes sense to you!

[@yyttommy2456]

you are the best teather

[@jeffreyharms1469]

Gerald, really good stuff here. Many times in a mvvm project, we have a separate "model" class that we use to feed the viewmodel. Do you have a suggestion for how to use the model object as part of the get/set ritual with [ObservableProperty] decoration? For example we do this "public string test { get { return testmodel.description; } {set { testmodel.description = value; }} The only thing I can see now is that when the viewmodel is initialized, I will need to populate all of the [ObservableProperty] decorated vars. Then use the [AlsoNotifyChangeFor] to set the testmodel.description. Any thoughts?

[@scara1701]

The name was changed to [NotifyPropertyChangedFor]

[@RonaldRex-t8n]

Do you have a course covering MVVM, .Net Maui, and Delegates?

[@pierrelaurent1141]

Hi Gerald, thanks a ton for all of these videos. I now understand better MVVM concept (and i'm using it in a real project). At this point, i'm stuck because of a bit more complex model involving one to many or many to many relationships. For example : A Monkey can eat one or more type of Fruit. How to create/update Monkey using Databinding in that case (with Community Toolkit) ? Can you share us a link explaining that ?

[@jfversluis]

Thank you! And thank you so much for supporting this channel! I'm not really sure if I understand what you mean... It doesn't really matter if there is a many-to-many or any other relationship. As long as you implement the INotifyPropertyChanged (or do that through the Community Toolkit MVVM) it should all just work

[@tasher7882]

Great refresh coarse, first time using the toolkit, and AlsoNotifyChangeFor doesn't exist. Did it get removed?

[@jfversluis]

Hehe yeah it’s kind of unfortunate. They made a very breaking change and renamed that whole thing. Check the workshop repo it should have updated code.

[@tasher7882]

@@jfversluis Yep I saw it in the finished it is now called NotifyPropertyChangedFor for anyone else doing the vids.

[@pax9403]

@@tasher7882 Thanks for the update, also Gerald if you could pin the comment to the top of the page it would be nice to not have to look for it so far into the comments..

[@julianesteves41]

@@tasher7882 Thanks a lot!

[@Elmigo94]

This video really helped, thanks a lot!

[@jfversluis]

Great! My pleasure!

[@markrichards9792]

Thanks!

[@jfversluis]

You’re welcome!

[@russell4546]

Is there any way to pass the value of the property from the model to another variable in view model and then data bind it?

[@GuildOfCalamity]

Fantastic video!

[@jfversluis]

Glad you liked it!

[@petarkovacevic231]

Hi, can I somehow implement Map manipulation in my code-behind. I am using a MVVM comunity toolkit

[@josedonizeteoliveirajunior1744]

very good video. required duration. Thanks

[@jfversluis]

Thank you! Appreciate it!

[@demar0228]

Hi Gerald. How do you handle Dependcy injections and Tabbed pages? I'm receiving this error when I try to reference a page from my Tabbed page becuase it has Dependency Injection. Error XLS0507 Type 'HomePage' is not usable as an object element because it is not public or does not define a public parameterless constructor or a type converter

[@ricardothomas3779]

Hello Gerald, great course. Keep up the good work you are doing. On another note, I am able to run the app on Windows but not in the emulator or on my Note 10 device. I get Error XABLD7000: Xamarin.Tools.Zip.ZipException: Renaming temporary file failed: Permission denied in the emulator. I get Error XARLP7000 Xamarin.Tools.Zip.ZipException: Renaming temporary file failed: Unknown error on my device. Can someone please explain why ?

[@jfversluis]

Thank you Ricardo! Not sure about those errors though... Maybe put that in a search engine?

[@ricardothomas3779]

@@jfversluis thank you👍🏽

[@haroldpepete]

did you know command has canexecute option and you can check whether thr button is enabled or not

[@IvesSteve]

The latest version of CommunityToolkit.Mvvm doesn't seem to like [ObservableProperty] being used on bool? Also, What is the difference with CommunityToolkit Maui?

[@jfversluis]

Yeah they unfortunately made breaking changes between then and now. Check the workshop repository that has updated code

[@enricoroselino7557]

oh yeah right,i still need the BindingContext thing... x:DataType only for intelesense, then the problem come when i want to dependency injection my own service in viewmodel constructor... the BindingContext starts raising error. I Wonder if there is any way to load my own service not from constructor? OR the explanation source i read just obsolete on 2023

[@jfversluis]

There definitely have been some changes between the course and what is released today. I'm not 100% sure what you are asking, but as long as you register everything, services, view models and views, in the dependency injection container then it should resolve it for you.

[@michaelgamble2453]

I have been kicking around Xamarin for a while, found your course and have been following along. I did a search on the internet and found no answer, thought maybe with your experience with .NET MAUI you might have a suggestion. Up to this lesson my follow along code seems to work fine on Windows, Android, and iOS. But here I get the layout the button but no data ever appears on Android? I did some debug and sure seems to pull the data off the site, but I suspect something with the binding. I even fired up your example and the same result, yet again works on Windows, and iOS? Any ideas would be helpful.

[@jfversluis]

Ive seen that report a couple of times now so either the sample code got outdated, but since it works on other platforms the more likely scenario is; there is a bug right now for Android in .NET MAUI

[@michaelgamble2453]

@@jfversluis I saw a post somewhere where it was recommended to put a "await Task.Delay(50);" to slow down the binding. I put it in the finally and seemed to work.

[@jfversluis]

@@michaelgamble2453 glad you figured it out! Hopefully we can resolve that soon

[@Ghost-Boi]

@@michaelgamble2453 Did you put the await Task under the IsBusy=false or before I have tried both and I still have the same problem.

[@michaelgamble2453]

@@Ghost-Boi I ended up getting things working. I think with a new update to VS.

[@akshayjain3197]

Is there a way we can abstract the loader also and not keeping it on every single individual page?

[@jfversluis]

There are definitely ways :) Create a base page and show it on that

[@effectplacebo5663]

When MAUI will be realesed?

[@jfversluis]

Monday! 🙀

[@effectplacebo5663]

@@jfversluis For real? On monday we will get actual realese, not a candidate or preview?

[@jfversluis]

@@effectplacebo5663 No release candidate or preview. It will be launched at the Microsoft Build event!

[@effectplacebo5663]

@@jfversluis Thank you! Can not wait for this event. Also thank you for your tutorials, they are amazing

[@tasher7882]

I still can only use it in VS 2022 preview. Is that correct or am I doing something wrong.

[@sviatoslavvovnianko3357]

What is the diff between onClick and Command for a btn?

[@jfversluis]

Functionally not much, from a code standpoint: better separation of code

[@resler7ooo118]

Super crash

[@jfversluis]

Crash?! 😲

[@resler7ooo118]

@@jfversluis NET MAUI CRASH COURSE

[@jfversluis]

Haha ooooh 🤦‍♂️

[@KeesAlderliesten]

Is using AddRange not more efficient than adding the monkeys in a loop? Thus Monkeys.AddRange(monkeys);

[@jfversluis]

Probably, unfortunately there is no AddRange on a ObservableCollection

[@KeesAlderliesten]

@@jfversluis O, ofcourse, it's a OC and not a List, you are right!. Besides that, I have used Xamarin from v1 (a few projects, I'm not a fulltime developer) and was familiar with databinding. That helped me a lot with my current project, rewriting a 15+ year old asp.net framework application in Blazor. Same databinding concept. Now I'm catching up on MAUI and I'm delighted to see that the things I learned with Blazer (services, singletons etc) are the same in MAUI, that flattens the learning curve a lot 😉(and being 57 yo, learning isn't all that sime anymore 🤣)

[@mischa7823]

I don't know why but for me it feels wrong to register ViewModels in the DI Container. Is that irrational?

[@HermezTrimegisto]

But that's the Microsoft's documentation so far

[@khambleyart]

The ActivityIndicator is not showing up when I click on the "Get Monkeys" button. I added a Task.Delay(5000) so I could see it show up and it still doesn't work. It is bound to IsVisible="{Binding IsBusy}" property. When I hard-code the IsVisible to true. It shows up in the center of the screen where it should. I've tried it on both Android and iOS and it does not work.

[@jfversluis]

Does this also show with the Final project? If yes, it might be a bug in .NET MAUI. Thanks for watching!

[@khambleyart]

@@jfversluis Oh yeah, it works in the final project, so it must be something on my end. I'm using .NET 8 and I noticed your project is on .NET 7. Maybe that's it. I'll keep going and see what happens, I'm on part 3... Thanks!

[@michaelrogers6935]

At the 36:15 or so mark, the binding context was set ... But that discussion of how to resolve dependency injection, that was way to fast for me -- no idea what happened there, another one of those "look, it's magic!" moments that I'm just not a fan of.

[@jfversluis]

Totally understandable, unfortunately in this area there simply is a bit of magic that needs some time to wrap your head around. That's why I have multiple videos on this topic. Here is one for a more generic dependency injection explanation: kzbin.info/www/bejne/qoWtlqeQn5ipnZI And here is one specific to .NET MAUI: kzbin.info/www/bejne/rZzKk6mDodeAnrc

[@im1in260m]

I am watching this in 02/2024. So there have been changes. As a result, this will not build. Error XA5301 - "Failed to generate Java type for class: AndroidX.Core.View.Accessibility.AccessibilityManagerCompat/IAccessibilityStateChangeListenerImplementor due to MAX_PATH: System.IO.DirectoryNotFoundException: Could not find a part of the path 'C:\Users\...\Documents\Source\Repos\MonkeyFinder\Part 2 - MVVM\MonkeyFinder\obj\Debug et7.0-android\android\src\mono\androidx\core\view\accessibility\AccessibilityManagerCompat_AccessibilityStateChangeListenerImplementor.java'." And I have not been able to show the page on the Android Emulator (from earlier parts of the course). It gets hung up on Deploying. I waited 20 minutes for it. Can you tell me what to change to make it compatible with new emulators? I am using Visual Studio 2022 Enterprise.

[@jfversluis]

This had little to do with things changed over time. MAX_PATH is the key here. The generated path is too long. You might want to move it to something closer to your filesystem root. This is a limitation on Windows not .NET MAUI

[@SuperSlokky]

I'm confused about is busy. Page automatically searches for that property?