WPF Bug清单之（11）——错位的RenderTransform动画

WPF Bug清单之（11）——错位的RenderTransform动画2011-06-17 博客园木-叶在WPF中制作位移类动画大致有3种方式，Margin、RenderTransform和 LayoutTransform。虽然3者的效果略有不同，但是不少情况下3种方式可以通用。但是当你了解到RenderTransform所存在的Bug时，可能就需要考虑一番了。

我们都知道很多控件都有FocusVisualStyle，一般就是一个虚线框。 RenderTransform的问题就在于，控件的FocusVisualStyle中的元素，不会随着控件本身一起被Transform。

Bug的重现过程如下图所示。

图1. 程序运行图

一个简单得不能再简单的程序。在空窗体上放一个Button，建立一个动画，当MouseEnter这个Button的时候，用RenderTransform把这个Button向右向下移动100个像素。代码如下。

Demo Code

 1 <Window  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  2      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  3     x:Class="AnimationConflict.MainWindow"
  4     x:Name="Window" Title="MainWindow"
  5     Width="200" Height="200">
  6     <Window.Resources>
  7         <Storyboard x:Key="OnMouseEnter">
  8             <DoubleAnimationUsingKeyFrames  BeginTime="00:00:00" Storyboard.TargetName="button"
  9                  Storyboard.TargetProperty="（UIElement.RenderTransform）. （TranslateTransform.X）">
10                 <SplineDoubleKeyFrame  KeyTime="00:00:01" Value="100"/>
11              </DoubleAnimationUsingKeyFrames>
12             <DoubleAnimationUsingKeyFrames  BeginTime="00:00:00" Storyboard.TargetName="button"
13                  Storyboard.TargetProperty="（UIElement.RenderTransform）. （TranslateTransform.Y）">
14                 <SplineDoubleKeyFrame  KeyTime="00:00:01" Value="100"/>
15              </DoubleAnimationUsingKeyFrames>
16         </Storyboard>
17     </Window.Resources>
18     <Window.Triggers>
19         <EventTrigger RoutedEvent="Mouse.MouseEnter"  SourceName="button">
20             <BeginStoryboard  Storyboard="{StaticResource OnMouseEnter}"/>
21         </EventTrigger>
22     </Window.Triggers>
23     <Grid x:Name="LayoutRoot">
24         <Button x:Name="button"  RenderTransformOrigin="0.5,0.5"
25                 HorizontalAlignment="Left"  VerticalAlignment="Top"
26                 Width="75"  Content="Button">
27             <Button.RenderTransform>
28                 <TranslateTransform/>
29             </Button.RenderTransform>
30         </Button>
31     </Grid>
32  </Window>