.net 我的图片很模糊!为什么 WPF 的 SnapsToDevicePixels 不起作用?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/592017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-03 12:13:42  来源:igfitidea点击:

My images are blurry! Why isn't WPF's SnapsToDevicePixels working?

.netwpfimagexaml

提问by Zack Peterson

I'm using some Images in my WPF applcation.

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

XAML:

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

But, they appear fuzzy.

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

Why doesn't that SnapsToDevicePixels="True"line prevent this problem?

为什么那条SnapsToDevicePixels="True"线不能防止这个问题?

回答by Domokun

You may want to consider trying a new property available now in WPF4. Leave the RenderOptions.BitmapScalingModeto HighQualityor just don't declare it.

您可能需要考虑在WPF4 中尝试现在可用的新属性。离开RenderOptions.BitmapScalingMode高质量或者只是不申报。

NearestNeighborworked for me except it led to jaggy bitmaps when zooming in on the application. It also didn't seem to fix any glitches where icons were sizing in weird ways.

NearestNeighbor对我来说有效,除了它在放大应用程序时导致锯齿状位图。它似乎也没有修复图标以奇怪方式调整大小的任何故障。

On your root element (i.e. your main window) add this property: UseLayoutRounding="True".

在您的根元素(即主窗口)添加该属性:UseLayoutRounding="True"

A property previously only available in Silverlight has now fixed all Bitmap sizing woes. :)

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

回答by Zack Peterson

Rather than using SnapsToDevicePixels, I instead used RenderOptions.BitmapScalingModeand they're now nice and crisp!

SnapsToDevicePixels我没有使用,而是使用了RenderOptions.BitmapScalingMode它们,它们现在又漂亮又脆!

XAML:

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

回答by DK.

+1 for Zack Peterson

+1 为扎克·彼得森

I'm using .Net 3.5 sp1 and it looks like the most simple solution for a large number of fuzzy images. It's not a big deal to specify RenderOptions in-place, but for 3rd-party components a style in app-level resource makes sense:

我正在使用 .Net 3.5 sp1,它看起来是大量模糊图像的最简单解决方案。就地指定 RenderOptions 没什么大不了的,但是对于 3rd-party 组件,应用程序级资源中的样式是有意义的:

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

Worked nicely when AvalonDock started to render blurry icons.

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

回答by Omid B.

Using the UseLayoutRounding="True"on the root Window works in many cases but I encountered a problem when using the WPF Ribboncontrol. My application relies on Contextual Tabs that appear according to what the user is doing and when I set the UseLayoutRoundingto True, the contextual tab would not show up and the RibbonButton's image neither. Also, the application freezes for many seconds and CPU fan starts to sing.

使用UseLayoutRounding="True"根窗口在很多情况下工作,但我使用时遇到的问题WPF色带控制。我的应用程序依赖于根据用户正在做什么而出现的上下文选项卡,当我将 设置为UseLayoutRoundingTrue,上下文选项卡不会显示,RibbonButton 的图像也不会显示。此外,应用程序冻结了很多秒,CPU 风扇开始唱歌。

Using RenderOptions.BitmapScalingMode="NearestNeighbor"on my image corrected the image rendering issues (fuzzy and cropped image) and is fully compatible with the Ribbon Contextual Tabs usage.

RenderOptions.BitmapScalingMode="NearestNeighbor"在我的图像上使用更正了图像渲染问题(模糊和裁剪的图像),并且与功能区上下文选项卡的使用完全兼容。

回答by Omid B.

RenderOptions.BitmapScalingMode="NearestNeighbor" works well most of the time. However, occasionally you'll get graphical glitches (in my case, 4 out of 5 images showed up fine, but the fifth had a slight distortion on the right edge). I fixed it my increasing the Image control's right margin by 1.

RenderOptions.BitmapScalingMode="NearestNeighbor" 大部分时间运行良好。但是,偶尔您会遇到图形故障(在我的情况下,5 个图像中有 4 个显示良好,但第 5 个图像的右边缘有轻微失真)。我修复了它,将 Image 控件的右边距增加了 1。

If that still doesn't fix it, try the Bitmap class control above that EugeneZ mentions. It's a replacement for the Image control and so far it's worked pretty well for me. See http://blogs.msdn.com/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx

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

回答by Omid B.

Make sure you save the image in the same DPI as your WPF application is working in, some image formats have this info stored as metadata. I don't know if this solves the problem but I've hade some problems because of this where images resized to 100% got bigger or smaller than expected.

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

Might be something similar.

可能是类似的东西。

回答by Varatharaj

use UseLayoutRounding=Trueto the top most element in your application

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

回答by Beep beep

I believe this is a bug (or at least it was). Check out this Microsoft support e-mail exchangepage for some ideas to fix it.

我相信这是一个错误(或者至少是)。查看此Microsoft 支持电子邮件交换页面,了解修复此问题的一些想法。

回答by Jahhai

I have found that no combination of the suggested workarounds would cure my seemingly random blurry image problem. I like many others cannot upgrade to .net 4 in order to use the UseLayoutRenderingproperty.

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

What I have found to work:

我发现有效的方法:

  • Ensure your [original] image dimensions are multiples of 2. This seems to prevent some of the funky image scaling problems.
  • Sometimes I have also found that adjusting margins on images by a pixel or 2 can prevent the problem.
  • 确保您的 [原始] 图像尺寸是 2 的倍数。这似乎可以防止一些时髦的图像缩放问题。
  • 有时我还发现将图像的边距调整一个或 2 个像素可以防止出现问题。

回答by anon

I have found that the RenderOptions.BitmapScalingMode="NearestNeighbor" does not work for me. I'm using Windows XP x32 with DirectX 9.0c. As the actual rendering for WPF is done with DirectX, this could have an effect. I do have anti-aliasing turned on for XP with the following registry entries:

我发现 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

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

However, turning aa off with these settings has no effect on the images. I think this only effects 3D Viewports.

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

Finally, I found that the blurring occurs with the text of TextBlocks as well as images. And the blurring only happens for some text blocks and images, not all of them.

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