为什么WPF把我的蓝色和红色图像变成了紫色

I noticed that if I include an Image element in my WPF application, the image comes out blurry on the screen. To test this, I reduced my program to the bare minimum and created a test image. I tried this in an out-of-browser Silverlight application and in a regular WPF application. I targeted .NET 4 and 4.5. See the same result in all cases.

我注意到，如果我在WPF应用程序中包含一个图像元素，那么图像就会在屏幕上变得模糊。为了测试这一点，我将程序缩减到最少，并创建了一个测试映像。我在一个浏览器外的Silverlight应用程序和一个普通的WPF应用程序中尝试了这一点。我的目标是。net 4和4.5。在所有情况下都看到相同的结果。

Test Image

3 pixels wide by 3 pixels high. The middle pixel is red. All others pixels are blue. You can also see it at http://imageshack.com/a/img538/5335/GM4B8I.png

宽3像素，高3像素。中间的像素是红色的。其他像素都是蓝色的。您也可以在http://imageshack.com/a/img538/5335/GM4B8I.png上看到它

XAML

The entire XAML page is shown below. I added an empty Label above the image and to the left of the image to move it away from the edge of the window.

整个XAML页面如下所示。我在图像上方和图像左侧添加了一个空标签，以便将它从窗口边缘移开。

<Page x:Class="Demo.Home"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  mc:Ignorable="d" 
  d:DesignHeight="486" d:DesignWidth="864"
Title="Demo">

<StackPanel Background="white" Orientation="Vertical">
    <Label FontSize="10" Content=" "/>
    <StackPanel Orientation="Horizontal">
        <Label FontSize="10" Content=" "/>
        <Image Source="/Demo;component/test.png
               HorizontalAlignment="Left" VerticalAlignment="Top"
               Stretch="None" />
    </StackPanel>
</StackPanel>

RESULT:

The 3x3 image is blurred into a 4x4 image. Instead of original blue and red pixels, the pixels are different shades of purple. http://imageshack.com/a/img661/3707/TFdtnF.png

3x3的图像被模糊成4x4的图像。像素不是最初的蓝色和红色像素，而是不同的紫色阴影。http://imageshack.com/a/img661/3707/TFdtnF.png

What is causing the blurring? How can I avoid it?

是什么导致了这种模糊?我该如何避免呢?

2 个解决方案

#1

Try adding

尝试添加

RenderOptions.BitmapScalingMode="HighQuality"

RenderOptions.BitmapScalingMode = "优质"

to the image.

的形象。

#2

The blurring results from WPF using sub-pixel precision to calculate position for the Image. The three-pixel image ends up being rendered at non-integer pixel positions, so WPF spreads it over 4 device pixels.

模糊结果来自WPF，使用亚像素精度计算图像的位置。三像素图像最终呈现在非整数像素位置，因此WPF将其扩展到4个设备像素上。

Attempting to fix this using SnapsToDevicePixels did not work. WPF ignores SnapsToDevicePixels for images.

试图用SnapsToDevicePixels来解决这个问题是行不通的。WPF对于图像忽略SnapsToDevicePixels。

Here is a solution that works http://blogs.msdn.com/b/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx

这里有一个可以运行http://blogs.msdn.com/b/dwayneneed/archive/2007/10/05/blur -bitmaps.aspx的解决方案

#1