locked
How do I keep an image from being stretched when Stretch="None" doesn't work? RRS feed

  • Question

  • I have a PNG file that's 24 by 24 pixels that I want to display in an Image control in its actual size without any stretching.  However, even when I set the Stretch="None", it doesn't display at its correct size.  For example, let's say that I create a simple WPF app:

    <Window x:Class="WpfApplication18.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
        <Grid>
            <Image x:Name="Image1" Source="Image.png" Stretch="None"></Image>
        </Grid>
    </Window>

    using System.Windows;

    namespace WpfApplication18
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
            }

            private void Window_Loaded(object sender, RoutedEventArgs e)
            {
                System.Diagnostics.Debug.WriteLine(Image1.ActualHeight.ToString() + " " + Image1.ActualWidth.ToString());
            }
        }
    }

    When I run this app, the image appears slightly bigger than it does Windows Photo Viewer which causes the image to become slightly blury. 

    In my window's Loaded event handler, I have some code to print out the image's ActualHeight and ActualWidth.  Both are saying 32.0072919716029.  My system is configured for 96 DPI so I think it should be returning 24.

    Does anyone know what's going on here?  How do I get it to display at the correct size without any stretching?

    BTW, I know that I can simply hard-code the height and width, but I'd rather not.

    Friday, July 30, 2010 7:53 PM

Answers

  • Hi I-DotNET,

    I think TI82 is right on this issue. The image become bigger than you expect because its dpi doesn't match the dpi of your system setting.

    A simply workaround is to bind the size of the Image to the PixelWidth and PixelHeight properties of the BitmapSource and set the Stretch behavior to Fill. These two properties are calculated against the pixels of the image and the dpi of the system settting. So the Image will be of the exact size you want.

    Here is an example:

    Image Stretch="Fill" Width="{Binding RelativeSource={RelativeSource Self}, Path=Source.PixelWidth}" Height="{Binding RelativeSource={RelativeSource Self}, Path=Source.PixelHeight}"/>
    

    If you still have any doubts or concerns about this issue, please feel free to let me know.

    Best regards,

    Min

     


    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.
    • Proposed as answer by Min Zhu Wednesday, August 4, 2010 8:52 AM
    • Marked as answer by Min Zhu Monday, August 9, 2010 6:08 AM
    Wednesday, August 4, 2010 8:50 AM
  • Hi, I-DotNET

     

     

    Do you know that WPF manipulate with device-independed units, but not with phisical pixels. Maybe it cause that image's ActualHeight and ActualWidth properties are saying 32.

    • Proposed as answer by Min Zhu Wednesday, August 4, 2010 8:52 AM
    • Marked as answer by Min Zhu Monday, August 9, 2010 6:08 AM
    Monday, August 2, 2010 6:23 PM
  • I think TDima may be on the right track.  The DPI of the specific image file may be different than the DPI of your system.  Can you check the DPI of the image in Explorer, by right-clicking the file and selecting the Details tab (if in Windows Vista or Win7)?
    • Proposed as answer by Min Zhu Wednesday, August 4, 2010 8:51 AM
    • Marked as answer by Min Zhu Monday, August 9, 2010 6:08 AM
    Monday, August 2, 2010 6:36 PM

All replies

  • I-DotNET,

    I tried this out for you, but I do not get the same behavior as you. Mine reports the correct Height and Width as 48.0069 for a 48x48, so I think your png is 32x32. I have 96 dpi also so something else is wrong.

    Hope this helps.


    noorbakhsh حميد نوربخش
    Friday, July 30, 2010 9:17 PM
  • Hi,

    Please set the height and width of the image and then check.


    Syed Mustehsan Ikram
    Saturday, July 31, 2010 7:06 AM
  • The image is definitely 24 pixels by 24 pixels.  In Windows Explorer, I right-clicked on the file and brought up the Windows properties dialog.  It says 24 pixels by 24 pixels.  Bit depth is 32.

    I tried setting the Height and Width attributes, but even this doesn't work.  It still scales the image and crops the bottom and right edges of the image, so part of the image is chopped off.

    I also tried setting the MaxHeight and MaxWidth properties, but the same thing happens as setting the Height and Width attributes (image is stretched and cropped).

    Does anyone know what's going on?

    Monday, August 2, 2010 1:50 PM
  • Hi, I-DotNET

     

     

    Do you know that WPF manipulate with device-independed units, but not with phisical pixels. Maybe it cause that image's ActualHeight and ActualWidth properties are saying 32.

    • Proposed as answer by Min Zhu Wednesday, August 4, 2010 8:52 AM
    • Marked as answer by Min Zhu Monday, August 9, 2010 6:08 AM
    Monday, August 2, 2010 6:23 PM
  • I think TDima may be on the right track.  The DPI of the specific image file may be different than the DPI of your system.  Can you check the DPI of the image in Explorer, by right-clicking the file and selecting the Details tab (if in Windows Vista or Win7)?
    • Proposed as answer by Min Zhu Wednesday, August 4, 2010 8:51 AM
    • Marked as answer by Min Zhu Monday, August 9, 2010 6:08 AM
    Monday, August 2, 2010 6:36 PM
  • TDima:  Yes, I know that WPF doesn't use physical pixels.  However, my display is set at 96 DPI according to Control Panel.  My math might be off here, but my understanding is that on a 96 DPI, the WPF units are the same as pixels. 
    Monday, August 2, 2010 6:42 PM
  • TI82: I don't think that images have a DPI, and if I right-click the file in Windows Explorer and check the Details tab, there is no DPI setting listed.  I'm on a Win7 machine.
    Monday, August 2, 2010 6:44 PM
  • Hi,

    Have you tried setting the margin and setting the width and height to auto.


    Syed Mustehsan Ikram
    Tuesday, August 3, 2010 4:39 AM
  • Hi I-DotNET,

    Is this issue appears on one particular image or arbitrary image? Can you reproduce the problem in a new project?

    Thank you and have a nice day!

    Best regards,

    Min


    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.
    Tuesday, August 3, 2010 9:53 AM
  • I-DotNET: Images most certainly have a DPI, see the BitmapSource documentation. I have done projects that involved screen capture, and if you captured an image on a 120DPI machine and then opened that image on a 96DPI machine, the image would retain the 120DPI metadata.  Also, some peripherals, like digital cameras and scanners, capture images with various DPIs (by default my scanner at home is 200DPI).

    Before dismissing my recommendation, add the following to your code to verify that the image is indeed 96DPI:

    Debug.WriteLine((Image1.Source as BitmapSource).DpiX.ToString());

     

    • Proposed as answer by TI82 Tuesday, August 3, 2010 3:07 PM
    • Unproposed as answer by I-DotNET Tuesday, August 3, 2010 7:46 PM
    Tuesday, August 3, 2010 1:31 PM
  • TI82: The Debug statement you suggested outputs 71.9835968017578.

     

    • Proposed as answer by TI82 Tuesday, August 3, 2010 3:07 PM
    • Unproposed as answer by I-DotNET Tuesday, August 3, 2010 7:46 PM
    Tuesday, August 3, 2010 2:20 PM
  • Min Zhu: The issue appears on 4 different images from the same freeware library.  Yes, I can reproduce the problem in a new project.
    Tuesday, August 3, 2010 2:21 PM
  • TI82: Thank you for showing me how to determine an image's DPI, but that doesn't solve the problem of how to get the image to not stretch.
    Tuesday, August 3, 2010 7:49 PM
  • I don't think you understood the point of all of that - it was to show you that your image isn't matching the DPI of your system.  If your DPI is 72 and your system DPI is 96, then the image won't show up with the correct aspect ratio.  Try using your code with a 24x24 image that has a DPI of 96 and see if it stretches.  If it does, then I'd need more information (like the image file) as to why it is stretching.

    Tuesday, August 3, 2010 9:11 PM
  • Hi I-DotNET,

    I think TI82 is right on this issue. The image become bigger than you expect because its dpi doesn't match the dpi of your system setting.

    A simply workaround is to bind the size of the Image to the PixelWidth and PixelHeight properties of the BitmapSource and set the Stretch behavior to Fill. These two properties are calculated against the pixels of the image and the dpi of the system settting. So the Image will be of the exact size you want.

    Here is an example:

    Image Stretch="Fill" Width="{Binding RelativeSource={RelativeSource Self}, Path=Source.PixelWidth}" Height="{Binding RelativeSource={RelativeSource Self}, Path=Source.PixelHeight}"/>
    

    If you still have any doubts or concerns about this issue, please feel free to let me know.

    Best regards,

    Min

     


    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.
    • Proposed as answer by Min Zhu Wednesday, August 4, 2010 8:52 AM
    • Marked as answer by Min Zhu Monday, August 9, 2010 6:08 AM
    Wednesday, August 4, 2010 8:50 AM
  • Min Zhu:  Thanks, that did the trick.
    Monday, August 9, 2010 1:50 PM
  • I posted on StackOverflow about this: StackOverflow - Image stretching even after Stretch="None"

    "If you have set Stretch="None" for the Image, and it still looks larger/smaller/blurry, then it's probably because of the DPI mismatch.

    For example, PNG files store DPI. Windows has a particular DPI. Check your system DPI and check the PNG DPI.

    In Photoshop you can go to Image -> Image Size and it will display the dots/inch box. You can also use it to change the DPI. Make sure you disable Resample Image checkbox so that you only alter the DPI. You need to use the Save for Web dialog for saving that change because the normal Save As won't save that information.

    In my case, I had a PNG file with size of 24x24, and a DPI 72.009 and my system is at the default DPI. The picture looked larger and blurrier, now it's fine after adjusting the PNG DPI from 72.009 to 72."


    Saturday, April 28, 2012 10:40 AM