Adding injected Pages to a TabbedView

[sinsedrix]

Description

TabbedView expects the children pages to have default constructor.

When a page constructor has an injected view model, it doesn't seem possible to add it to a TabbedPage.

Steps to Reproduce

1. Create a MAUI app
2. Switch MainPage to be a TabbedPage
3. Create a Page1Vm view model class and a Page1 page class
4. Add Page1Vm and Page1 as singletons.
5. Add as a child of MainPage
6. You'll get an error message at compile time

https://github.com/sinsedrix/MauiTests/tree/main/MauiTabbedDI

Version with bug

6.0.486 (current)

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

Windows SDK 19041

Did you find any workaround?

No

I tried to add a default constructor, but then the view model is not injected.

Relevant log output

Erreur	XFC0004	Missing default constructor for "MauiApp1.MainPage".	MauiApp1

[matt-goldman]

@ramonB1996 can you help here?

[Vroomer]

You can work around this by using static ServiceProvider class and calling GetService in the TabbedPage constructor:

public static class ServiceProvider
{
    public static TService GetService<TService>()
        => Current.GetService<TService>();

    public static IServiceProvider Current
        =>
#if WINDOWS10_0_17763_0_OR_GREATER
		MauiWinUIApplication.Current.Services;
#elif ANDROID
		MauiApplication.Current.Services;
#elif IOS || MACCATALYST
		MauiUIApplicationDelegate.Current.Services;
#else
		null;
#endif
}

TabbedPage constructor:

Children.Add(Services.ServiceProvider.GetService<FirstPage>());
Children.Add(Services.ServiceProvider.GetService<SecondPage>());

[sinsedrix]

In my case, I have a MainVm that holds an ObservableCollection of Page1Vm.

I would expect each view model to be applied to a page.

So this workaround won't work. :/

    public ObservableCollection<Page1Vm> Pages { get; } = new();

<TabbedPage ItemsSource="{Binding Pages}">
    <TabbedPage.ItemTemplate>
        <DataTemplate x:DataType="vm:Page1Vm">
            <Page1 />
        </DataTemplate>
    </TabbedPage.ItemTemplate>
</TabbedPage>

[ramonB1996]

@matt-goldman Would love to help. I am only using Android at the moment in my own project with your library.

@sinsedrix I have 3 small questions:

1. Does this issue also occur on Android for your reproduction?
2. Do you use standard .NET MAUI DI or do you use the package @matt-goldman provided
3. Did you try adding an empty constructor to see if that resolves your issue?

[sinsedrix]

@ramonB1996

1. With an empty constructor, the app also crashes on Android:

System.NotSupportedException: 'Shell is currently not compatible with TabbedPage. Please use TabBar, Tab or switch to using NavigationPage for your MauiTabbedDI.App.MainPage'

3. It's standard, which one is @matt-goldman DI?
4. It prevents compilation error, but leads to a runtime error (UnhandledException)

ArgumentException: Value does not fall within the expected range.

Here is a sample project:

• sinsedrix/MauiTabbedDI

[ramonB1996]

@sinsedrix Okay good to know. I will try this with your reproduction sample this week. Will get back to you.

You could try the Page Resolver package by @matt-goldman in the meantime; https://github.com/matt-goldman/Maui.Plugins.PageResolver

Follow the instructions and try if this resolves your problem :)
I know you might not want to install a package to get it to work, but this might at least help you continue in your project.

[sinsedrix]

An update was made on sinsedrix/MauiTests/MauiTabbedDI to land on a simple page.
Then a button navigates to the tabbed page.

The default page displays well.

The refresh manages to load tabs and the first displays.

When trying to select another tab, I get again the previous error:

ArgumentException: Value does not fall within the expected range.

[PureWeen]

Duplicate of #6389

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.