如何使用可视状态为UWP中的控件的可见性设置动画？

Question

我目前正在为我的应用程序开发一个自定义控件，该控件使用标题来扩展和折叠内容，您可以单击该标题来更改状态。此刻的模板看起来像这样。

<Style TargetType="controls:ExpandControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controls:ExpandControl">
                <Border>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="State">
                            <VisualState x:Name="Visible">
                                <VisualState.Setters>
                                    <Setter Target="Grid.Visibility" Value="Visible" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="Collapsed">
                                <VisualState.Setters>
                                    <Setter Target="Grid.Visibility" Value="Collapsed" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <ContentPresenter x:Name="HeaderPresenter" Content="{TemplateBinding Header}" />

                        <Grid x:Name="Grid" Grid.Row="1">
                            <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" />
                        </Grid>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

从模板中可以看到，我目前正在使用视觉状态来设置该控件中内容的可见性，但这并不是很好的用户体验，因为内容消失了。

我希望能够以某种方式操纵内容，以使控件的可见性更改时，内容看起来像是从标题中折叠和展开。

我已经看过使用情节提要的动画，但是我是一个全新的人，如果有人可以在情节提要上提供一些帮助以及如何使场景适合我的控件，将不胜感激！

提前致谢！

Answer 1

故事板并不是Visual Studio的出色体验，尝试手动编写故事板可能不是最好的主意。

我建议在Blend中打开您的项目，这是Visual Studio安装的一部分。这是设计应用程序的好工具，尤其是以非常简单的方式添加Storyboard的同时，它还可以在您看到设计器中的更改时自动为您生成Storyboard XAML。

至于您的动画场景，我在页面中使用了您的XAML模板，并提出了一些使它看起来像正在折叠和展开的东西，但它没有像这样处理Visibility属性：

<VisualStateGroup x:Name="State">
    <VisualState x:Name="Visible">
        <Storyboard>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Grid">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Grid">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Grid">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.1">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </VisualState>

    <VisualState x:Name="Collapsed">
        <Storyboard>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Grid">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Grid">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Grid">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.2">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </VisualState>
</VisualStateGroup>

您还需要将内容网格更改为如下所示：

<Grid x:Name="Grid" Grid.Row="1" RenderTransformOrigin="0.5,0">
    <Grid.RenderTransform>
        <CompositeTransform/>
    </Grid.RenderTransform>

    <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" />
</Grid>

我将解释为什么您必须对网格进行更改以及情节提要板接下来要做的事情。

为了实现与您想要的相似的效果，我在网格上选择了“不透明度”和“ Y”比例进行动画处理。

因为我们将要操纵控件的Y比例尺，所以我们将RenderTransform添加到了Grid中。使用CompositeTransform的原因是，您可以操纵最常见的变换（缩放，旋转，平移等）。

在各州中，我们使用关键帧来操纵跨时间的值。这就是在情节提要中实现动画的方式。如果仅将一个KeyFrame的时间设置为0，则它​​将显示为立即更改，类似于使用VisualState.Setters机制更改属性。

在“折叠”状态下，我们将Grid的不透明度和Y缩放比例从1更改为0。这给出了动画，该动画显示了内容折叠到标题中。从关键帧可以看到，我们使这两个属性的动画交错，因此内容在完成缩放比例之前就淡出了。

在可见状态下，我们实际上是通过在相同的时间内将不透明度和Y比例从0更改为1来反转“折叠”状态。

尝试将它们加载到控件中，然后在Blend中进行操作。这是一个很好的起点，因为我很快就将其结合在一起。

您可以在此处找到有关使用Blend的故事板的更多信息：https : //blogs.msdn.microsoft.com/avtarsohi/2016/02/16/understand-storyboard-concept-in-xaml-using-blend-2015/