为什么 WPF 将我的蓝色和红色图像变成模糊的紫色答案

【问题标题】：Why WPF turns my blue and red image into a blurred into purple为什么 WPF 将我的蓝色和红色图像变成模糊的紫色
【发布时间】：2014-12-14 06:16:29
【问题描述】：

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

测试图片

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

XAML

整个 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>

结果：

3x3 图像被模糊为 4x4 图像。这些像素不是原始的蓝色和红色像素，而是不同深浅的紫色。 http://imageshack.com/a/img661/3707/TFdtnF.png

是什么导致模糊？如何避免？

【问题讨论】：

您的测试使用 WPF 还是 Silverlight？（“标签”是 WPF 的东西，而不是 Silverlight）。
这是浏览器外的 Silverlight。不确定基于浏览器的 Silverlight 是否支持标签，但浏览器外的 Silverlight 支持。
刚刚在一个新的 WPF 项目（而不是 Silverlight）中测试了这个，发现同样的问题。

标签： css wpf image xaml

【解决方案1】：

尝试添加

RenderOptions.BitmapScalingMode="HighQuality"

图片。

【讨论】：

【解决方案2】：

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

尝试使用 SnapsToDevicePixels 解决此问题没有奏效。 WPF 忽略图像的 SnapsToDevicePixels。

这是一个有效的解决方案http://blogs.msdn.com/b/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx

【讨论】：