设计稿转为xaml后,设计师开始review UI了,发现图片都模糊了。

这一张很神奇,三个图片都是同一张,中间的那个最清楚,上面的这个左右两边清楚,下面的那个四个边都不清楚。

这一张,右边是原图,左边是模糊的图,同比放大的。

于是开始查原因:

1. 检查图片,png, DPI=72,Stretch="None",原图尺寸和xaml里面写的尺寸一致。
如果替换为大尺寸的原图,使用时,size写的小一点,同比例缩小,没问题。

2. 第一反应是像素对齐,SnapsToDevicePixels="True", 搞上去,没用。

3. 把图片拷贝到空白的项目里面,发现有的图片模糊,有的不模糊。布局复杂一点,模糊的概率大。

4. 改变项目中的xaml 布局,神奇的出现了,左右两个边清晰了,上下还是模糊的,换个地方,上下左右都模糊。

左边是原图,右边是WPF的图。

神奇啊,估计是布局的问题。

Grid里面放了这些图片,如果像素里面有小数点,可能会出现这种情况。但是没想到那个可爱的属性啊。

5.开始在Image上下功夫,发现了这个属性, RenderOptions.BitmapScalingMode,里面几个枚举值,一个一个试。

Unspecified使用默认位图缩放模式,即 Linear。

LowQuality使用双线性位图缩放,虽然速度比 HighQuality 快,但输出质量较低。 LowQuality 模式与 Linear 模式相同。

HighQuality使用高质量位图缩放,虽然速度比 LowQuality 模式慢,但输出质量更高。 HighQuality 模式与 Fant 模式相同。

Linear使用线性位图缩放,虽然速度比 HighQuality 模式快,但输出质量较低。

Fant使用超高质量 Fant 位图缩放,虽然速度比所有其他位图缩放模式都慢,但输出质量更高。

NearestNeighbor使用最近邻域位图缩放,当使用软件光栅器时,该缩放提供优于 LowQuality 模式的性能。 该模式常用于放大位图。

MSDN:http://msdn.microsoft.com/zh-cn/library/system.windows.media.bitmapscalingmode(v=vs.100).aspx

当我试到最后一个时,奇迹发生了,图片居然不模糊了!上面那些问题都不存在了。

6. 小小的兴奋之后,发现圆圆的图片出问题了,锯齿明显:

这么简单的图片居然锯齿了.....

7.于是开始了各种猜想,别的同事也在一起看。

有的提议用Rectangle+ImageBrush,我觉得替换工作量有点大。

有同事说 用UseLayoutRounding="True", 这个试了之后,问题马上解决了。
MSDN查了,发现解释和我们碰到的情况一样:

获取或设置一个值,该值确定对象及其可视化子树的呈现是否应使用将呈现与整像素对齐的舍入行为。

msdn:http://msdn.microsoft.com/zh-cn/library/system.windows.uielement.uselayoutrounding(v=VS.95).aspx

目的就是为了把不足一个像素的,设为一个像素。

到此问题解决。

教训:刚想到【像素对齐】时,没有使劲儿的 查资料,自己瞎搞,浪费了时间。

WPF图片模糊的解决之路的更多相关文章

  1. 【转】解决WPF图片模糊最佳方法(绑定PixelWidth与PixelHeight)

    解决WPF图片模糊最佳方法(绑定PixelWidth与PixelHeight) 转载自:http://www.360doc.com/content/13/1126/09/10504424_332211 ...

  2. dedecms幻灯片调用图片模糊的解决办法

    dedecms幻灯片调用的是缩略图,如果图片尺寸比例和幻灯片的大小相差太大的话,图片就会自动拉伸模糊,比较影响美观和用户体验,下面就有常用的2个方法来解决这个图片模糊的问题. 第一种:手动制图 我们用 ...

  3. 解决WPF图片模糊最佳方法(绑定PixelWidth与PixelHeight)

    从事WPF开发一年有余,对于图片显示模糊相信很多人都遇到过.网络上查找能得到一堆解决方法,但都是会带来其他负面影响得不到最佳效果.其实,有些图片会因为垂直分辨率/水平分辨率不同而造成在WPF界面上显示 ...

  4. 解决WPF图片模糊最佳方法

    对于图片显示模糊相信很多人都遇到过,其实,有些图片会因为垂直分辨率/水平分辨率不同而造成在WPF界面上显示出现模糊. WPF默认是96Dpi,但有些图片可能是72DPI甚至更低或更高,这样就会出现图片 ...

  5. WPF图片放大后模糊的解决方法

    原文:WPF图片放大后模糊的解决方法 WPF中显示图片的方式很多,可以用Image控件来显示图像,或者直接设置一个控件的Background.图片的放大也很简单,直接设置显示图片的控件的Width和H ...

  6. 移动端高清适配方案(解决图片模糊问题、1px细线问题)

    本文介绍了移动端适配的3种方法,以及移动端图片模糊问题和1px细线问题的解决方法.当然了,在这之前先整理了与这些方法相关的知识:物理像素.设备独立像素.设备像素比和viewport. >> ...

  7. vue中使用html2canvas及解决html2canvas截屏图片模糊问题

    最近在项目中用到了html2canvas插件,遇到的一些坑写下来,与大家共勉. html2canvas  官方网站http://html2canvas.hertzen.com/index.html 这 ...

  8. devicePixelRatio手机图片模糊的原因

    一.移动设备图片模糊问题 手机上图片模糊问题原因就是一个像素在电脑上和手机上代表的实际像素的不同. 我们在样式表中使用的px(独立像素)单位其实并不一定代表着实际的一个像素(物理像素),这还要看硬件的 ...

  9. 制作一个简单的WPF图片浏览器

    原文:制作一个简单的WPF图片浏览器 注:本例选自MSDN样例,并略有改动.先看效果: 这里实现了以下几个功能:1.  对指定文件夹下所有JPG文件进行预览2.  对选定图片进行旋转3.  对选定图片 ...

随机推荐

  1. Transport level information does not match with SOAP Message namespace URI错误的理解

    理论知识: 转自:http://wso2.com/library/articles/differentiating-between-soap-versions-looking-soap-message ...

  2. Ribbon负载均衡策略与自定义配置

    Ribbon负载均衡策略 配置 对调用的某个服务启用某种负载策略 1)通过配置文件配置 hello: ribbon: NFLoadBalancerRuleClassName:com.netflix.l ...

  3. gtk-gnash大量占用cpu解决办法

    http://blog.csdn.net/papenghan/article/details/7727955 gnash是一个firefox的flash插件版本.当使用firefox打开含有falsh ...

  4. ngApp指令,也就是ng-app属性

    翻译:https://docs.angularjs.org/api/ng/directive/ngApp 使用这个指令去 自动引导 一个AngularJS 应用程序.  ngApp 指令规定了html ...

  5. 基于js alert confirm样式弹出框

    基于js alert confirm样式弹出框.这是一款根据alert confirm优化样式的确认对话框代码. 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  6. [转]getHibernateTemplate出现的所有find方法的总结

    一.find(String queryString); 示例:this.getHibernateTemplate().find("from bean.User"); 返回所有Use ...

  7. The Qt Resource System

    The Qt Resource System The Qt resource system is a platform-independent mechanism for storing binary ...

  8. iOS彩票项目--第一天,自定义TabBar控制器和自定义TabBar,自定义导航控制器

    一.环境配置,和项目层次搭建 二.自定义TabBar 项目中TabBar中的导航按钮美工给的图片太大,图片中包含了图片和文字.最主要的是TabBar上面的按钮图片尺寸是有规定的,当高度大于44的时候, ...

  9. 查看nginx cache命中率

    一.在http header上增加命中显示 nginx提供了$upstream_cache_status这个变量来显示缓存的状态,我们可以在配置中添加一个http头来显示这一状态,达到类似squid的 ...

  10. rails中path、url路径解析,routes信息,form_for剖析,link_to示例,路由实例说明

    原创,转载请注明http://www.cnblogs.com/juandx/p/3963023.html  rails中path.url路径解析,routes信息,form_for剖析,link_to ...