Printable View
Im using xmal code to create amy menu items with images, no issues other then the images are coming out all blurry (no I dont need glasses lol).
Ive tried using several types (png, bmp, ico) from the ones provided from VS but all still the same. Used 16x16 in the screen shot but if I use 32x32 the png ones are clear, just too damn large lol.
Oh and why doesnt WPF menu Icon property support icons? :lol:
Is there some property setting I need to set or ???
Thanks
My understanding is that this is because 16x16 in WPF is not 16 pixels by 16 pixels. WPF does not measure in pixels (to enable it to be more monitor independent). So if you have a really low resolution monitor that makes everything on screen huge then the icons are going to be the same percentage of that screen that they were on a different monitor with a higher resolution - therefore if they were small images originally then they will be blurred on the first monitor, where as on the second monitor with the higher resolution they will be clearer because they will be more like their original size.
The solution? Use vector based images (remember all the controls in WPF are vector based so that they stay clear and sharp no matter the size). One way of doing this is to use a program like Adobe Illustrator to create your image and then use the XAML plug in to export the image as XAML paths. You can also use Expression Design to do this. Obviously thats a massive pain in the ass to do that for all of your images though and most of the time its not even possible because you might not have made the image yourself so dont have access to the original Adobe Illustrator or Expression Design files (you cant just open an existing image in these programs and export it as XAML).
So basically I just try to find the right sized icon for a common resolution such as 1024x768 and then I test this on a few other resolutions to make sure it still looks fairly good. Ironic really that in making WPF more monitor/resolution independent they seem to have made some things worse for different resolutions/DPIs...
I find using larger images and then scaling them down by just setting the Width and Height properties of the Image in XAML works well sometimesQuote:
if I use 32x32 the png ones are clear, just too damn large lol.
EDIT: Just found a few workarounds that you might want to look at, havent tried any yet but the first one looks promising (the second link is talking about the same thing that ends up being done in the first link)
http://stackoverflow.com/questions/5...pixels-working
http://blogs.windowsclient.net/maker...lverlight.aspx
http://blogs.msdn.com/dwayneneed/arc...y-bitmaps.aspx
Also looks like my theory on why this happens was rubbish :D
PS, I'm surprised you havent complained about the blurry text as well yet :) Thats supposedly getting fixed in .NET 4.0 (as of the next BETA)
Woah I wish I had looked into this sooner... setting the RenderingOptions.BitmapScalingMode to NearestNeighbour has made all of my images look so much better! However, it does make them move a tiny tiny bit to the left of where they originally were (or at least it has on the 4 I just tried it on)
Hmm, I dont have that render option as shown. Only HighQuality, not NearestNeighbor.
RenderOptions.BitmapScalingMode="HighQuality"
Makes no difference.
I dont have email access at work but I think when I get home tonight I will send one out complaining about this. :mad:
Ah its only in WPF 3.5 SP1 and I dont have SP1 installed on my work laptop :doh:
Yeah I was just gonna say but I thought you would have the SP installed so thought it was a bit odd... but obviously that explains it :) Now if you will excuse me I just need to reboot my PC as changing the resolution to test some WPF'ness has made everything look like cr*p! (even after I have changed it back to what it was originally)
Looks like about 2 hours to download and install :(
So much for the patch management software they run here lol.
Guess I will take my laptop home and check out the fixes so I can get back on track.
SP-1 installed. Rebooting and will try the new parameter :)
I had to specify the W + H but now its all sharp looking. :)
Thanks
Hi.
If you save your pictures with 96DPI they should look ok. The reason WPF upscales and blurs the images is because they are probaly saved using 72DPI.
WPF always assume 96DPI. That also means your app will look wrong when displayed on a pc with a default system DPI of e.g. 120.
Thanks pax. Yes they were the standard VS images which are 72 dpi.
Technically not true, basically WPF deals with resolution by using 96dpi as its base unit of measurement. This means that your application should always look the same regardless of resolution (custom images excepted).Quote:
Originally Posted by pax
If you wanted to be completely anal you could specify a couple of different DPI images and run a simple check to choose which one to use. This of course only applies to raster based images.
I had heard a rumor that illustrator now has an addon to export native created (in illustrator) images to XAML so you shouldn't have that issue with images made there.
Also I have heard that a lot of icon companies are now offering illustrator based versions of their icons too so eventually you shouldn't have this problem.
Based on this : http://www.wpflearningexperience.com/?p=41=1 it appears that WPF actually does take the dpi setting into account. The problem is, that even though an app should look the same wether run on 96dpi or 120 the reality seems to be another. True, wpf scales to the 120dpi setting, but if the monitor is not truely a 120dpi monitor, things will be off. And if your app was originally layed out to match a e.g 94dpi monitor with a dpi setting of 96dpi (like in the link), things will usually be 2% off. When designing your app, you lay things out so they match and look ok. Run that on a 120dpi setting and thing will look very different.Quote:
Originally Posted by DeanMc
Anyhow... The original question was about images, and the images have to have the same dpi as the system it's run on. Meaning, that you still have to design your app with one setting in mind and hope that people won't use another setting. I know you can specify the width and height at designtime, but there are cases where images are loaded dynamically. Wpf should use the pixel size of the images instead. At least for raster images.
What a good article. I suppose I will have to factor this in when I am designing in future. Rep+ for that!
Great extra info.
Gonna read the article on lunch. Slave driving work wont let me gold brick lol
Damn I just read the article and well... I feel conned! I thought WPF's resolution independence meant it would be the same on any resolution :(
Maybe they meant that it was "independant" from being independant lol