WPF Bug List (11)--Misplaced rendertransform animation

There are roughly 3 ways to make displacement-class animations in WPF, Margin, RenderTransform, and LayoutTransform. Although the effect of 3 is slightly different, but in many cases 3 ways can be universal. But when you understand the bugs that exist in RenderTransform, you may need to think about them.

We all know that many controls have FocusVisualStyle, which is usually a dotted box. The problem with RenderTransform is that the elements in the control's focusvisualstyle are not transform along with the control itself.

The process of reproducing the bug is shown in the following illustration.

Figure 1. Program Run diagram

A simple procedure that can no longer be simpler. Put a button on an empty form, create an animation, and when mouseenter this button, use RenderTransform to move the button down 100 pixels to the right. The code is as follows.

Demo Code

1 <window xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
2 xmlns:x= Http://sch Emas.microsoft.com/winfx/2006/xaml "
3 x:class=" Animationconflict.mainwindow "
4 x:name=" window "Title=" MainWindow "
5 width=" height= "
6 <window.resources>
7 <storyboard X : key= "Onmouseenter"
8 <doubleanimationusingkeyframes begintime= "00:00:00" storyboard.targetname= Button "
9 storyboard.targetproperty=" (Uielement.rendertransform).　　　　　　　　　　　　　 (translatetransform.x) "
<splinedoublekeyframe keytime=" 00:00:01 "value="/>
11 </doubleanimationusingkeyframes>
<doubleanimationusingkeyframes begintime= "00:00:0 0 "storyboard.targetname=" button "
storyboard.targetproperty=" (uielement.rendertransform). (TRANSLATETRANSFORM.Y) "
<splinedouBlekeyframe keytime= "00:00:01" value= "/>";
</doubleanimationusingkeyframes>
16 </storyboard>
</window.resources>
<window.triggers>
<eventtrigg Er routedevent= "mouse.mouseenter" sourcename= "button"
<beginstoryboard storyboard= "{Staticreso Urce Onmouseenter} "/>
</eventtrigger>
</window.triggers>
<grid Me= "LayoutRoot"
<button x:name= "button" rendertransformorigin= "0.5,0.5"
Hori　　　　　　　　　　　　　Zontalalignment= "left" verticalalignment= "top"
width= "content=" button "
27 <button.rendertransform>
<translatetransform/>
</button.rendertr Ansform>
</button>
to </grid>
</window>