Failing to load resource dictionaries when using DI

Question

I'm trying to figure out why when I'm using dependency injection in a .net maui app it fails to load the resource dictionaries defined in my app.xaml. If I remove the dependency changes, the app works as expected. It's like it's loading my primary page before it has fully loaded the app.xaml but I can't figure out how to get it to work.

My MauiProgram.cs has the the following code (reduced for simplicity sake):

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


builder.Services.AddSingleton<PropertyListViewModel>();
builder.Services.AddSingleton<PropertyListView>();

My App.xaml.cs has the following:

public partial class App : Application
{
   public App(MyFirstPage myFirstPage)
   {
      InitializeComponent();
      MainPage = myFirstPage; //new AppShell();
   }
}

And my app.xaml has the following:

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:MyApp.Mobile"
         x:Class="MyApp.Mobile.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

and the problem occurs as FirstPage.xaml has the following code (reduced for simplicity sake):

...
<Frame HasShadow="True"
       BorderColor="{StaticResource Primary}" />

As you can see, it's trying to access a Static Resource called Primary which is defined in the Colors.xaml resource dictionary. This is created with the default solution and it is spelled correctly and as I said, if I remove the dependency code, everything works as expected but I've got to adjust the constructor of the view and the viewmodel accordingly.

If you need more code, let me know but I'm hoping someone else has encountered this problem and has a solution for it.

I've actually found an article that explains how to use Dependency Injection with Maui and I think I'm doing it correctly, but maybe I've missed something but note that at the very end of the article, in the comments section, someone mentions a very similar issue:

why when use dependency injection in Appxaml.cs the static resources in MainPage.xaml can’t be found

Unfortunately, the author has not replied.

Learn How to Use Dependency Injection in .NET MAUI

I also found this article: Why .NET-Maui Global Styles are not working, which looks like the same problem, but the answer are not quiet related to my problem.

Could the problem be that my page is defined in a Views folder with adjusted namespace accordingly while my app.xaml is in the root of my problem?

Thanks,

Thierry

Answer 1

I found a solution for it where if I use the AppShell, it works as expected.

This is what I have now. The App.xaml.cs:

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        MainPage = new AppShell();
    }
}

AppShell.xaml.cs:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MyApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MyApp"
    xmlns:views="clr-namespace:MyApp.Views"
    Shell.FlyoutBehavior="Disabled">

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate views:MyFirstPage}"
        Route="MyFirstPage" />
</Shell>

MyFirstPage.xaml.cs:

public partial class MyFirstPage : ContentPage
{
    public MyFirstPage(MyFirstPageViewModel viewModel)
    {
        InitializeComponent();

        BindingContext = viewModel;
    }
}

Once these changes were made I was able to use dependency injection and my App.xaml page is initialized, followed by AppShell followed by MyFirstPage.

If you want to open the page directly using:

public partial class App : Application
{
    public App(MyFirstPage myFirstPage)
    {
        InitializeComponent();

        MainPage = myFirstPage;  // new AppShell();
    }
}

Also, I tried the change suggested by @LiyunZhang worked i.e. change StaticResource to DynamicResource:

...
<Frame HasShadow="True"
   BorderColor="{DynamicResource Primary}" />
....

Answer 2

You can follow up this issue about Can't use App.xaml resources after Dependency Injection .NET MAUI on the github.

And you can also try to use the DynamicResource instead of the StaticResource, such as:

<Frame HasShadow="True"
       BorderColor="{DynamicResource Primary}" 

Using DynamicResource will make the DI work without any exception. Because it defers looking up the resource until it is needed at runtime.