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

165

我在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"线为什么不能防止这个问题？

— 扎克·彼得森
source

1

blogs.msdn.com/dwayneneed/archive/2007/10/05/…–

— ezolotko

4

您的图片链接似乎已断开。如果您仍然有原始图像，请将其重新上传到stack.imgur。谢谢。

— Ilmari Karonen

1

如果以下任何提示均不能立即起作用，请尝试将图像的大小更改为宽度和高度的4倍。因此，而不是179 X 44，尝试176×44

— 马丁Lottering

233

您可能要考虑尝试WPF4中现在可用的新属性。将保留RenderOptions.BitmapScalingMode为HighQuality或不声明。

NearestNeighbor为我工作，但在放大应用程序时会导致锯齿状的位图。它也似乎没有解决任何以奇怪的方式调整图标大小的故障。

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

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

— Domokun
source

4

有关此新属性的更多信息，请参见： blogs.msdn.com/text/archive/2009/08/27/layout-rounding.aspx

— Domokun 2010年

5

我使用的是UseLayoutRendering =“ True”-非常适合解决我的模糊图像。谢谢！

— 马特·德克里

25

最后！！UseLayoutRounding应该默认设置。在某些地方，图像显示得像原始甚至文本一样（至少对于ContextMenus而言，至少对我而言）更清晰。谢谢Domokun！

— 授予

3

我想我们中那些仍然停留在.NET 3.5上的人没有选择吗？

— jpierson 2012年

2

我发现，如果我在图像上将属性“拉伸”设置为“无”，则可以解决此问题，但是在所有其他情况下，即使关闭了“高质量”图像渲染和混叠功能，图像拉伸仍然会在WPF中产生问题。但是，至少这已经解决了非拉伸图像的问题（首先不应该是问题）

— Christian Findlay

74

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" />

— 扎克·彼得森
source

1

同样，如果您的图像的大小与<Image>标记中指定的大小完全相同，则不必缩放图像，而应清晰地呈现它。

— Beardo

1

我不确定这会在其他DPI上达到预期的效果

— Dave

1

Beardo，源图形和<Image>均为20像素乘20像素。据我了解，问题来自WPF。它有点想忽略显示器的像素网格，因此它的逻辑网格通常不会与物理网格完美对齐。

— 扎克·彼得森

9

@Zack Width =“ 20”并不意味着20像素。表示20/96英寸。如果您的操作系统配置为以96 DPI运行，则为20像素。现在，您最近的邻居将如何看待一个好的监视器，例如160 DPI？当您以300 DPI打印时，外观会如何？您不应该为您的开发机器进行优化。

— Frank Krueger 2010年

2

我还发现，对于像素大小的图像，NearestNeighbor比HighQuality好得多，尤其是将其与img.Width = imgSource.PixelWidth;结合使用时；img.Height = imgSource.PixelHeight。我的客户提供了一些具有不同疯狂DPI值的图像，我无法要求客户将它们全部转换，因此我不得不使用此技巧。

— JustAMartin 2012年

23

扎克·彼得森（Zack Peterson）+1

我正在使用.Net 3.5 sp1，它似乎是针对大量模糊图像的最简单解决方案。就地指定RenderOptions没什么大不了的，但是对于第三方组件，应用程序级资源中的样式有意义：

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

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

— DK。
source

1

AvalonDock也给我带来同样的麻烦……我仍然使用.Net 3.5

— Ignacio Soler Garcia

9

UseLayoutRounding="True"在很多情况下，在根窗口上使用都可以，但是在使用WPF功能区控件时遇到了问题。我的应用程序依赖于显示根据用户正在做什么，当我设置上下文选项卡UseLayoutRounding来True，上下文选项卡将不会出现和RibbonButton的形象都不是。此外，应用程序冻结了许多秒钟，并且CPU风扇开始唱歌。

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

— 奥米德·B。
source

1

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

— mcroteau

6

RenderOptions.BitmapScalingMode =“ NearestNeighbor”在大多数情况下效果很好。但是，偶尔会出现图形故障（在我的情况下，五分之四的图像显示良好，但第五个图像的右边缘有轻微失真）。我修复了此问题，将Image控件的右边距增加了1。

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

5

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

可能是类似的东西。

5

使用UseLayoutRounding =在应用程序中最顶层的元素

— 瓦拉塔拉杰
source

3

我相信这是一个错误（或者至少是一个错误）。请查看此Microsoft支持电子邮件交换页，以获取一些修复它的想法。

— 哔哔
source

3

我发现RenderOptions.BitmapScalingMode =“ NearestNeighbor”对我不起作用。我正在使用Windows XP x32和DirectX 9.0c。由于WPF的实际呈现是使用DirectX完成的，因此可能会产生效果。我确实使用以下注册表项为XP打开了抗锯齿功能：

[HKEY_LOCAL_MACHINE \ SOFTWARE \ Microsoft \ Avalon.Graphics]“ MaxMultisampleType” = dword：00000004“ EnableDebugControl” = dword：00000001

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

最终，我发现模糊发生在TextBlocks的文本以及图像上。而且模糊只发生在某些文本块和图像上，而不是全部。

— 匿名
source

3

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

我发现可以工作：

确保原始图像尺寸是2的倍数。这似乎可以防止某些时髦的图像缩放问题。
有时我还发现，将图像的边距调整一个像素或2可以防止此问题。

— 贾海
source

1

在阅读问题时，我的第一个想法是，您过多地放大了图像，但查看应用程序中的图像似乎并非如此。

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

如果您可以完全排除上述两个方面，那么我目前很困惑。

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

— 格雷戈里·比默
source

1

+1可以抵制不必要的负面投票，因为我认为您提供了一些合理的建议，并且只是在尝试提供帮助，最重要的是，您的建议没有什么不妥。

— jpierson 2012年

1

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

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

这样可以减少png的标题，也可以减小尺寸，但不会改变图像质量。

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

— MMM
source