WPF面板从左侧动画中滑入

时间:2014-03-11 16:32:44

标签: wpf wpf-animation

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

2 个答案:

答案 0 :(得分:2)

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

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

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

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

以下是RenderTransforms(MSDN

的文档

答案 1 :(得分:0)

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

出于考虑,我将使用一个Rectangle作为示例,如果要移动它,我们将首先设置一些锚点坐标:

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

然后将其从其原始位置移开,依次更改XY变换。因此,如果我们想将其向右移动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