Binding MAUI Views to View Models (w/ Dependency Injection!) - MAUI TUTORIALS

Learn how to bind views to view models the right way via dependency injection!
🕗 Timestamps:
0:00 - Introduction
0:31 - Issues w/ Binding from XAML or Code-Behind
2:22 - Binding to View Models via Dependency Injection
5:13 - What about Type Safety in XAML?
8:02 - But Now We Have to Write More Code!
9:20 - Summary
📦 Source code: github.com/SingletonSean/maui...
🔁 Full playlist: • MAUI Tutorials
💎 Become a Member: / @singletonsean
🏠 Discord: / discord
🐤 Twitter: / singletonsean_
🏆 Donate: www.paypal.com/donate?hosted_...
✉️ Email: [e-mail]
➖➖➖➖➖➖➖➖➖➖
© Credits
🎵 Outro: pixabay.com/music/synthwave-c...

[@Jwhite1979]

Dude, you need a medal.

[@m3xpl4y]

I love your videos. Thank you

[@jenniferdecota3867]

Should the AddView extension method also work for Subviews such as swapping ContentViews? I couldn't get it to work. I read Microsoft Maui DI documentation and maybe it isn't recommended for this? But I'm a bit confused ha! So I thought I'd ask :)

[@SingletonSean]

Would be interesting! I'm not sure it'd be possible since the parent views typically have direct references to the sub-views within XAML. I think it would take a lot more than just dependency injection to get that working unfortunately.

[@leonedev]

Does this mechanism works also for views or just for pages? Because as of now, it does not works when I inject dependency in a view, it will ALWAYS call the default constructor (i.e. parameterless one). Please I'm hardstuck on this

[@AndiSprick]

Hi, thanks for the hint. What about the midway, by injecting in the constructor of the code behind. public ProfileView(ProfileViewModel vm) { InitializeComponent(); this.BindingContext = vm; } Or is that not a clean injection?

[@DonovanBrown]

This how I do it. I don’t want logic where I am registering my services. But they both work so you have options.

[@billymartin6497]

I use separate methods for services, views, and view models in the MauiProgram.cs and sometimes will use a separate class altogether if a method gets to big. There is no reason you can't put the extension methods in a separate class instead of having them in your MauiProgram.cs

[@danielfuentes2119]

Could you make a video on how to extract data from the app.config file in .NET MAUI using .NET 8

[@Jeremygrmn]

Stil wrapping my head around view model instantiation in WPF vs MAUI. In WPF, you would register a factory in DI and create new instances of a VM using that factory, but in MAUI all the VMs ive seen are singletons. MAUI seems a lot cleaner with much less boilerplate, but definitely a different approach. Makes me feel a bit less in control, which might be a me-problem hahaha

[@SingletonSean]

Right! Like even if you register the view model as transient, it acts as a singleton. I suppose this is because the AppShell or something only resolves the view / view model once and then holds on to it? Seems like that should be configurable. I agree, feel like we're a bit less in control hahah

[@olivermunzberg1679]

@@SingletonSean That is not true. What you observe is that the AppShell instance (and there is only one hold by the very only one instance of App) has only a single instance for each ShellItem, which should not be such a surprise. And it is very easy to proove: Duplicate the MainPage ShellItem and change the Title and Route properties and run the application. Voila, when transient you get different instances and when singleton, well guess what.

[@JoseArce-cz4kl]

Why are you registering this using Singleton vs transient?

[@SingletonSean]

Good question! It actually won't make a difference either way. The will only resolve the value once, even if it's registered as transient. That said, I prefer to register it as a Singleton to align with this behavior.

[@billymartin6497]

I love this idea and it seems to work well in Shell, but I can't get it to work when using a FlyoutPage. Can you please address this?

[@SingletonSean]

Weird, I will have to look into this!

[@billymartin6497]

@@SingletonSean Thanks. It may have something to do with the navigation. I am using a FlyoutPage ViewModel with a collection of pages. When tapped, the command sets Detail = new NavigationPage.

[@billymartin6497]

Was wondering if you found anything out. Also, since there is no code for binding in the code behind, how can I call a method in the viewmodel from the code behind? I have a map that has no bindings, so I need to change the location in the code behind. Thanks.

[@sipepguru]

Why are you even using flyout page when she'll has a flyout option?

[@billymartin6497]

@@sipepguru I am using the Shell flyout. I am just using a collectionview inside it.

[@bl1c]

❤❤❤

[@SingletonSean]

🙌🙌🙌