CODEWITHSUNDEEP
.netmauiappicon
Ade
Ade

Reputation: 118

Can I display the .Net MAUI composed appicon in a specific (non-default) position?

I'm just migrating an app from Xamarin to .Net MAUI. I have no problem displaying "images" anywhere I like at a specific requested size etc. However, I would like to display the default AppIcon at various specific locations in my app - eg custom title bar, custom menu bar etc, but I can't work out how to do it; every time I reference it I just get a blank space, albeit at the requested height.

The instructions say

".NET MAUI converts SVG files to Portable Network Graphic (PNG) files. Therefore, when adding an SVG file to your .NET MAUI app project, it should be referenced from XAML or C# with a .png extension. The only reference to the SVG file should be in your project file."

My appicon is made up of SVG background and foreground files and works fine as a standard appicon for Windows, ioS and Android where it shows up in the expected places. But surely I can use it at a place of my choosing? Or do I have to create my own version, in all the different sizes necessary for different playforms etc as in the bad old days of Xamarin?

Image Source="appicon.png" - blank is displayed Image source="some other image.png" - works as expected

Upvotes: 1

Views: 787

Answers (2)

Leon Lu
Leon Lu

Reputation: 9244

The maui icon consists of two files, appicon.svg and appiconfg.svg, where appicon.svg is the purple background and appiconfg.svg is the white ".net" text.

So you can use appiconfg.png in the xaml file as shown in the code below and add purple background color to it to achieve your requirement.

<Image
    Source="appiconfg.png"
    BackgroundColor="#512BD4">

Also note that after adding the appiconfg.svg image to the resources/images folder, you need to set its BuildAction property to MauiImage.

Upvotes: 0

FreakyAli
FreakyAli

Reputation: 16547

When you display an image its build action should be MauiImage whereas incase of AppIcon this is MauiIcon, so the behaviour is as expected

If you want this to work add another SVG that has both foreground and background together and then use that make sure build action is MauiIcon

Upvotes: 0

Related Questions