9

[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?

Improve this question
4
  • What happens if you explicitly set the Width and Height properties in xaml? Commented Apr 30, 2011 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. Commented Apr 30, 2011 at 23:41
  • The image is broken... Commented May 18, 2013 at 18:25
  • @itsho: Imgur must have deleted it. I don't have another copy for you, sorry. It's similar to this one though: i.imgur.com/xV08C.png Commented May 18, 2013 at 18:29

8 Answers 8

Reset to default
10

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Nope... that didn't do it either.
How about setting the attached property: RenderOptions.BitmapScalingMode="HighQuality"(or some other value for that matter)?
@HB: Shouldn't be scaling at all, but nevertheless, tried that, still looks the same.
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.
5

Try using RenderOptions.BitmapScalingMode="NearestNeighbor".

You may want to read these:

Improve this answer

1 Comment

UseLayoutRounding as suggested by your first link worked. Second one provides a nice explanation. Thanks!
4

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.

Improve this answer

1 Comment

PngOptimizer did the trick for me : psydk.org/pngoptimizer
4

Adding Stretch = None keeps the image from rezising

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

Comments

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).

Improve this answer

3 Comments

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.
@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.
If somebody needs a tool for the DPI correction: You can use Paint.NET, which is free and easy to use for this purpose.
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"/>
Improve this answer

Comments

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.

Improve this answer

1 Comment

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.
0

This fixed it for me:

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

credit

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.