使用RotateTransform旋转时如何防止方向改变？

Question

我有一个带有TransformGroup的Image控件：

<Image x:Name="mainImageCtrl" 
       RenderTransformOrigin="0.5, 0.5" 
       Source="{Binding Image}">

     <Image.RenderTransform>
          <TransformGroup>
               <TranslateTransform/>
               <RotateTransform />
          </TransformGroup>
     </Image.RenderTransform>

</Image>

单击按钮，图像将向左或向右旋转90度。我使用了DoubleAnimation：

<DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[1].Angle" 
                 By="90" 
                 Duration="0:0:1"/>

点击另一个按钮后，图像将向左，向右，向上或向下移动：

<DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[0].X" 
                 By="200" 
                 Duration="0:0:1"/>

<DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[0].Y" 
                 By="200" 
                 Duration="0:0:1"/>

问题是，当我将图像向右旋转90度时，X和Y方向会发生变化。因此，当我尝试向左移动图像时，由于方向的改变，图像似乎向上移动。

如何在旋转元素时防止方向发生变化？如果不可能，我怎么能有一个像样的解决方案呢？

Answer 1

将图像保存在容器中，例如1x1网格，然后移动该容器而不是移动图像本身。容器不会知道旋转，应该按预期移动。