Dependency Injecting breaking axaml live view

[Oyyou]

Hello! I've set up DI to get services passed around my views without the all the hassle of passing my services around. This works, but the axaml live view isn't happy with me and it's becoming tiresome

App->OnFrameworkInitializationCompleted

    public override void OnFrameworkInitializationCompleted()
    {
        BindingPlugins.DataValidators.RemoveAt(0);

        var collection = new ServiceCollection();
        collection.AddSingleton<ISettingsService, SettingsService>();
        collection.AddSingleton<IGitService, GitService>();
        collection.AddSingleton<ILoggerService, LoggerService>();
        collection.AddSingleton<IRepositoryService, RepositoryService>();

        collection.AddSingleton<SettingsService>();

        collection.AddSingleton<MainWindowViewModel>();
        collection.AddTransient<ProjectListViewModel>();
        collection.AddTransient<SyncViewModel>();

        collection.AddTransient<ProjectListView>();
        collection.AddTransient<SyncView>();

        var services = collection.BuildServiceProvider(validateScopes: true);

        if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
        {
            // Avoid duplicate validations from both Avalonia and the CommunityToolkit. 
            // More info: https://docs.avaloniaui.net/docs/guides/development-guides/data-validation#manage-validationplugins
            DisableAvaloniaDataAnnotationValidation();
            desktop.MainWindow = new MainWindow
            {
                DataContext = services.GetRequiredService<MainWindowViewModel>()
            };
        }

        base.OnFrameworkInitializationCompleted();
    }

MainWindowViewModel->ctor

public MainWindowViewModel(IServiceProvider serviceProvider)
{
    this.Tabs.Add(new TabItem
    {
        IsActive = true,
        Icon = "Sync",
        Content = serviceProvider.GetRequiredService<SyncView>()
    });

    this.Tabs.Add(new TabItem
    {
        IsActive = false,
        Icon = "ListBoxOutline",
        Content = serviceProvider.GetRequiredService<ProjectListView>()
    });
}

The code compiles and runs fine, but when I go to the view, I get an error in the Error List, and I can't see the live view:

From what I can tell, this is an issue with Avalonia trying to be clever and give me a nice preview of my app. While that would be great, it's clearly not working, so I'd rather I could disable whatever feature is causing this and be able to see my window

Any ideas?

[tobyfirth]

When running in the visual studio design viewer, ApplicationLifetime is null so nothing inside that if block will run when the view is displayed in the designer.

The viewmodel what is used in the design view should be provided by the use of in the MainWindow.axaml or MainView.axaml file.

<Design.DataContext>
    <vm:MainWindowViewModel />
</Design.DataContext>

What is the constructor being used for that? Is your MainWindowViewModel constructor being called with a IServiceProvider that has not had a SyncView added to it?

[Oyyou]

Okay. Your comment did spur on some changes

Added the vm to the SyncView.axaml

<Design.DataContext>
  <vm:SyncViewModel/>
</Design.DataContext>

Added an empty ctor to the SyncViewModel

    public SyncViewModel()
    {
        
    }

    public SyncViewModel(
        ILoggerService loggerService,
        ISettingsService settingsService,
        IRepositoryService repositoryService,
        IGitService gitService)
    {
        this.loggerService = loggerService;
        this.settingsService = settingsService;
        this.repositoryService = repositoryService;
        this.gitService = gitService;
    }

Added an empty ctor to the MainWindowViewModel

public MainWindowViewModel()
{
    
}

public MainWindowViewModel(IServiceProvider serviceProvider)
{
    this.Tabs.Add(new TabItem
    {
        IsActive = true,
        Icon = "Sync",
        Content = serviceProvider.GetRequiredService<SyncView>()
    });

    this.Tabs.Add(new TabItem
    {
        IsActive = false,
        Icon = "ListBoxOutline",
        Content = serviceProvider.GetRequiredService<ProjectListView>()
    });
}

That has removed the error, and now the individual views show their content. Unfortunately the nested content isn't loaded - but at this point I'm happy! :)

[maxkatz6]

You are not limited to <Design.DataContext><vm:SyncViewModel/></Design.DataContext> declaration of the design view model.
You can create your viewmodel instance elsewhere with all the necessary services injected, and reference it via x:Static extensions.
Or you can add a simple markup extension for the using service locator inside.

[Oyyou]

That sounds cool - have you got a simple example of that?

[thevortexcloud]

Yep: #13743 (reply in thread)

Do note, that the Avalonia DI guide does not show you how to make a service locator. But it's fairly straight forwards (just make the built service collection a static somewhere) like in the example I linked.