wpfimagestretch

Low DPI images are not fully shown in WPF Image

So I have an UserControl that contains an image

 <StackPanel>
            <Image HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="RenderingImage" 
    RenderTransformOrigin="0,0"  Stretch="None" Source="{Binding}" RenderTransform="{Binding}"/>
  </StackPanel>

Everything works fine as long as the image displayed is 96 or above. For smaller DPI images, for some reason the Image components crops the image

enter image description here

This is the full image and when I try to display it in the image component enter image description here It crops the right side.

Specifically this image is 72dpi. Is there any way I can avoid this, except changing the Stretch? Changing the Stretch to Fill/Uniform seems to work, but that changes the way I implemented zoom and other events for this specific UC. I would like to avoid that. It is also important that I preserves the original size of the image, and stretching obviously won't help me with that.

Solution

  • The native width and height of a "device independent pixel" in WPF 1/96 inch - i.e. WPF draws with 96 DIP/inch or DPI.

    If you load a bitmap with a different DPI, the BitmapSource is scaled to 96 DPI, i.e. its Width and Height properties are set to

    bitmap.Width  = bitmap.PixelWidth  * 96 / bitmap.DpiX
bitmap.Height = bitmap.PixelHeight * 96 / bitmap.DpiY

    These values are used for the size of the Image element when Stretch is set to None.

    In order to compensate for this scaling, you may created a bitmap that reverses the scaling, e.g. by applying an appropriate ScaleTransform to the Transform property of a TransformedBitmap.

    var scaled = new TransformedBitmap(bitmap,
    new ScaleTransform(bitmap.DpiX / 96, bitmap.DpiY / 96));

    You are thus making sure that the scaled bitmap's Width and Height always equals its PixelWidth and PixelHeight.