Windows Phone 8.1 app always scales images

1
votes

I have converted one of my Windows Store applications to a universal application and added a Windows Phone project to it.

When rendering the graphics (Image and Rectangles with ImageBrushes) the graphics always gets scaled even if I set it to not scale which is not how expect it to work.

Example: I have an image that is named test.scale-100.png which is 27*27 pixles. The same image exists as a 32*32 pixel sized image named test.scale-140.png and another named test.scale-240.png which is 59*59 pixles

I use this image in my default layout the following way:

<Image x:Name="imgTest" Source="/Assets/test.png" Stretch="None"/>

When I start my app with the Windows Phone 8.1 WVGA 4 inch emulator the 32*32 image is shown with the correct bounds, but the actual image is scaled (I can see that quite simple because the content gets blurred).

The same happens when I start the app with the Windows Phone 8.1 1080p 6inch emulator; The image is 59*59 pixles but the image is a bit blurred.

How can I force scaling to not be performed?

Thanks in advance for any help!

3
xamlwindows-phonewindows-phone-8.1win-universal-app
You're not specifying a explicit pixel size for the image, so why wouldn't it be scaled? You should use a higher resolution images in all cases, and let the OS downscale as appropriate. – Claus Jørgensen
Thanks for your reply, but even when I specify an exact width like the following: <Image Source="Assets/ch2.png" Width="53" Height="53" Stretch="None"/> The image is not scaled properly when running in WVGA. The actual image is scaled to 55*55 pixles, but if placed into a <border> tag with the width and height set the following way: <Border Width="53" Height="53" Background="Lime"> I can see that the border is scaled to exact 64*64 pixles, but the image inside with the same dimensions is still scaled to 55*55 pixels. I would like to use the raw image and avoid OS scaling. – Mikael
There is no need for you to explicitly specify pixel size, the only reason you are getting a bit blur image for WVGA & 1080p is because WVGA scales 120% so it will check for test.scale-120.png & 1080p scales 220% so OS will check for test.scale-220.png but you are not passing this images so it will go grab the nearest scaled image provide i.e. for WVGA it will grab test.scale-100.png & for 1080p it will grab test.scale-240.png. Just add appropriate scaling Images, your are good to go. – Vyas
Thanks for the reply. It almost worked for me. The strange thing I found out was that addiing a few decimals for the size of the 100% width, e.g. 35.555556 gave a much better result (almost no blur) instead of using a whole number (35). Odd, but seems to solve the problem. – Mikael

3 Answers

0
votes

I am not sure. I am looking for a solution right now too. But I found that scaling is not supported in Windows Phone 8.1. Only Windows Store apps are working with scaling. Take a look at link below.

http://msdn.microsoft.com/en-us/library/windows/apps/dn263244.aspx

So, the way how to scale images is to use height/width propreties to force size of image or you can use BitmapImage and its property DecodePixelHeight/DecodePixelWidth together with Height/Width properties to decode the image.

Hope it helps ;)

0
votes

I have the same issue, I think this is an OS bug:

Test 1

test.scale-100.png + 
test.scale-140.png +
test.scale-240.png 
= Blurry result

Test 2

test.scale-240.png 
= Blurry result, again

Test 3

test.scale-240.png renamed to test.png
= Sharp result!

The problem occurs only with certain assets, not all. In my case only in some DataTemplates. I think that in some situations the system scale the image incorrectly, with an horrible blurry result. If you leave only the "scale-240" image, it is blurry. If you rename it removing "scale-240", it becomes sharp!

In summary, name the image as test.png and stop.

0
votes

As MSDN says:

Don't use images that aren't sized to multiples of 5px. Units that aren't multiples of 5px can experience pixel shifting when scaled to 140%, 180%, and 240%.

https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465362.aspx

Your Width="53" Height="53" could be the issue of incorrect behavior