How to make image not stretch?

Question

[imgur deleted image]

The icon on the left is the result of this code:

    <Button Height="23" HorizontalAlignment="Left" Margin="12,276,0,0" Name="button1" VerticalAlignment="Top" Width="75">
        <StackPanel Orientation="Horizontal">
            <Image Source="Resources/add.png" Stretch="None" />
            <TextBlock Margin="5,0,0,0" Text="Add" />
        </StackPanel>
    </Button>

The one on the right is the original image placed beside it using Photoshop. It appears the one added via code is stretched by a pixel causing some distortion. How do I prevent that?

What happens if you explicitly set the Width and Height properties in xaml? — Eugen, Apr 30 '11 at 23:04
@Eugen: Tried that too. Doesn't change anything. If i set it one pixel less, it becomes the right size, but it's still blurred due to scaling. — mpen, Apr 30 '11 at 23:41
@itsho: Imgur must have deleted it. I don't have another copy for you, sorry. It's similar to this one though: http://i.imgur.com/xV08C.png — mpen, May 18 '13 at 18:29

score 9 · Answer 1 · answered Apr 30 '11 at 23:20

9

Stretch="None" should do exactly that. If there is a difference in how the Image is displayed that may be due to pixels ending up "on edge".

You could try setting SnapsToDevicePixels="True" to avoid this.

answered Apr 30 '11 at 23:20

H.B.

166,899
29
327
400

Nope... that didn't do it either. – mpen Apr 30 '11 at 23:26
How about setting the attached property: `RenderOptions.BitmapScalingMode="HighQuality"`(or some other value for that matter)? – H.B. Apr 30 '11 at 23:29
@HB: Shouldn't be scaling at all, but nevertheless, tried that, still looks the same. – mpen Apr 30 '11 at 23:39
1

As Velja Matic pointed out i thought that in this case `NearestNeighbor` is actually a good choice. It's still scaling, this property is not affected by `Stretch`. – H.B. Apr 30 '11 at 23:46

Mike · Answer 2 · 2019-08-14T13:41:37.147

4

Adding Stretch = None keeps the image from rezising

<ImageBrush ImageSource="rtgEnhanced.png" AlignmentX="Left" AlignmentY="Bottom" Stretch="None"></ImageBrush>

edited Aug 14 '19 at 13:41

answered Oct 22 '16 at 14:26

Mike

623
6
26

score 4 · Answer 3 · edited May 23 '17 at 12:00

4

Try using RenderOptions.BitmapScalingMode="NearestNeighbor".

You may want to read these:

edited May 23 '17 at 12:00

Community

1
1

answered Apr 30 '11 at 23:43

Velja Matic

560
4
15

`UseLayoutRounding` as suggested by your first link worked. Second one provides a nice explanation. Thanks! – mpen Apr 30 '11 at 23:59

score 3 · Answer 4 · answered Sep 28 '17 at 03:48

PNG images can have something called a pHYs chunk stored in them. This chunk defines the DPI that the image is intended to be displayed at. If the DPI of the image doesn't match the DPI of the monitor, it will be stretched by WPF in order to make it appear at the "intended" size. This usually (at least for me) is NOT at all what I intended and causes a lot of frustration.

In order to remove the "intended" stretching, one option is to remove the pHYs chunk from the PNG.

You can use a tool like TweakPNG to inspect and remove pHYs.

Alternatively, you can simply save your images with the correct DPI encoded in them, or none at all, presuming that your image editing software supports that.

PngOptimizer did the trick for me : http://psydk.org/pngoptimizer — Lenor, Nov 08 '19 at 17:28

score 3 · Answer 5 · answered Apr 30 '11 at 23:25

3

I can't really see what's going on in your example, but a very common cause of this sort of problem with WPF is the DPI value in the PNG file being something other than 96 (often 72 if it's come from anything with a Mac heritage).

answered Apr 30 '11 at 23:25

Will Dean

39,055
11
90
118

Well, how do I check what the DPI value is, and how do I fix it? It's an unedited icon from famfamfam's silk icon set. – mpen Apr 30 '11 at 23:28
1

@Mark, in Photoshop, use "Image/Resize..." and first uncheck "Resample." Then enter the new pixels/inch value and press 'ok.' The pixel dimensions of your image will not be altered but the new metadata will be written when you re-save the PNG. Indeed, having dpi not equal to 96 means WPF won't use native pixel size when Image.Stretch="None". Many thanks to Will for this awesome fix. – Glenn Slayden Feb 27 '15 at 19:47
If somebody needs a tool for the DPI correction: You can use [Paint.NET](http://www.getpaint.net), which is free and easy to use for this purpose. – Beauty Mar 29 '17 at 15:32

score 1 · Answer 6 · edited Jun 04 '15 at 15:31

1

I have only managed to solve this by explicitly setting the width or height. So if you know the image is 48 pixels high do like this:

<Image Source="myImage.png" Height="48" UseLayoutRounding="True"/>

edited Jun 04 '15 at 15:31

mpen

272,448
266
850
1,236

answered Jun 04 '15 at 12:29

GulPaprika

31
5

score 1 · Answer 7 · answered Mar 20 '12 at 20:35

1

Actually, NearestNeighbor is going to allow the engine to skip over pixels in the source image when scaling. If there is an option for Linear, that may work better as it means to scale reading pixel by pixel from the source image.

answered Mar 20 '12 at 20:35

Rodney Barbati

160
3

You are exactly correct, and if you read the comments I left below the accepted answer you'll see that that's what I discovered too. I marked it was correct because his suggestion of `UseLayoutRounding` fixes it. – mpen Mar 21 '12 at 00:43

score 0 · Accepted Answer · edited May 23 '17 at 11:46

0

This fixed it for me:

On your root element (i.e. your main window) add this property: UseLayoutRounding="True".

credit

edited May 23 '17 at 11:46

Community

1
1

answered Feb 27 '15 at 22:38

mpen

272,448
266
850
1,236

How to make image not stretch?

8 Answers8