WPF 設定控制元件陰影后，引發的Y軸位置變化問題

WPF · 發表 2018-09-27 22:58:00

摘要：背景最近遇到一個動畫執行時，文字位置變化的問題。如下圖：如果你仔細看的話，當星星變小時，文字往下降了幾個畫素。貌似有點莫名其妙，因為控制元件之間並不在同一個Panel佈局控制元件中，不存在高度限制變化引發此類問題。所以有了如下測試測試場景 1. 首先新建了...

背景

最近遇到一個動畫執行時，文字位置變化的問題。如下圖：

如果你仔細看的話，當星星變小時，文字往下降了幾個畫素。

貌似有點莫名其妙，因為控制元件之間並不在同一個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"
2Text="微軟雅黑加粗" 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"
 2xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6xmlns:local="clr-namespace:TextBlockShadowEffectForStoryBoardDemo"
 7mc: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"
26Height="30" Width="30" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5"/>
27</Grid>
28<TextBlock x:Name="TestTextBlock1"VerticalAlignment="Center" HorizontalAlignment="Center"
29Text="微軟雅黑加粗" 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>
 4public partial class MainWindow : Window
 5{
 6public MainWindow()
 7{
 8InitializeComponent();
 9this.Loaded += MainWindow_Loaded;
10}
11 
12private void MainWindow_Loaded(object sender, RoutedEventArgs e)
13{
14var storyboard = Resources["Storyboard.ChangeHeight"] as Storyboard;
15storyboard?.Begin();
16}
17}

介面顯示：

解決方案

按照如上重現步驟，有三個條件才會出現此問題。

1.設定了非Microsoft YaHei UI系列的字型 2.設定了陰影效果 3.顯示區域有寬高變更

針對這些條件，我們給出規避的解決方案

其它解決方案（規避措施）：

按照如上測試，將高度變換的區域移動，或者不設定陰影效果，也不會有此文所未Y方向位置變化的問題。

注：如上規避措施只是臨時解決方案，如小夥伴們有其它方案或者發現其它根本原因，可以聯絡我~謝謝

WPF 設定控制元件陰影后，引發的Y軸位置變化問題

背景

測試場景

重現步驟

4.在此顯示控制元件的顯示區域，變更其它控制元件的高度（條件三）。

解決方案

推薦解決方案（規避措施）：

其它解決方案（規避措施）：

您可能也會喜歡…