从左侧动画滑入WPF面板

Question

我试图让一个面板在WPF中动画滑动行为。面板从中心向外填充，而不是从左边填充，并且它只在第一次动画。

下面是我的动画的标记。

<Style.Triggers>
        <Trigger  Property="Visibility" Value="Visible">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation From="0" To="200" Duration="0:0:0.5"
                                         AccelerationRatio="0.2" DecelerationRatio="0.1"
                                         Storyboard.TargetProperty="Width"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
    </Style.Triggers>

我如何解决搬入/搬出正确?

Answer 1

不要让像"Width"这样的属性动起来，这就是RenderTransforms的作用。

为了获得你所描述的行为("滑动")，你想要动画一个TranslateTransform从屏幕/页面的某个X点到最终位置。

要获得XAML和文章其余部分所指示的行为，您将使用ScaleTransform，并将原点设置为面板的左侧。

你还应该知道渲染转换的目标可能有点棘手，更多信息请参阅这个问题

下面是RenderTransforms (MSDN)的文档

Answer 2

应该应用并更改控件/面板的TransformTranslate坐标来移动，而不是其宽度。

考虑到我将使用Rectangle作为我们的例子，如果想要移动它，我们将首先设置一些锚坐标:

<Rectangle Width="100">
   <Rectangle.RenderTransform>
       <TranslateTransform X="0" Y="0" />
   </Rectangle.RenderTransform>
 </Rectangle>

然后移动它从原来的位置，改变X或Y变换。所以如果我们想把它向右移动100像素，我们可以设置一个StoryBoard:

<Storyboard x:Key="SlideRight">
    <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                     From="0" To="100"
                     Duration="0:0:0.3" />
</Storyboard>

---

这篇文章是我在尝试做一个类似的滑入/滑出过程时发现的。因为每个组件都有自己的帖子，所以我写了一篇博客文章，向用户介绍整个过程:

WPF -面板左侧或右侧滑入动画