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

In the previous video we populated our CollectionView with static data. Time to change that! In this video we will get JSON data from a remote source, deserialize that and while doing we will learn all about MVVM, data binding and dependency injection so that our code stays clean and perfectly maintainable!

💝 Join this channel to get access to perks:

Disclaimer: this channel is done on personal title, in my free time, and not officially affiliated with or endorsed by Microsoft (my employer) in any way. Opinions and views are my own.

🔗 Links

⏱ Timestamps
00:00 - .NET MAUI Add MVVM To Our App
00:12 - What is MVVM?
06:17 - Implement INotifyPropertyChanged
10:35 - Add Bindable Properties to BaseViewModel
14:50 - Retrieve JSON Data from Remote Source
18:21 - Load JSON From App Resources
19:31 - Implement MonkeysViewModel
21:09 - View Model Dependency Injection (Constructor)
26:21 - Execute Logic in MVVM with Commands
28:35 - Implement the Improved View
30:24 - Implement Data-Binding
41:34 - Make Your MVVM Life Easier with CommunityToolkit.Mvvm

🎥 Video edited with Filmora

🙋‍♂️ Also find my...

#dotnetmaui #maui #dotnet6

[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!

[charlesemge]

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

[pauldb]

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

[chezchezchezchez]

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

[playerzzt]

best maui tutorials I found so far, thanks!!

[sciman]

Thank you Gerald for your great content.

[jacobhamblin]

Thank you so much for this! Very helpful!

[davidkim]

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

[Elmigo]

This video really helped, thanks a lot!

[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.

[munawarkhurshid]

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

[alexarchangel]

Wazzup Gerald, your lessons are clear.

[fieryscorpion]

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

[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?

[Cary]

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!

[baseljuma]

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

[KaraboKNtswane]

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

[michaelrogers]

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.

[jeffreyharms]

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?

[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 ?