WPF 设置控件阴影后,引发的Y轴位置变化问题

背景

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

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

貌似有点莫名其妙,因为控件之间并不在同一个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     <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     }

界面显示:

解决方案

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

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

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

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

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

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

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

  测试OK

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

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

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

原文地址:https://www.cnblogs.com/kybs0/p/9716032.html

时间: 2024-10-07 06:08:25

WPF 设置控件阴影后,引发的Y轴位置变化问题的相关文章

WPF设置控件获取键盘焦点时的样式FocusVisualStyle

控件获取焦点除了用鼠标外,可以通过键盘来获取,比如Tab键或者方向键等,需要设置控件获取键盘焦点时的样式,可以通过设置FrameworkElemnt.FocusVisualStyle属性, 因为几乎所有常用的控件都继承了FrameworkElement,所以绝大部分控件都拥有该属性 // Summary: // Gets or sets a property that enables customization of appearance, effects, // or other style

WPF设置控件获得焦点FocusManager

简单用法如下: 在父类容器中通过附加属性FocusManager.FocusedElement来绑定需要强制获得焦点的控件,用法如下: <Grid FocusManager.FocusedElement="{Binding ElementName=btn}">        <Button x:Name="btn" Content="1234"/> </Grid> 需要注意的是:当控件使用Style或者Temp

WPF常用控件总结及其应用demo

WPF常用控件总结及其应用 一.控件 1.WrapPanel布局控件:可以实现当空间不足时子控件自动往下一行布局,空间充足时又会自动调整行布局.常用布局控件还有StackPanel(设置其子元素是垂直排列还是水平排列).Grid(通过定义行和列来绘制出一个表格).Canvas(通过指定相对于其的坐标来指定子控件的位置).DockPanel(设置其子元素如何停靠,DockPanel.Left.DockPanel.Right.DockPanel.Top.DockPanel.Bottom). 2.Sc

WPF Popup 控件导致被遮挡内容不刷新的原因

WPF Popup 控件导致被遮挡内容不刷新的原因 周银辉 今天在写一个WPF控件时用到了Popup控件,很郁闷的情况是:当popup关闭时,原来被popup挡住的界面部分不刷新,非要手动刷新一下(比如最大最小化一下窗口),就连网上传说的这个方法也不行 ? 1 2 3 4 5 6 7 8 9 10 public static class UiHelper {     private delegate void NoArgDelegate();     public static void Ref

WPF布局控件常用属性介绍

WPF布局控件常用属性介绍 其它 | 作者:慧都控件网 | 2011-04-06 13:41:57| 阅读 0次 有用(0) 评论(0) 概述:WPF布局控件都是派生自System.Windows.Controls.Panel抽象类的面板,Panel类继承自 FrameworkElement,Panel类本身并没有什么特别的,但是WPF中提供了许多用于布局的控件都继承自Panel类,如 StackPanel控件,WrapPanel,DockPanel,Grid,UniformGrid,Canva

WPF——Expander控件(转)

Expander是一个可以展开和折叠的控件,它包含两部分标头和内容. 标头通Header属性来设置,内容通过Conent属性设置,如下面一个简单的例子: Expander ExpandDirection = Down Width = 96 Expander.Header TextBlock Text = 标题 FontWeight = Bold / / Expander.Header Expander.Content TextBlock TextWrapping = Wrap T Expande

C# WPF 歌词控件(支持逐字定位描色效果)

原文:C# WPF 歌词控件(支持逐字定位描色效果) 之前做了一个模仿网易云歌词的控件,实现了加载网易云歌词并能随音乐播放进度定位歌词.今天呢将在这个控件的基础上增加逐字定位描色功能,如下图效果(QQ音乐PC)所示: 我所使用的实现方法很简单粗暴,把每句歌词每个字切开,单独显示在一个描色的控件中,然后拼成一行完整的歌词,随音乐播放进度去找相应的字进行描色. 而最重要的描色功能是怎么实现的呢? 答案是:使用ClipToBounds属性 当控件ClipToBounds属性为TRUE时,超出控件范围的

WPF的控件介绍及注意事项(2)

上一章讲到了布局.这点就有点类似建筑设计.第一步是出图纸.整体的结构.而第二步就是堆砌, 建筑学里面也会有很多描述, 例如砖头,水泥.玻璃.瓷板.而在WPF中, 这一切的基础也就是控件.用于填充结构的UI控件. WPF的控件结构 各种控件类型详解 ContentControl 类 设置内容的属性为 Content, 例如 控件目录下只允许设置一次Content, 如下演示给按钮添加一个Image和一个文本显示Label, 错误如下: 正确的使用方式: <!利用我们上一章说讲到的布局容器装载在其中

&lt;iOS小技巧&gt;UIview指定设置控件圆角

一.用法: 众所周知,设置控件的圆角使用layer.cornerRadius属性即可,但是这样设置成的结果是4个边角都是圆角类型. 利用班赛尔曲线画角: //利用班赛尔曲线画角 UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:button.bounds byRoundingCorners:(UIRectCornerBottomLeft |UIRectCornerBottomRight) cornerRadii: