2

I am developing the Xamarin UWP project for an existing Xamarin forms project of mine. My existing project has support to Android and iOS only. Now, i am trying to extend the support to UWP as well.

In Xamarin UWP project what should be the icon sizes that needs to be used in UWP project so that it is compatible in all the devices(mobile, tablet and desktop).?

In Android we have the option of providing the sizes as per the drawable folders and in iOS we can mention the icon with their sizes like 1x, 2x and 3x. Likewise What is the method to add the icon assets used in the Xamarin UWP project.?

I have checked the below link and also tried to generate the icons used in the Visual assets tab in the package manifest file in UWP project but it has not worked. Relevant documentation here.

Anyone please provide me the way to generate or standard sizes of icons used in the Xamarin UWP project?

Martin Zikmund
  • 38,440
  • 7
  • 70
  • 91
Vijay457
  • 324
  • 2
  • 11

1 Answers1

0

UWP has very similar way of specifying image scales. The filename pattern is as follows:

ImageName.scale-XXX.png

Where XXX is the scaling factor of the image. The recommended scales you should provide are 100, 200 and 400, but you can also provide 150 and 125 optionally.

The size of the image should be scaled proportionally, so when your default image is 25 pixels wide at scale 100, it should be 100 pixels wide at 400.

For app icons and assets, this should be done for you easily using Visual Studio. For example, set the medium tile to Assets\Square150x150Logo.png and now in the Assets folder add images like:

  • Assets\Square150x150Logo.scale-150.png
  • Assets\Square150x150Logo.scale-200.png
  • Assets\Square150x150Logo.scale-400.png

Notice that you don't have any image with the exact file name (Assets\Square150x150Logo.scale-150.png), only the "scale" variants. The OS will use the appropriate one as it sees fit.

To see what sizes you need, check the guidelines in Visual Studio:

sizes

Martin Zikmund
  • 38,440
  • 7
  • 70
  • 91
  • I have tried to use the scaling as you have mentioned, but it does not work properly in tablet devices. What could be the size of an icon on scale 100. or how could we determine it.? I have given 12x12 as the icon size for scale 100. But it did not work. – Vijay457 Apr 03 '18 at 09:40
  • The correct pixel sizes of tiles and icons are visible in the **Visual Assets** tab in Visual Studio - they are right below the previews - for example 284x284 px for Small Tile at scale 400. See the image in my answer – Martin Zikmund Apr 03 '18 at 09:45
  • The images for tiles must have the correct size or they will not work. – Martin Zikmund Apr 03 '18 at 09:46
  • After using the asked source image of 400x400. Generated the images for the tiles mentioned in the below screenshot. But the name of the images generated are like "LargeTile.scale.100.png"...etc for small, medium scales. Do i have to change the name of these generated images to the name i have referred in the PCL project.? – Vijay457 Apr 03 '18 at 09:48
  • 1
    In PCL project? The tiles, splash screen and icons are a purely UWP-specific concept, it is just as a branding for the app itself. You cannot use these in the PCL. If you want to add normal images in your app, like icons for buttons, etc., these images should go in the root folder of the UWP project. So if you have `` in XAML, then you should have an image `Button.png` in the root folder of your UWP project. Alternatively, instead of `Button.png`, you could have `Button.scale-100.png`, `Button.scale-150.png`, etc. there, but they still need to be in root folder. – Martin Zikmund Apr 03 '18 at 09:53
  • I didn't like this behavior very much so I wrote a XAML extension that allows me to move all images to the Assets folder, and I still think this should be improved in Xamarin.Forms. – Martin Zikmund Apr 03 '18 at 09:54
  • yes. I have used like you have mentioned in your latest comment. I have scaled and used the images for 100, 150, 200 and 400 as it was the recommended sizes like Button.scale-100.png But it is not working properly and i am left wondering what should be the pixel size for these scale factors.? As i said i am currently using 12x12 for scale 100 and based on that generated for the other size for other scale factors. – Vijay457 Apr 03 '18 at 09:57
  • If it is not a tile or splash screen image, you should not use the Visual Assets page in UWP project but rather create the files manually. The generator is only for the app-related images, not for in-app images and icons. That said, if your button.png should be 12x12px for Scale 100, you can have Button.scale-100.png (12x12px), Button.scale-200.png (24x24px), Button.scale-400.png (48x48px), etc. – Martin Zikmund Apr 03 '18 at 10:02
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/168104/discussion-between-vijay457-and-martin-zikmund). – Vijay457 Apr 03 '18 at 10:07