Question

我试图让一个Panel为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

不要为“宽度”等属性设置动画，这就是RenderTransforms的用途。

要获得您描述的行为（“滑入”），您需要将TranslateTransform从屏幕/页面的某些X设置为最终位置。

要获得XAML和帖子其余部分指示的行为，您可以使用ScaleTransform，并将原点设置在面板的左侧。

您还应该知道渲染变换的定位可能有点棘手，有关详细信息，请参阅此question

以下是RenderTransforms（MSDN）

的文档

Answer 2

应该应用并更改控件/面板的TransformTranslate坐标以使其移动而不是其 width 。

出于考虑，我将使用一个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 – Panel Slide-In Animation From Left Or Right Side

WPF面板从左侧动画中滑入

2 个答案: