WPF 设置了阴影效果后,Y轴位置会有变化的问题

 

背景

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

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

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

测试场景

字体类型影响

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

 影响很大

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

影响较大

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

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

只有文本被影响了,按钮不会被影响?

我们使用放大镜,放大到500%,发现按钮中的文本,上下位置其实还是会有细微的变化 。

所以,按钮等控件其实也是会被影响的。只是幅度较小。

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

 

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

当前字体: FontFamily="Microsoft YaHei Bold"。

而上一步操作4中,按钮的字体类型是默认字体,即为Microsoft YaHei UI。

所以Microsoft YaHei Bold的影响比Microsoft YaHei UI大很多?

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

 影响较大

影响较小

所以,我们可以得出是Y轴位置变化,的确与字体类型有关。

变动很大

 变动很小,使用放大镜500%才能看到细微的变化

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

 

字体大小

根据上述的字体类型测试,我们添加俩个文本框,使用Microsoft YaHei UI作为字体类型,设置字体大小分别为30和60。

通过如上对比,发现字体大小30的文本,受到的影响很明显。字体为60的文本,受到的影响较小。

综上,得出的结论是,Y轴变化的幅度,与字体类型、字体大小有关。具体的详细幅度,有待确认~~~

显示区域影响

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

测试通过

阴影效果

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

测试通过

重现步骤

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

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

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

复制代码
1     <TextBlock x:Name="TestTextBlock1"  VerticalAlignment="Center" HorizontalAlignment="Center"2                 Text="微软雅黑加粗" Foreground="White" LineHeight="18" FontSize="60" FontFamily="Microsoft YaHei Bold">3         <TextBlock.Effect>4             <DropShadowEffect Color="#000000" BlurRadius="4" ShadowDepth="2" Opacity="0.24"/>5         </TextBlock.Effect>6     </TextBlock>
复制代码

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

完整案例如下:

关键字:
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信