xamlwindows-runtimewindows-phonewindows-phone-8.1multiscaleimage

How to create multi scaled image assets for a WP 8.1 Store app

How to create specific image assets for different scale factors? For example, I have a button which uses an image. So, how to create that image for Scale 100, Scale 140 and Scale 240?

Solution

  • You create original image for 96dpi device, let's say 40x40, then you should provide 56x56 (140%), 72x72 (180%) and so on. If you don't provide the image, the image will be resized and loose its quality.

    You can provide images for every scale and place them in the same folder, like this:

    Images/name.scale-100.png
Images/name.scale-140.png
Images/name.scale-180.png
Images/name.scale-240.png

    Then you can refer to the image in XAML like this:

    <Image Source="Images/name.png"/>

    and in the code by its URI:

    Uri imageUri = new Uri("ms-appx:///Images/name.png");

    The OS should take the image with the apropriate scale. More about this you will find at MSDN.

    Note also that you can set this way also images for high-contrast and/or different languages.