博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
WPF 设置控件阴影后,引发的Y轴位置变化问题
阅读量:5107 次
发布时间:2019-06-13

本文共 2522 字,大约阅读时间需要 8 分钟。

原文:

背景

最近遇到一个动画执行时,文本位置变化的问题。如下图:

如果你仔细看的话,当星星变小时,文本往下降了几个像素。

貌似有点莫名其妙,因为控件之间并不在同一个Panel布局控件中,不存在高度限制变化引发此类问题。所以有了如下测试

测试场景

1. 首先新建了一个空项目,前面是一个带阴影的文本,后面用一张普通图片循环变更它的高度。尝试了下,还是会移动Y轴的像素

 测试不通过

2. 后面使用用普通的布局控件Grid代替。依然如此

测试不通过

所以此问题不是图片动画造成的。

3. 于是,我再添加个按钮,测试带阴影的非文本控件

测试不通过

只有文本被影响了,按钮不会被影响。是按钮的原因?

4. 那么我们将按钮的边框干掉

 

按钮还是不会被影响。。。

5. 给按钮设置,被影响文本同样的字体系列。

 

按钮也被影响了。。。所以,是字体原因!那么,这种字体类型是什么呢? FontFamily="Microsoft YaHei Bold"

6. 我们回到只有文本的测试模式

 测试不通过

测试通过

所以,我们可以得出是Y轴位置变化,是字体类型微软雅黑造成的了。

7. 除了微软雅黑和微软雅黑加粗,其它字体类型是否会影响呢?

测试不通过

 

 测试通过

通过如上测试,发现只有微软雅黑UI字体类型才不会有影响。并且在步骤6中,测试通的是没有设置字体类型的,没有设置字体类型,其实默认是 Microsoft YaHei UI。

8. 另,我们将高度变换的区域移动下位置,也不会有影响。

测试通过

9. 再尝试将阴影效果删除,也不会有影响

测试通过

重现步骤

1.添加一个文本/按钮控件

2.此显示控件设置阴影(条件一)

3.此显示控件设置字体类型FontFamily(条件二),如下

1     
3
4
5
6

4.在此显示控件的显示区域,变更其它控件的高度(条件三)

完整案例如下:

1 
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 24
25
27
28
30
31
32
33
34
35
1     ///  2     /// MainWindow.xaml 的交互逻辑 3     ///  4     public partial class MainWindow : Window 5     { 6         public MainWindow() 7         { 8             InitializeComponent(); 9             this.Loaded += MainWindow_Loaded;10         }11 12         private void MainWindow_Loaded(object sender, RoutedEventArgs e)13         {14             var storyboard = Resources["Storyboard.ChangeHeight"] as Storyboard;15             storyboard?.Begin();16         }17     }

界面显示:

 

解决方案 

按照如上重现步骤,有三个条件才会出现此问题。

1.设置了非Microsoft YaHei UI系列的字体 2.设置了阴影效果 3.显示区域有宽高变更

针对这些条件,我们给出规避的解决方案

 推荐解决方案(规避措施):

按照如上有问题的场景,我们得出结论,是因为字体类型设置导致的。

所以,我们如果不设置字体类型FontFamily,改其它字体类型为Microsoft YaHei UI/Microsoft YaHei UI Light,

如果需要加粗,可以通过设置FontWeight加粗:

  测试OK

其它解决方案(规避措施):

按照如上测试,将高度变换的区域移动,或者不设置阴影效果,也不会有此文所未Y方向位置变化的问题。

 

注:如上规避措施只是临时解决方案,如小伙伴们有其它方案或者发现其它根本原因,可以联系我~谢谢

posted on
2018-09-27 23:57 阅读(
...) 评论(
...)

转载于:https://www.cnblogs.com/lonelyxmas/p/9716415.html

你可能感兴趣的文章
vue 开发过程中遇到的问题
查看>>
[Swift]LeetCode341. 压平嵌套链表迭代器 | Flatten Nested List Iterator
查看>>
MySQL5.7开多实例指导
查看>>
hdu 1029 Ignatius ans the Princess IV
查看>>
JAVA学习札记
查看>>
[UOJ] #78. 二分图最大匹配
查看>>
[51nod] 1199 Money out of Thin Air #线段树+DFS序
查看>>
poj1201 查分约束系统
查看>>
简明Linux命令行笔记:chmod
查看>>
简明Linux命令行笔记:tar
查看>>
Red and Black(poj-1979)
查看>>
分布式锁的思路以及实现分析
查看>>
vue v-for下图片src显示失败,404错误
查看>>
EM算法
查看>>
腾讯元对象存储之文件删除
查看>>
jdk环境变量配置
查看>>
Linux学习进阶示意图
查看>>
Hbase basic
查看>>
vue-quill-editor上传内容由于图片是base64的导致字符太长的问题解决
查看>>
关于js中的作用域
查看>>