<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ViewStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3" To="FContentState">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FButtonTransition" Storyboard.TargetProperty="Angle" To="-90" Duration="0:0:0.2"/>
</Storyboard>
</VisualTransition>
<VisualTransition GeneratedDuration="0:0:0.3" To="BackContentState">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FButtonTransition" Storyboard.TargetProperty="Angle" To="90" Duration="0:0:0.2"/>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="FContentState">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BBackContent" Storyboard.TargetProperty="Opacity" To="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="BackContentState">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BFContent" Storyboard.TargetProperty="Opacity" To="0" />
<DoubleAnimation Storyboard.TargetName="FButtonTransition" Storyboard.TargetProperty="Angle" To="90" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
速度理解上面代码:
VisualStateGroup.Transitions(过度状态)都是为视图状态而生的,没有视图状态,过度状态完全没作用,
下面代码就是将视图状态和过度状态绑定,在执行VisualState(视图状态)时,会执行绑定的VisualTransition(过度状态),所以GeneratedDuration="0:0:0.3"就起作用了[视图状态中的Storyboard动作过度0.3秒],
然后执行过度视图中的Storyboard
<VisualState x:Name="FContentState">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BBackContent" Storyboard.TargetProperty="Opacity" To="0" />
</Storyboard>
</VisualState>
<VisualTransition GeneratedDuration="0:0:0.3" To="FContentState">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FButtonTransition" Storyboard.TargetProperty="Angle" To="-90" Duration="0:0:0.2"/>
</Storyboard>
</VisualTransition>
如何执行视图状态?
代码中调用下面代码
VisualStateManager.GoToState(this, "FContentState", false);
第一个参数:状态间转换控件
第二个参数:你的视图状态名
第三个参数:是否使用过度状态
视图状态组的代码很是枯燥,记住怎么用就行了,实在是敲不出来就复制粘贴,然后改动改动即可。。。