Question

我正在尝试构建一个动画效果，按下屏幕底部的“按钮”，会导致StackPanel的动画“向上滑动” - 有点像应用程序栏实现的向上滑动菜单显示。

我一直在根据http://www.cespage.com/silverlight/tutorials/wp7tut24.html上使用动画的示例尝试一些效果：

                            <VisualState x:Name="Expanded">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="ContentScaleTransform"
                    Storyboard.TargetProperty="ScaleY" To="1" Duration="0"/>
                                    <DoubleAnimation Storyboard.TargetName="RotateButtonTransform"
                    Storyboard.TargetProperty="Angle" To="180" Duration="0"/>
                                </Storyboard>

然而，使用此示例并没有给我所需的效果 - 因为内容容器高度“跳”，即使内容比例本身是动画的。

我还玩过容器/内容高度的动画：

                                    <DoubleAnimation Storyboard.TargetName="Content"
                                                     Storyboard.TargetProperty="Height" To="200" Duration="0"/>

...但是这并没有真正起作用，因为高度被StackPanel覆盖（我不能使用MaxHeight，因为它不是动画的正确属性）。

关于我应该制作动画的任何想法/指示？

注意 - 在任何人对WP7设计指南发表评论之前......这是客户的设计/规范，它确实在Metro中适合：）

Answer 1

你可以为保证金设置动画吗？

这不是依赖属性，因此需要花费一些精力才能完成。（如果你需要，我会在某个地方举个例子。）

Answer 2

没有在这台机器上安装WP7 SDK，所以一切都来自内存。拿一粒盐。并且，我假设使用硬编码的大小是可以的（否则它会更加棘手）。

首先，为了保持一致性，请通过defalut制作IsExpanded属性false：

public static readonly DependencyProperty IsExpandedProperty =
    DependencyProperty.Register("IsExpanded", typeof(bool),
    typeof(Expander), new PropertyMetadata(false));

在名为“内容”的ContentPresenter上添加Height="0"。

在名为“Expanded”的Storyboard VisualState中添加此动画：

<DoubleAnimation Storyboard.TargetName="Content"
                 Storyboard.TargetProperty="Height"
                 To="200"
                 Duration="0:0:1"/>

在名为“Collapsed”的Storyboard VisualState中添加此动画：

<DoubleAnimation Storyboard.TargetName="Content"
                 Storyboard.TargetProperty="Height"
                 To="0"
                 Duration="0:0:1"/>

根据自己的喜好调整动画的To和Duration属性。

对于内容的幻灯片动画，请尝试删除正在处理“ContentScaleTransform”的动画。在这种情况下，此动画将导致更多“增长”或“拉伸”效果。

Answer 3

感谢您的建议 - 我尝试了一些事情......最后我一起去了：

我将扩展器及其内容放在容器（边框）
我使用网格布局将此扩展器放在屏幕上
我为TranslateTransform设置了动画，以便在屏幕上打开/关闭此扩展器。

一些精简代码：

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="ViewStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.5"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Expanded">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="BorderTranslateTransform"
                                                     Storyboard.TargetProperty="Y" To="0" Duration="0"></DoubleAnimation>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Collapsed">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="BorderTranslateTransform"
                                                     Storyboard.TargetProperty="Y" To="154" Duration="0"></DoubleAnimation>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Border BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{TemplateBinding CornerRadius}"
                            Background="{TemplateBinding Background}"
                            Margin="0,0,0,0">
                        <Border.RenderTransform>
                            <TranslateTransform x:Name="BorderTranslateTransform"></TranslateTransform>
                        </Border.RenderTransform>
                        <Grid>
                            // stuff here
                        </Grid>
                    </Border>

Slander的扩展器控件

3 个答案: