Dependency Injection in ContentView

[nor0x]

how would one access a registered ViewModel in a ContentView ?

public partial class HomeView : ContentView
{
    HomeViewModel vm => BindingContext as HomeViewModel;

    //doesn't get called
    public HomeView(HomeViewModel viewModel)
    {
        vm = vm;
        InitializeComponent();
    }

     //issues with missing parameterless default constructor
....
}

for ContentPage the following works just fine

public partial class MainPage : ContentPage
{
    StartViewModel vm => BindingContext as StartViewModel;

    public MainPage(StartViewModel vm)
    {
        BindingContext = vm;
        InitializeComponent();
    }
...

}

[HausBJB]

Hello, I am using this class here.
https://github.com/davidortinau/WeatherTwentyOne/blob/main/src/WeatherTwentyOne/Services/ServiceExtensions.cs

Unfortunately, I don't know of any other option

[yairp03]

You have to register all of your Views/Viewmodels/Services when building the Maui application on MauiProgram.cs

[yairp03]

Maybe you are creating the ViewModel binding context inside the view's xaml?

[nor0x]

previously i had

    <ContentView.BindingContext>
        <vm:MyViewmodel />
    </ContentView.BindingContext>

which works fine but also if the ViewModel itself doesn't have anything injected via its constructor.
i removed it to try ViewModel injection in the code-behind constructor - but when i want to use the ContentView in other parts in my XAML i.e. MainPage.xaml <views:MyView .... /> i get the following errors

Error	XLS0507	Type 'MyView' is not usable as an object element because it is not public or does not define a public parameterless constructor or a type converter.	App\Views\MainPage.xaml	21	
Error	XFC0004	Missing default constructor for "App.Views.MyView".	\App\Views\MainPage.xaml	21	

[yairp03]

Can you upload the project to a repo and send a link?

[nor0x]

sure, here is the repro at tree 8363
https://github.com/nor0x/MauiFails/tree/8363

[yairp03]

The problem is you're trying to create an instance of MyView inside of the MainPage's XAML, so the program searches for a constructor with no parameters for MyView. Why are you trying to add MyView to the MainPage? If you intend to use MyView as a custom control, I think a good practice is not to give it a ViewModel or some Services, but just the properties the control needs. I suggest looking at this guide. If it's not for a custom control, then just use a single page instead of nested ones.

[ExtSolTech]

Another way:
use MauiProgram.GetService() static method.

public static class MauiProgram
    {
        static IServiceProvider serviceProvider;

        public static TService GetService<TService>()
            => serviceProvider.GetService<TService>();

        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();

            builder.UseMauiApp<App>()
                   .ConfigureFonts(fonts =>
                   {
                       fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                       fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                   });

            //builder.ConfigureLifecycleEvents(e => 
            //{
            //    e.AddAndroid(android => android.OnActivityResult((act, req, res, intent) => 
            //    {
                    
            //    }));
            //});

            

            builder.Services.AddSingleton<WelcomeViewModel>();

            var app = builder.Build();
            serviceProvider = app.Services; // store service provider reference

            return app;
        }
    }

[cworth33]

It's difficult to find good work arounds. This is exactly what I was needed. Since I couldn't inject the singleton service through the constructer (like you can for any other page or class) then use my content view in markup I had played with other work arounds that just resulted in more headaches. I tried passing my service as a bindable property, which appeared to work just fine on debug and emulator. But this crashes the app on release builds. Using this method get the service via a service provider works in both debug and release builds.

[aschuhardt]

To expand on the MauiProgram static method solution from @ExtSolTech, here's what I'm doing currently. This lets the object still be testable.

public class BookmarkButtonImageConverter : IValueConverter
{
    private readonly IBrowsingDatabase _browsingDatabase;

    // capitulate to XAML and provide a parameterless constructor that mimics DI
    public BookmarkButtonImageConverter() 
        : this(MauiProgram.Services.GetRequiredService<IBrowsingDatabase>())
    {
    }

    // actual good DI constructor, testable
    public BookmarkButtonImageConverter(IBrowsingDatabase browsingDatabase)
    {
        _browsingDatabase = browsingDatabase;
    }

[herrld]

thank you this gave me exactly what i needed

[sabrigo]

thank you, this helped me.

[thewrath]

I was wondering about this and I remember seeing that in Shell you can declare pages that are "wired" by dependency injection:
<ShellContent ContentTemplate="{DataTemplate login:LoginPage}"> </ShellContent>

and the constructor of LoginPage which depends on LoginViewModel :

public LoginPage(LoginViewModel loginViewModel)

What makes this behavior possible is DataTemplateExtension, which resolves the contentView via the DI (so everything is correctly injected):
https://github.com/dotnet/maui/blob/main/src/Controls/src/Xaml/MarkupExtensions/DataTemplateExtension.cs

Do you think it would be possible to set up an extension to autowire a contentView from Xaml? Is this recommended, or is it not really what MAUI expects?

[Cybrosys]

I'd love some DI support with ContentView. I'm trying to create reusable UI elements with business logic or specific behaviors. Doing this without being able to inject services into them is an issue.

For now I'll have to go with the above mentioned workaround with a static IServiceCollection property and have the ContentView resolve its dependencies using that.

[thewrath]

With a bit more experience on MAUI, I think ContentView isn't really made to work with DI.

If you want to make a reusable view element, you need to make its behind code completely self-contained, otherwise the dependency has to go through the BindableProperty (e.g. compute the data to display outside of your ContentView), for ContentPage it's a different story, and the DI works perfectly.

If you want to work with business or application logic, I suggest you use a ContentView / ViewModel combination and interact with it through MessageCenter.

I'm applying this to my new MAUI developments and I'm having less difficulty - I find the interaction between elements more natural.

[Cybrosys]

But who's going to resolve the services/dependencies the ViewModel has then.

I'm relying on the framework to inject view models into my page's constructors. What I'm missing is being able to do the same for my content views. I get DI not working on custom controls, but content views can be used for creating reusable sections of pages, so not supporting DI feels like a missed opportunity.