在视觉状态之间设置动画，而不会出现大量特定的过渡

Question

我有一个似乎相当简单的场景，我正试图在Silverlight中实现，但尽管Silverlight/Blend 4中有所有令人难以置信的强大转换功能，我就是不知道如何做到这一点。

我有一个布局，可以归结为：

<UserControl>
    <Grid>
        <StackPanel>
            <Button x:Name="Button1" />
            <Button x:Name="Button2" />
            <Button x:Name="Button3" />
            <Button x:Name="Button4" />
        </StackPanel>
        <Grid x:Name="Page1" />
        <Grid x:Name="Page2" />
        <Grid x:Name="Page3" />
        <Grid x:Name="Page4" />
    </Grid>
</UserControl>

最初，所有四个页面网格都被隐藏并缩放到零大小，但当您单击相应的按钮时，页面应该会显示不断增长的动画。单击另一个按钮时，上一页应随缩小的动画一起消失，另一页应随增大的动画一起出现。这样，您就可以使用按钮在所有四个页面之间切换。

据我所知，做到这一点的“正确”方法是在用户控件上使用视觉状态。因此，我创建了四个状态，从Page1到Page4，并为每个状态设置要显示的适当页面网格。然后，我将命令放在按钮上以更改用户控件的可视状态。这工作得很好，我可以在页面之间切换，但当我开始尝试定义状态之间的动画时，我遇到了问题。

起初，我认为我可以为每个状态定义一个“To*”和“From*”动画。因此，当您处于Page1状态时，单击按钮进入Page2状态，它将播放隐藏Page1的“From*”动画，然后播放显示Page2的“to *”动画。但这不管用。即使您为每个状态定义了“To*”和“From*”动画，Silverlight也只播放“To*”动画，而完全忽略了“From*”动画！

更糟糕的是，这种行为似乎就是Silverlight应该如何工作的，尽管它根本没有任何意义！这意味着，如果我想让每个页面缩小，然后另一个页面在其位置上增长，我将不得不定义一个从每个状态到另一个状态的单独转换！对于我目前的四页，这将意味着12个独立的过渡，但当我想增加页数时，这个数字将会激增。十页需要9*9 = 81次转换！所有这些都是为了让当前页面缩小，并使新页面增长。

我不敢相信没有更好的方法来处理看起来如此简单的情况，但我找不到任何方法来说明如何处理。我也许可以使用codebehind来修改故事板，但我想允许在Blend中查看和编辑页面网格，以及我读到的所有内容，以避免使用codebehind，并使用视图模型和可视状态来处理事情

请告诉我我漏掉了什么明显的东西？

Answer 1

在Blend中，您只需单击状态选项卡中的状态来开始状态记录，定义状态应该是什么样子，并设置状态转换持续时间。

您不必担心每个单独的状态转换排列，除非您希望每个排列都是不同的。

如果您的状态使用的属性不能是“线性”动画(如更改可见性)，请选中FluidLayout按钮。

编辑:您可以创建您所描述的“完全收缩然后增长”效果，每个状态只使用一个额外的故事板--任何状态{ -> }转换，将BeginTime设置为在增长当前元素之前延迟。

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
mc:Ignorable="d"
x:Class="CommandingLeakWithScrollbar.UserControl1"
d:DesignWidth="640" d:DesignHeight="480">

<Grid x:Name="LayoutRoot">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:1"/>
                <VisualTransition GeneratedDuration="0:0:1" To="Page1">
                    <Storyboard>
                        <DoubleAnimation BeginTime="0:0:1" Duration="0:0:1" To="640" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid1" d:IsOptimized="True" />
                        <DoubleAnimation BeginTime="0:0:1" Duration="0:0:1" To="480" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="grid1" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualTransition>
                <VisualTransition GeneratedDuration="0:0:1" To="Page2">
                    <Storyboard>
                        <DoubleAnimation BeginTime="0:0:1" Duration="0:0:1" To="640" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid2" d:IsOptimized="True" />
                        <DoubleAnimation BeginTime="0:0:1" Duration="0:0:1" To="480" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="grid2" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualTransition>
                <VisualTransition From="None" GeneratedDuration="0:0:1" To="Page1"/>
                <VisualTransition From="None" GeneratedDuration="0:0:1" To="Page2"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="None"/>
            <VisualState x:Name="Page1">
                <Storyboard>
                    <DoubleAnimation Duration="0" To="640" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid1" d:IsOptimized="True" />
                    <DoubleAnimation Duration="0" To="480" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="grid1" d:IsOptimized="True" />
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Page2">
                <Storyboard>
                    <DoubleAnimation Duration="0" To="640" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid2" d:IsOptimized="True"/>
                    <DoubleAnimation Duration="0" To="480" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="grid2" d:IsOptimized="True"/>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid x:Name="grid1"  Background="Beige" Width="40" Height="40" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <Grid x:Name="grid2" HorizontalAlignment="Right" Width="40" Height="40" VerticalAlignment="Top" Background="Wheat" />
    <Grid HorizontalAlignment="Left" Width="40" Height="40" VerticalAlignment="Bottom" />
    <Grid HorizontalAlignment="Right" Width="40" Height="40" VerticalAlignment="Bottom"/>
    <StackPanel HorizontalAlignment="Center">
        <Button Content="Reset" >
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:GoToStateAction StateName="None"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <Button Content="Page1" >
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:GoToStateAction StateName="Page1"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <Button Content="Page2" >
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:GoToStateAction StateName="Page2"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </StackPanel>
</Grid>

​