向上滑动的扩展器控件答案

【问题标题】：Expander control that Slides up向上滑动的扩展器控件
【发布时间】：2011-10-25 02:39:55
【问题描述】：

我正在尝试构建一个动画效果，其中按下屏幕底部的“按钮”会导致 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 :)

【问题讨论】：

您能否仅发布 Expander、xaml 标签和 x:Name 的模板结构？不需要 VisualStateManager 标签。
不完全确定您的目标是什么？基本上，我当前的测试 wp7 应用程序是一个带有扩展器的标准向导应用程序，其中我在堆栈面板中有 4 个按钮，与cespage.com/silverlight/tutorials/wp7tut24.html 完全相同。（我现在正在考虑改用固定大小的面板并尝试将其移到屏幕上/移出屏幕，而不是尝试缩放它）
抱歉，凌晨 2 点放屁 - 我没看到链接。请参阅下面的答案。

标签： xaml windows-phone-7 animation controls

【解决方案1】：

你可以为边缘设置动画吗？

这不是依赖属性，因此需要一些努力，但可以做到。（如果你需要的话，我有一个例子。）

【讨论】：

感谢您的建议 - 遗憾的是，该解决方案无法正常工作（一直不绘制内容区域）

【解决方案2】：

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

首先，为了保持一致性，将IsExpanded 属性设为false 默认：

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

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

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

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

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

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

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

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

【讨论】：

感谢您的建议......但这是我已经尝试过的“我也玩过动画容器/内容高度：” - 它不起作用，因为包含stackpanel 忽略高度。如果我改用 ScrollViewer，它可能会起作用......会尝试......但目前正在查看的可能不是动画高度 - 而是只是将面板移动到屏幕上/关闭屏幕。再次感谢（抱歉，这不是更积极的消息！）
在您的代码中，Duration 设置为零，这将使ContentPresenter 的高度跳转到 200 像素。添加非零 Duration 将使其具有动画效果。你试过非零Duration 还是不行？
这也让我感到困惑（我使用了那篇文章中的代码），但似乎零是默认（“自动”）值，被解释为 1 秒 - 请参阅 msdn.microsoft.com/en-us/library/… 中的一些解释

【解决方案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>

【讨论】：