设计稿转为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. 【Android】3.10 热力图功能

    分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 一.简介 热力图是用不同颜色的区块叠加在地图上描述人群分布.密度和变化趋势的一个产品,可利用自有数据,构建属于 ...

  2. ny737 石子合并(一) 总结合并石子问题

    描述: 在一个圆形操场的四周摆放着n 堆石子.现要将石子有次序地合并成一堆. 规定每次只能选相邻的2 堆石子合并成新的一堆,并将新的一堆石子数记为该次合并的得分. 试设计一个算法,计算出将n堆石子合并 ...

  3. js实现类似新闻条目人物简介不间断的滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. LeetCode: Clone Graph 解题报告

    Clone GraphClone an undirected graph. Each node in the graph contains a label and a list of its neig ...

  5. sqlserver 多排序的问题

    sql 执行默认执行排序的第一个字段,如果结果集中含有重复的列的字段,才会按照2...N个字段进行排序,没有重复列多排序无效果

  6. static使用实例

    public class LocationActivity extends Activity { //一个Activity传值到service public static String workid ...

  7. CenOS6.5下源码安装vim-7.4

    1.[下载] vim-7.4下载地址: ftp://ftp.vim.org/pub/vim/unix/vim-7.4.tar.bz2 2.[解压] tar jxvf vim-7.4.tar.bz2 之 ...

  8. java中volatile关键字的含义<转>

    在java线程并发处理中,有一个关键字volatile的使用目前存在很大的混淆,以为使用这个关键字,在进行多线程并发处理的时候就可以万事大吉. Java语言是支持多线程的,为了解决线程并发的问题,在语 ...

  9. Spring的作用域以及RequestContextListener作用<转>

    一.配置方式 在Spring2.0中除了以前的Singleton和Prototype外又加入了三个新的web作用域,分别为request.session和global session,如果你想让你的容 ...

  10. 核心交换机各项配置 Vlan划分、互访、ACL管控、链路聚合等

    #!Software Version V200R001C00SPC300sysname IT_ServerRoom  #交换机名称##vlan batch 10 20 30 40 50 60 70 8 ...