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!
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 ;)
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.
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
Related
My question is, why does the iPad preview use a different image than the storyboard for wRegular hAny?
I'm trying to set up a universal app with a menu that will use larger buttons for iPad. In the asset catalog, I've specified the standard image size for wAny x hAny, and loaded a larger image for wRegular x hAny.
The story board looks fine for all size classes, with the wRegular x hAny using the iPad image, and everything else using the iPhone image. But the previews all use the iPhone image, including the iPad preview, despite the storyboards showing the correct images. In the screen shots below, the story board is shown to the left, preview to the right.
Can someone tell me what I'm doing wrong here? I'm trying to avoid using explicit image sizes for each class - is that what I should be doing?
Any help would be greatly appreciated. I've read everything I can on using different image sizes, and still cannot figure this out.
enter code here
You can't have a different images by size class for the same button in Interface Builder. It looks to me like you set the image of the button to be the iPad one first in Regular/Any, then set the iPhone one afterward in Any/Any which changed what you did in Regular/Any.
In this image, see how the Font has a + symbol to the left of it, but Image doesn't? That's for specifying the value per size class. Since Image doesn't have that, it's not a value saved for the specific size class.
Using SDK 3.5.1 currently
I have some remotely hosted images that I am loading into my ImageViews. I have hires:true already set.
Here is the code I'm using:
var hasattachesThumbIcon = Ti.UI.createImageView({
width:96,
height:'auto',
top:6,
bottom:6,
right:10,
image:hasattachesThumb,
defaultImage:'/icons/placeholder_big.png',
hires:true,
});
I think the issue is that I'm not explicitly setting the height of the image. The reason is that the images are of all different sizes and aspect ratios, my only requirement is that they should fit into a block measuring 96 pixels, so i've set it as such.
Any ideas?
Thanks!
Are you trying to test 2X or 3X images? If you are trying 3X images then hiRes will not work as the support is still not present. Also as suggested by Mark, change from auto to Titanium.UI.SIZE, as auto has been deprecated. Also can you confirm whether the default image is getting displayed till the remote image is being downloaded?
I'm using a 40 x 40 sized image as a search result suggestion image in Windows 8 search. Only advice about the image format I can find is to have correct size for it (http://msdn.microsoft.com/en-us/library/windows/apps/Hh700542.aspx: "Windows will scale or crop smaller or larger images").
However, the correctly sized image blurs annoyingly. The same thing happens whether I use jpg or png. Original image looks fine, but the result suggestion in the search charm is very ugly, being still of same size! Is Windows converting the image somehow, and how could I get the image to stay crisp?
I haven't noticed blurring with photo-like images, but this image contains clear lines and areas which are vulnerable to any scaling etc.
Update Sep 24:
Here is the test image I used when trying to figure out the problem. I also created different scale versions, but in my case the 100% version was used (that's why the "100" marking) - as I supposed because the resulting image really is 40x40. As you can see, the resulting image (right) is of same size as original (left), but blurry.
it does not happen that often but it seems the right solution in this case was simply to wait ;) I haven't done anything new regarding result suggestion images in my solution and today I realized that the images became crisp. Probably fixed by any of the windows updates.
[Took a stab at answering what seems the related question mentioned in the comments, so I'm posting here as well.]
It sounds like this could be related to automatic scaling of the images. Windows will automatically scale up/down based on pixel density, and you can help things scale well by either using vector-based images or, for bitmap images, supplying scale-specific versions.
For example, to scale an image referenced in markup as "AppLogo.jpg", you'd include these images:
AppLogo.scale-100.jpg
AppLogo.scale-140.jpg
AppLogo.scale-180.jpg
You can also use folders, e.g. "\scale-140\AppLogo.jpg".
For search result images, the 100% image is the 40x40 pixel version, 140 is 56x56, and 180 is 72x72. Just reference the image as "AppLogo.jpg" and the appropriate version will be used automatically. (You can also detect scale with DisplayProperties.ResolutionScale and manually choose an image.)
Here's a couple of articles with more examples/details:
"Guidelines for scaling to pixel density"
"Quickstart: Using file or image resources"
There's also some scaling discussion in the forums (general, not specific to search) here and here.
I am about to launch a new app and would lik eto increase quality of the graphics. In my case the graphics is the logo and the custom buttons. I do not know if this impact Core Plot but that is also part of the package.
There is quite a few posts about this but there are still things i do not fully understand.
I am reading this quote from "amattn":
It's trivial:
1.Only include #2x images in your project.
2.Make sure those images have the #2x suffix.
The system will automatically downscale for non-retina devices.
The only exception is if you are doing manual, low level Core Graphics drawing.
You need to adjust the scale if so. 99.9% though, you don't have to worry about this.
From this post: Automatic resizing for 'non-retina' image versions
My question in regards to this is:
1. Should i do the testing on retina simulator only, as if i place a #2 grapic on
non-retina it will be too big? ...or is there an other way of doing it?
2. Should i always use a ImageView or is it OK to drag the image on the screen,
this is the logo i am talking about?
3. What about custom made buttons with images, how should i do with those?
4. What is the normal process to manage the different screen sizes, do people
add images for all displays or using this type of process?
Should i do the testing on retina simulator only, as if i place a #2 grapic on non-retina it will be too big? ...or is there an other
way of doing it?
It doesn't really matter which simulator you test on because as long as your non-retina and retina graphics are named correctly (image and image#2x) the correct image will be displayed automatically.
Should i always use a ImageView or is it OK to drag the image on the screen, this is the logo i am talking about?
When you drag and image from the project directly onto a view in interface builder you don't really see it happen but it has automatically created and image view which is containing the image your dropped in.
What about custom made buttons with images, how should i do with those?
[myButton setImage:[UIImage imageNamed:#"myFileName"]];
As shown in the above code you should always use the non-retina fle name when you reference the image a UI element should use. That was if iOS detects the device is retina it can automatically use the #2x version in its place.
What is the normal process to manage the different screen sizes, do people add images for all displays or using this type of process?
Yes, including multiple image resolutions common practice and is required for iPhone apps (not sure about iPad) to include both retina and non-retina images. But regardless of the requirements, you should definitely support both device resolutions to keep your customers happy!
I have a Panorama image in my app and when it loads on the phone it is blurry. It's like when you remote desktop into another computer and you have the color settings way down. The gradient is made up of 6 colors and I can count them from the big blocky change.
Is there something special that needs to be done for an image to work as a Panorama background?
I've tried using a JPG and PNG version of the image and it looks the same for either.
I know this is an older post, but with Windows Phone Mango (7.5) you can now specify 32 bit by modifying your manifest.
BitsPerPixel="32"
Add that to the <App xmlns="" ProductID="" BitsPerPixel="32"/> and your images will now display in 32 bit mode. You get a lot smoother gradients and color resolution.
The startup screen still is only 16 bit, and your icons will only really display in 16 bit. But you can get nice colors in your app.
Windows Phone 7 currently renders with 16bit color depth, unlike your desktop/emulator which has a higher color depth. As a result, gradients won't look the same as they do on your desktop PC.
This thread here has some great pointers on how to optimize your images for this environment:
Is there a way to render PNG with gradients in Internet Explorer Mobile 7 correctly?