When many people first bind a bitmap image (say a PNG, or JPG) to an Image control in WPF, an overly astute developer might scratch his or her head and think “Why is my image 33% too big?”
It all boils down to DPI. Say you have a 720px x 720px image at 72dpi (many images have a DPI of 72). Physically, this image would be 10in x 10in. WPF will maintain this size, and since WPF defaults to 96dpi, at 10in x 10in the image is shown on the screen as 960px x 960px, 33% bigger than it’s original size.
Noodle on that for awhile and you’ll realize that although it’s a stumbling point, it is indeed the correct behavior. Images should display according to their intended DPI. Images with a DPI below 96 will be scaled up, and those with a DPI above 96 will be scaled down (assuming you have not changed your machine’s native DPI).
The problem is that the WPF team has provided no easy means by which to say “I want to ignore the DPI of the image, give it to me in its original pixel size.” This behavior is often the desired one when building a simple image editor for example.
Wouldn’t it be great if you could set a property called ScalingBehavior to DpiAdjusted or OriginalPixelSize? Well, you can’t, not yet anyway. There is a solution however:
<Image Source=”{Binding …}” Stretch=”Uniform” Width=”{Binding Source.PixelWidth,RelativeSource={RelativeSource Self}}” Height=”{Binding Source.PixelHeight,RelativeSource={RelativeSource Self}}” />
Here we’ve set Stretch to Uniform and bound the Width and Height to the PixelWidth and PixelHeight of the Source, effectively ignoring DPI. The image however will not be pixel perfect, even when using SnapToDevicePixels (which simply snaps the borders, not pixels within the image). However, WPF in 3.5 SP1 will support a NearestNeighbor BitmapScalingMode, which should correct this.
January 6, 2009 at 8:23 am
[...] so when it encounters the 72 dpi image it scales it up. If you can’t change the image, there are funky ways around it. Personally, I believe if you are running into this because of a designer/developer mismatch, then [...]
January 16, 2009 at 8:52 pm
This is exactly what I needed. Thank you for posting this!
March 25, 2009 at 11:35 am
DPI is a measure of a display device not a measure of the image. If you examine image storage formats you find almost none of them will store a “DPI” value. Only targa, that I’m aware of, will store anything. If you read the specs for targa you find it’s a ’suggestion for the presentation’ of the image.
No images ever have a default DPI. You might have an expectation based on your past usage but that’s not the same.
Defaulting to 96 DPI was a stupid mistake. Almost every monitor in the world is somewhere around 72 DPI, and windows can usually interrogate the display device for it’s size settings.
WPF is not polished and this is one of the teething problems.
March 25, 2009 at 3:46 pm
@ Jay
File formats such as PNG and JPG store physical dimensions and therefore DPI. You can save the images as 96 DPI images and they’ll display at their original pixel size in WPF.
April 15, 2009 at 11:27 am
My friend on Facebook shared this link and I’m not dissapointed that I came to your blog.
May 20, 2009 at 9:21 am
I tried this out and it worked well. This was exactly what I was looking for! Thank you