.NET MAUI – Manage App Resources

Resource management is one of the key aspects of app development, be it mobile or desktop. The developer has to deal with a variety of resources ranging from images, fonts, splash screen, styles, and raw assets like HTML, PDF, or could be even simple text files.

That too when it comes to cross-platform development, each platform has its own way of managing resources and it’s a daunting task for the development team to know and manage all those things. For example, image requirements in multiple sizes to support devices with various resolutions for a rich experience. Fortunately, icon fonts solve a part of this problem by auto-scaling. But still, font is managed differently in each of the platforms.

In the case of images, tools are out there, both free and commercial, to generate images in various resolutions from a single large-sized image. Here, image updates would be an issue either they are named differently following a convention or to be made available in different folders.

Then came the vector images (SVG), which scales smoothly, even in very high resolutions, without getting pixelated. Still, as I pointed out earlier, platforms handle resources in their own way.

Being a cross-platform UI toolkit, Xamarin.Forms supported these scenarios to a certain extent from the shared library. For example, fonts can be added to the shared project itself as an embedded resource and then registered with the ExportFont attribute.

.NET MAUI, being an evolution of Xamarin.Forms took note of these developer headaches and provides an elegant solution to manage the resources effectively. The ultimate design goal of one single project for all supported platforms paves the way to manage resources from one place. Be it fonts, images, splash screen, or raw assets.

And most importantly, built-in support for SVG images without any additional tool/package requirement for images and splash screens.

If you closely take a look at the Single project structure in the default template, there is a folder named Resources, under which SVG images are included and used as the image source and splash screen.

In .NET MAUI, resource files can be tagged into different categories using BuildAction based on the role they play in the project.

They are:

CSS style definition and Raw assets are not included in the default template.

After adding a resource file, the build action can be set in the Properties window. It can be accessed from the right-click context menu of that file in the solution explorer.

Want to do some automation on this, then designate a folder for each of the resource types and configure it in the project file. Refer to the below sample.

<ItemGroup>
	<!-- App Icon -->
	<MauiIcon Include="Resources\appicon.svg" ForegroundFile="Resources\appiconfg.svg" Color="#512BD4" />

	<!-- Splash Screen -->
	<MauiSplashScreen Include="Resources\appiconfg.svg" Color="#512BD4" />

	<!-- Images -->
	<MauiImage Include="Resources\Images\*" />

	<!-- Custom Fonts -->
	<MauiFont Include="Resources\Fonts\*" />

	<!-- Custom Assets -->
	<MauiAsset Include="Resources\Raw\*" />
</ItemGroup>

Here * infer that all the files within that folder are to be treated of the type mentioned. If you want to include files from sub-folders too, then configure it like Resources\Images\**\* for images and similarly for others too. ** indicates all folders from that level.

Pro Tip: Use lowercase filenames while adding images to the .NET MAUI App

Now splash screen can be configured from a single place, specify the SVG image and background color. The image would be auto-centered and the background filled with that color.

For App Icon, specify an SVG for app image, a foreground image (note the difference from splash screen) and IsAppIcon attribute set to true.

Update: Starting Preview 11, the MauiIcon build action has been introduced and the IsAppIcon property on the MauiImage build action is removed.

And reg. Fonts, there is an additional step required, registering it in the CreateMauiApp() method with an Alias for each of the font files (later to be set as value to FontFamily). Sample code below.

public static class MauiProgram
{
  public static MauiApp CreateMauiApp()
  {
    var builder = MauiApp.CreateBuilder();
    builder.UseMauiApp<App>()
           .ConfigureFonts(fonts =>
           {
             fonts.AddFont("fa-regular-400.ttf", "FAR");
             fonts.AddFont("fa-solid-900.ttf", "FAS");
             fonts.AddFont("OpenSans-Regular.ttf", "OSR");
           });
    return builder.Build();
    }
}

XAML UI and CSS files are automatically assigned with the MauiXaml and MauiCss BuildAction respectively.

Raw assets will be copied to the appropriate platform folder, bundled into the app package, and available to access within the application. Then it can be used as help documents, overview files shown on app startup, etc.

External CSS files can be used as style definition (an alternative to XAML-based style definition), useful for people from web backgrounds. Now it’s been updated with maui- prefix. Not all CSS properties are supported, refer to the documentation for more details once made available. And then it can be added to the Application resources using:

<StyleSheet Source="Themes/App.css" />

In this article, we’ve seen how to manage resources in .NET MAUI application from a single project for all the platforms it supports.

Stay connected as we continue to learn and share in this exciting journey of being a software developer.