Image in WPF getting Blurry

Question

I am developing an application in WPF using C#. I am putting Images in a WrapPanel and showing inside a Grid with one more Border and using images in Buttons also. Problem is my Image control loosing its quality. I am not able to post my image here so I am simply describing here.

I used SnapsToDevicePixels="True" for the images but still it looks blurry.

Updated:

Here I shared the Image below:

Solution 1

I think what Markus told is the one way to resolve your issue and try by adding one more property in it RenderOptions.EdgeMode="Aliased" for each image I mean :

<Image Source="/LoginPanel;component/Icons/icoLogin.ico"
       RenderOptions.BitmapScalingMode="NearestNeighbor"
       RenderOptions.EdgeMode="Aliased"/>

if you still not able to fix your problem then you can refer this http://blogs.msdn.com/b/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx to create a custom Bitmap class and apply on all Images which are creating trouble for you.

You can also see this Stack Overflow Question

Solution 2

SnapsToDevicePixels seems not working for bitmaps.

The NearestNeighbor options actually converts the bitmap and will end up with different one to the original bitmap.

In WPF 4, a property "UseLayoutRounding" on the FrameworkElement is introduced to solve this problem.

By setting this property to True on your root element, such as Window will align children elements on the edges of pixels.

<Window UseLayoutRounding="True">...</Window>

Solution 3

This works for me

<Image Source="/LoginPanel;component/Icons/icoLogin.ico"
       RenderOptions.BitmapScalingMode="NearestNeighbor"</Image>

Set RenderOptions.BitmapScalingMode="NearestNeighbor" for each image. Alternatively see this question here on StackOverflow.

Edit:
Here is my sample code

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="661">
    <WrapPanel>
        <Button VerticalAlignment="Center">
            <Image Source="/WpfApplication1;component/icoChip32x32.ico"
               RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="None"></Image>
        </Button>
        <Button VerticalAlignment="Center">
            <Image Source="/WpfApplication1;component/icoChip32x32.ico"
                   RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="None"></Image>
        </Button>

        <Button VerticalAlignment="Center">
            <Image Source="/WpfApplication1;component/Presentation-Edit.png"
               RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="None"></Image>
        </Button>
        <Button VerticalAlignment="Center">
            <Image Source="/WpfApplication1;component/Presentation-Edit.png"
                   RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="None"></Image>
        </Button>
    </WrapPanel>
</Window>

And this is my result:

Solution 4

Use UseLayoutRounding="True" property on the parent element if image is used as a content. In your case it is the Button.

Solution 5

I ran into a blurriness issue with image backgrounds caused by scaling and the solution was much simpler than you may think. While at first I wondered if it was being scaled up to a power-of-two texture size, the scaling actually matched the ratio of System DPI (96) : Image DPI (72, which is the default for many editors). If you adjust the image to 96 DPI it should display pixel-perfect with the default Windows settings.

EDIT: Tried an image with high detail contrast and it is slightly softened.

View more solutions

Comments

[Admin]

Thanks for your great answer :)

[SharpUrBrain]

@Turtleneck: I think its a duplicate question of stackoverflow.com/questions/592017/…

[wRadion]

Thanks A LOT! Your solution is the only one that worked for me!

[Krythic]

Wanted to drop a comment saying this also worked for me. SnapsToDevicePixels="False" and UseLayoutRounding="True" gave the best results out of any suggestion.

[pyknight202]

Nearest neighbor fixed this for me. Thank you!