WPF——关于图像模糊的解决办法？

一、问题

当在页面中呈现一个拼接后的图片时，有时候会模糊有时候不会。根据观察，该图片前面放了一个TextBlock，当TextBlock文案结尾出现英文字符时，后面的图片大概率会糊。推测是因为前面一个元素导致的像素不对齐问题，解决方案可以针对前一个TextBlock，或者当前Image，甚至可以是两者的外层容器。

二、解决方案

1. 对于TextBlock，使用UseLayoutRounding=true，或TextOptions.TextFormattingMode=“Display”
2. 对于Image，使用UseLayoutRounding=true，或RenderOptions.BitmapScalingMode=“NearestNeighbor”
3. 对于两者的容器，使用使用UseLayoutRounding=true，或TextOptions.TextFormattingMode=“Display”，或RenderOptions.BitmapScalingMode=“NearestNeighbor”；因为对容器的赋值，最终会影响到其各个子元素。

三、参考

1. 关于文字模糊
2. 关于图片模糊的RenderOptions.BitmapScalingMode
3. UseLayoutRounding VS SnapsToDevicePixels
4. 微软像素对齐的解释

四、反思

当图像或文字出现模糊时，优先对容器使用UseLayoutRounding=true，而不是 SnapsToDevicePixels=true；因为SnapsToDevicePixels并不是任何时候都会起作用，就如微软中说的<在以上示例中，仅在将显示设置为 96 每英寸点数 (dpi) 时，图像对齐才起作用。在其他设置中，需要调整布局以适应显示设置。>。另外，UseLayoutRounding的像素对齐发生在Layout时，而SnapsToDevicePixels的像素对齐发生在Render。