Categories
.NET MAUI Desktop Mobile Xamarin

.NET MAUI – Manage App Resources

Manage app resources like Fonts, Images, Documents, Splash Screen from one single project.

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 registering 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 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:

Resource TypeBuildAction Tag
ImagesMauiImage
Splash Screen imageMauiSplashScreen
FontsMauiFont
Style definition using external CSSMauiCss
Raw AssetsMauiAsset
XAML UI definitionMauiXaml
.NET MAUI – Resource Tags

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 -->
	<MauiImage Include="Resources\appicon.svg" ForegroundFile="Resources\appiconfg.svg" IsAppIcon="true" 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.

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

public class Startup : IStartup
{
    public void Configure(IAppHostBuilder appBuilder)
    {
        appBuilder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("fa-regular-400.ttf", "FAR");
                fonts.AddFont("fa-solid-900.ttf", "FAS");
                fonts.AddFont("OpenSans-Regular.ttf", "OSR");
            });
    }
}

XAML UI files are automatically assigned with the MauiXaml BuildAction and no action is required from the user.

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 background. 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.

By Vijay Anand E G

Passionate software professional