我的图像很模糊！为什么 WPF 的 SnapsToDevicePixels 不起作用？答案

【问题标题】：My images are blurry! Why isn't WPF's SnapsToDevicePixels working?我的图像很模糊！为什么 WPF 的 SnapsToDevicePixels 不起作用？
【发布时间】：2010-10-10 04:08:15
【问题描述】：

我在我的 WPF 应用程序中使用了一些图像。

XAML：

<Image Name="ImageOrderedList"
       Source="images/OrderedList.png"
       ToolTip="Ordered List"
       Margin="0,0,5,5"
       Width="20"
       Height="20"
       SnapsToDevicePixels="True"
       MouseUp="Image_MouseUp"
       MouseEnter="Image_MouseEnter"
       MouseLeave="Image_MouseLeave" />

但是，它们看起来很模糊。

为什么SnapsToDevicePixels="True" 行不能防止这个问题？

【问题讨论】：

blogs.msdn.com/dwayneneed/archive/2007/10/05/…
您的图片链接似乎已损坏。如果您仍有原始图像，请将它们重新上传到 stack.imgur。谢谢。
如果以下提示都不能立即生效，请尝试将图像的大小更改为宽度和高度的 4 倍。因此，请尝试 176 X 44，而不是 179 X 44。

标签： .net wpf image xaml

【解决方案1】：

我没有使用SnapsToDevicePixels，而是使用RenderOptions.BitmapScalingMode，它们现在又好又脆！

XAML：

<Image Name="ImageOrderedList"
       Source="images/OrderedList.png"
       ToolTip="Ordered List"
       Margin="0,0,5,5"
       Width="20"
       Height="20"
       RenderOptions.BitmapScalingMode="NearestNeighbor"
       MouseUp="Image_MouseUp"
       MouseEnter="Image_MouseEnter"
       MouseLeave="Image_MouseLeave" />

【讨论】：

此外，如果您的图像与标记中指定的尺寸完全相同，那么它就不必缩放它并且应该清晰地呈现它。
我不确定这会在不同的 DPI 下产生预期的效果
Beardo，源图形和都是 20 像素 x 20 像素。据我了解，问题来自WPF。它有点想忽略显示器的像素网格，所以它的逻辑网格通常不会与物理网格完美对齐。
@Zack Width="20" 并不意味着 20 像素。这意味着 20/96 英寸。如果您的操作系统配置为以 96 DPI 运行，那么它是 20 像素。现在，您最近的邻居在一台好的显示器（例如 160 DPI）上会如何？当您以 300 DPI 打印时，它会是什么样子？您不应该针对您的开发机器进行优化。
我还发现，对于像素大小的图像，NearestNeighbor 比 HighQuality 好得多，特别是如果你将它与 img.Width = imgSource.PixelWidth; img.Height = imgSource.PixelHeight。我的客户提供了一些具有不同疯狂 DPI 值的图像，我无法要求客户将它们全部转换，所以我不得不使用这个 hack。

【解决方案2】：

使用 UseLayoutRounding=True 到应用程序中最顶部的元素

【讨论】：

【解决方案3】：

我尝试使用 RenderOptions.BitmapScalingMode=HighQuality，似乎在 Windows 8.1 中会导致一些问题，所以我所做的是通过名为 PngOut.exe 的工具运行它们

http://advsys.net/ken/utils.htm

这减少了 png 的标题，也减少了大小，但不改变图像质量。

现在我所有的图像都很完美！ :-)

【讨论】：

【解决方案4】：

在根窗口上使用UseLayoutRounding="True" 在很多情况下都有效，但我在使用WPF Ribbon 控件时遇到了问题。我的应用程序依赖于根据用户正在执行的操作显示的上下文选项卡，当我将UseLayoutRounding 设置为True 时，上下文选项卡不会显示，RibbonButton 的图像也不会显示。此外，应用程序冻结了几秒钟，CPU 风扇开始唱歌。

在我的图像上使用 RenderOptions.BitmapScalingMode="NearestNeighbor" 可以纠正图像渲染问题（模糊和裁剪图像），并且与功能区上下文选项卡的使用完全兼容。

【讨论】：

UseLayoutRounding="True" 为我工作。谢谢。 mikecroteau.wordpress.com/2013/01/20/wpf-net-xaml-blurry-images

【解决方案5】：

我发现建议的解决方法的组合都无法解决我看似随机的图像模糊问题。我喜欢许多其他人无法升级到 .net 4 才能使用 UseLayoutRendering 属性。

我发现的工作：

确保您的 [原始] 图像尺寸是 2 的倍数。这似乎可以避免一些奇怪的图像缩放问题。
有时我还发现，将图像的边距调整 1 或 2 像素可以防止出现此问题。

【讨论】：

【解决方案6】：

为扎克·彼得森 +1

我使用的是 .Net 3.5 sp1，它看起来是处理大量模糊图像的最简单的解决方案。就地指定 RenderOptions 并不是什么大问题，但对于 3rd-party 组件，应用级资源中的样式是有意义的：

 <Style TargetType="{x:Type Image}">
    <Setter
        Property="RenderOptions.BitmapScalingMode"
        Value="NearestNeighbor" />
 </Style>

当 AvalonDock 开始渲染模糊图标时效果很好。

【讨论】：

AvalonDock 也让我很头疼……而且我还在使用 .Net 3.5

【解决方案7】：

我发现 RenderOptions.BitmapScalingMode="NearestNeighbor" 对我不起作用。我正在使用带有 DirectX 9.0c 的 Windows XP x32。由于 WPF 的实际渲染是使用 DirectX 完成的，因此这可能会产生影响。我确实为 XP 启用了抗锯齿功能，并带有以下注册表项：

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Avalon.Graphics] "MaxMultisampleType"=dword:00000004 "EnableDebugControl"=dword:00000001

但是，使用这些设置关闭 aa 对图像没有影响。我认为这只会影响 3D 视口。

最后，我发现 TextBlocks 的文本和图像都会出现模糊。并且模糊只发生在某些文本块和图像上，而不是全部。

【讨论】：

【解决方案8】：

您可能需要考虑尝试 WPF4 中现在可用的新属性。将RenderOptions.BitmapScalingMode 留给HighQuality 或者干脆不声明它。

NearestNeighbor 对我有用，只是在放大应用程序时会导致位图出现锯齿状。它似乎也没有解决图标大小以奇怪方式出现的任何故障。

在您的根元素（即您的主窗口）上添加此属性：UseLayoutRounding="True"。

以前仅在 Silverlight 中可用的属性现在已修复所有位图大小问题。 :)

【讨论】：

在此处找到有关此新属性的更多信息：blogs.msdn.com/text/archive/2009/08/27/layout-rounding.aspx
UseLayoutRendering="True" 是我使用的 - 这非常适合解决我的模糊图像。谢谢！
终于！！ UseLayoutRounding 应该默认设置。图像的显示与原始图像一样，甚至在某些地方（至少对我而言，例如 ContextMenus）显示的文本比以前更清晰。谢谢，Domokun！
我猜我们这些仍然停留在 .NET 3.5 上的人别无选择？
我发现如果我在图像上将属性 Stretch 设置为 None，这可以解决我的问题，但在所有其他情况下，即使关闭了高质量图像渲染和锯齿，图像拉伸在 WPF 中仍然很糟糕.但是，至少这已经解决了非拉伸图像的问题（这本来不应该是一个问题）

【解决方案9】：

确保将图像保存在与 WPF 应用程序工作时相同的 DPI 中，某些图像格式将此信息存储为元数据。我不知道这是否能解决问题，但我遇到了一些问题，因为调整到 100% 的图像比预期的更大或更小。

可能是类似的东西。

【讨论】：

【解决方案10】：

RenderOptions.BitmapScalingMode="NearestNeighbor" 在大多数情况下运行良好。但是，有时您会遇到图形故障（在我的情况下，5 张图像中有 4 张显示正常，但第五张在右边缘有轻微变形）。我修复了它，我将图像控件的右边距增加了 1。

如果仍然无法解决问题，请尝试 EugeneZ 提到的上面的 Bitmap 类控件。它是 Image 控件的替代品，到目前为止它对我来说效果很好。见http://blogs.msdn.com/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx

【讨论】：

【解决方案11】：

我相信这是一个错误（或者至少它是）。查看这个Microsoft support e-mail exchange 页面，了解一些修复它的想法。

【讨论】：

【解决方案12】：

阅读问题时，我的第一个想法是，您是否将图像放大了太多，但从您拥有的应用程序图像来看，情况似乎并非如此。

第二个想法是调色板，但黑色作为无法正确渲染的颜色之一，这不太可能。

如果你能完全排除以上两个，我目前很难过。

作为实验，您可以尝试其他图形格式，但 PNG 应该没问题。我将不得不考虑更多以提出更好的答案。

【讨论】：

+1 以防止毫无根据的反对票，因为我认为您提供了一些合理的建议，只是想提供帮助，最重要的是，您的建议没有任何错误。