How to scale images for iOS on MAUI?

Question

I'm lost on how to control images for iOS.
iOS cannot properly resize images (icons, toolbars, etc). In Xamarin we could use "@x" suffix for OS to choose certain size.

For example, if we defined "mypic.png" in code, for Andrond we put the same "mypic.png", but for iOS we do
******@1x.png
******@2x.png
******@3x.png

Now compiler throws error "invalid characters in filename".

Question is: how to properly manage image resources for iOS in MAUI?

Answer 1

Hello,

It's recommended that you use SVG files, and .NET MAUI will convert SVG files to PNG files. For more details, you can refer to Image - .NET MAUI | Microsoft Learn and Add images to a .NET MAUI app project - .NET MAUI | Microsoft Learn.
If you still want to define "@x" file, you can use an Asset Catalog to support every iOS device and resolution, please see Displaying an image in Xamarin.iOS - Xamarin | Microsoft Learn. This doc is about Xamarin, and the Image Sets folder cannot be created by VS for now, you can create the Image Sets and Json file manually, refer to the following steps:

1. Opening your Maui project folder, go to Platforms/iOS, create a new folder named Assets.xcassets, then add a new folder named CustomImage.imageset(or any other name you prefer to, it should be in "XXX.imageset" format)
2. Dragging your ******@1x.png, ******@2x.png, ******@3x.png image file into the CustomImage.imageset folder.
3. Adding a Json file named Contents.json into CustomImage.imageset folder with the follwoing content:

   {
   
     "images" : [
   
       {
        "filename" : "******@1x.png",
         "idiom" : "universal",
   
         "scale" : "1x"
   
       },
   
       {
         "filename" : "******@2x.png",
         "idiom" : "universal",
   
         "scale" : "2x"
   
       },
   
       {
   
         "filename" : "******@3x.png",
   
         "idiom" : "universal",
   
         "scale" : "3x"
   
       }
   
     ],
   
     "info" : {
   
       "author" : "xcode",
   
       "version" : 1
   
     }
   
   }

After that, you can display the image：

<Image x:Name="CustomImage"
                Source = "CustomImage"
              .../>

Or

CustomImage.Source = "CustomImage";

Best Regards,

Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.