我试图让一个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>
答案 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>
然后将其从其原始位置移开,依次更改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>
这篇文章是我在尝试进行类似的滑入/滑出过程时发现的。因为每个组件都是自己的帖子,所以我写了一篇博客文章,逐步引导用户完成整个过程: