背景

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

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

貌似有点莫名其妙,因为控件之间并不在同一个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轴变化的幅度,与字体类型、字体大小有关。具体的详细幅度,有待确认~~~

显示区域影响

单个影响因素

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

测试通过

多个影响因素

有多个影响因素时,不要设置在左右,否则也有影响。

测试不通过

测试通过

Demo前端代码:

 <Grid>
<Border VerticalAlignment="Center" BorderBrush="Red" BorderThickness="0 1 0 0"></Border> <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="80" Width="60" Margin="-460 0 0 0">
<Grid x:Name="StoryControl" Background="Red"
Height="30" Width="30" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5"/>
</Grid> <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="80" Width="60" Margin="460 0 0 0">
<Grid x:Name="StoryControl1" Background="Red"
Height="30" Width="30" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5"/>
</Grid> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock x:Name="TestTextBlock0" VerticalAlignment="Center" HorizontalAlignment="Center"
Text="YaHei Bold" Foreground="White" LineHeight="18" FontSize="60" FontFamily="Microsoft YaHei Bold">
<TextBlock.Effect>
<DropShadowEffect Color="#000000" BlurRadius="4" ShadowDepth="2" Opacity="0.24"/>
</TextBlock.Effect>
</TextBlock>
</StackPanel>
</Grid>

阴影效果

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

测试通过

重现步骤

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

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

3.此显示控件设置字体类型FontFamily=“Microsoft YaHei Bold”(影响因素,不是条件),如下

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.在此显示控件的显示区域,变更其它控件的高度(条件二)

完整案例如下:

 1 <Window x:Class="TextBlockShadowEffectForStoryBoardDemo.MainWindow"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6 xmlns:local="clr-namespace:TextBlockShadowEffectForStoryBoardDemo"
7 mc:Ignorable="d" Title="MainWindow" Height="600" Width="800" Background="LightGray">
8 <Window.Resources>
9 <Storyboard x:Key="Storyboard.ChangeHeight" DesiredFrameRate="20">
10 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="StoryControl" Storyboard.TargetProperty="Height" RepeatBehavior="Forever">
11 <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
12 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="15" />
13 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="30" />
14 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="30" />
15 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="15" />
16 <EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="0" />
17 <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0" />
18 </DoubleAnimationUsingKeyFrames>
19 </Storyboard>
20 </Window.Resources>
21 <Grid>
22 <Border VerticalAlignment="Center" BorderBrush="Red" BorderThickness="0 1 0 0"></Border>
23
24 <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="80" Width="60" Margin="0 60 0 0">
25 <Grid x:Name="StoryControl" Background="Red"
26 Height="30" Width="30" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5"/>
27 </Grid>
28 <TextBlock x:Name="TestTextBlock1" VerticalAlignment="Center" HorizontalAlignment="Center"
29 Text="微软雅黑加粗" Foreground="White" LineHeight="18" FontSize="60" FontFamily="Microsoft YaHei Bold">
30 <TextBlock.Effect>
31 <DropShadowEffect Color="#000000" BlurRadius="4" ShadowDepth="2" Opacity="0.24"/>
32 </TextBlock.Effect>
33 </TextBlock>
34 </Grid>
35 </Window>
 1     /// <summary>
2 /// MainWindow.xaml 的交互逻辑
3 /// </summary>
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 }

界面显示:

测试Demo请点击下载:https://files.cnblogs.com/files/kybs0/TextBlockShadowEffectDemo.zip

解决方案

TextOptions.TextFormattingMode,有两种设置:

  • Ideal  —— WPF4之前的模式
  • Display —— 新的模式,可以使字体显示更清晰。

TextOptions.TextFormattingMode="Display",可以提高字体的清晰度。

测试OK

TextOptions.TextFormattingMode是依赖属性,设置后子元素等都能解决此类问题。

WPF 文本框设置了阴影效果后,因左右的transform变化引发的拉伸渲染问题的更多相关文章

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

    原文:WPF 设置了阴影效果后,Y轴位置会有变化的问题 背景 最近遇到一个动画执行时,文本位置变化的问题.如下图: 如果你仔细看的话,当星星变小时,文本往下降了几个像素. 貌似有点莫名其妙,因为控件之 ...

  2. WPF 文本框添加水印效果

    有的时候我们需要为我们的WPF文本框TextBox控件添加一个显示水印的效果来增强用户体验,比如登陆的时候提示输入用户名,输入密码等情形.如下图所示: 这个时候我们除了可以修改TextBox控件的控件 ...

  3. WPF文本框密码框添加水印效果

    WPF文本框密码框添加水印效果 来源: 阅读:559 时间:2014-12-31 分享: 0 按照惯例,先看下效果 文本框水印 文本框水印相对简单,不需要重写模板,仅仅需要一个VisualBrush ...

  4. input文本框设置和移除默认值

    input文本框设置和移除默认值 这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: ...

  5. HTML input文本框设置和移除默认值

    这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: <input id=&quo ...

  6. js中input文本框设置和移除默认值

    这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: <input id=&quo ...

  7. html之给文本框设置宽度和高度/input的无边框效果

    <input name="" type="text" style="width:200px; height:20px;" /> ...

  8. MFC~~~~~~edit_control 和 静态文本框设置透明和字体设置

    一  字体设置比较简单~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1 .在 testdlg.h(假设工程名字为test)中 设置一个 public 的 ...

  9. css 好看的div文本框 渐变+ 背景 + 阴影 实际应用

    效果图 css <style> .box{ padding: 3px 5px 3px 18px; margin: 3px 0 3px 5px; position: relative; li ...

随机推荐

  1. Round #4 RMQ问题ST算法

    前几天群里看到有人问[JSOI2008]最大数,一道很简单的问题,线段树无脑做,但是看到了动态ST,emmm,学学吧,听大佬说了下思路,还好,不难的: 四道题都可以用其他数据结构或做法代替,例如线段树 ...

  2. django+javascrpt+python实现私有云盘代码

    丁丁:由于篇幅有限,这里暂时只展示python后端代码,前端js代码后面上传,有需要的也可以留言私信我. 1.view.py 使用用户.部门.公司等相关账号的创建,已经个人,部门账号的冻结,删除,相关 ...

  3. CSS-默认padding 和 margin

    一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...

  4. Linux指令 压缩与解压

    打包: 格式:tar -cvf  压缩后的名称.tar   压缩的文件1 压缩的文件2 ```压缩的文件n(压缩多个文件为一份时各个文件以空格隔开) 例子:tar -cvf  tomcats.tar ...

  5. python语法_装饰器

    装饰器的知识点储备: 1 作用域 2 高阶函数 3 闭包 内部函数,对外部作用作用域的变量进行了引用,该内部函数就认为是闭包, def outer(): x=10 def inner(): print ...

  6. [IOT] 自制蓝牙工牌办公室定位系统 (二)—— 基于ESP32的蓝牙信号扫描系统

      前面章节: 自制蓝牙工牌办公室定位系统 (一)-- 阿里物联网平台概览及打通端到云(硬核·干货)   目录: 1.蓝牙广播简介 2.蓝牙扫描简介 3.基于蓝牙广播和蓝牙扫描常见应用 4.ESP32 ...

  7. 在上线项目中,用Vue写一个星级评价

    先看一下效果: html: <div class="big-star-box"> <img :src="imgNum>0 ? srcStar : ...

  8. [Swift]LeetCode171. Excel表列序号 | Excel Sheet Column Number

    Given a column title as appear in an Excel sheet, return its corresponding column number. For exampl ...

  9. [Swift]LeetCode937. 重新排列日志文件 | Reorder Log Files

    You have an array of logs.  Each log is a space delimited string of words. For each log, the first w ...

  10. PHP实现用户注册并保存数据到文件

    首先我们实现功能时,分析实现的步骤是什么,就这个而言,我们应该接收用户提交的数据并进行校验,然后保存在文件,最后给用户反馈. 这里需要注意的是为了避免嵌套过深,这里使用自定义函数来实现,其代码如下: ...