Windows 10 - 视觉状态变化的过渡

Windows 10 - Transition for Visual State changes

我正在尝试让我的 Windows 10 应用程序利用响应式设计,方法是使用视觉状态触发器来更改网格的宽度。当状态改变时,宽度跳到下一个宽度。

有没有办法通过某种过渡或动画来平滑这种变化?

<VisualStateManager.VisualStateGroups>
     <VisualStateGroup>
         <VisualState x:Name="DesktopWideState">
             <VisualState.StateTriggers>
                 <AdaptiveTrigger MinWindowWidth="1280" />
             </VisualState.StateTriggers>

             <VisualState.Setters>
                 <Setter Target="ContentPanel.Width"
                    Value="1000" />
             </VisualState.Setters>
         </VisualState>

        <VisualState x:Name="DefaultState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
         </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

VisualState 确实包含 属性 Storyboard,因此确实可以创建基于 StateTriggers 的 storyboard-based 动画。

引入

VisualState.Setters 是为了消除情节提要中 ObjectAnimationUsingKeyFrames 产生的噪音。

要为您的示例添加动画,请使用以下命令:

<VisualStateManager.VisualStateGroups>
  <VisualStateGroup>
    <VisualState x:Name="DesktopWideState">
      <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowWidth="1280" />
      </VisualState.StateTriggers>
      <VisualState.Storyboard>
        <Storyboard>
          <DoubleAnimation Storyboard.TargetName="ContentPanel" Storyboard.TargetProperty="Width" Duration="0:0:0.5" To="1000" EnableDependentAnimation="True" />
        </Storyboard>
      </VisualState.Storyboard>
    </VisualState>
</VisualStateManager.VisualStateGroups>

不要使用这个例子!为什么?

因为动画 Width 会影响布局。这就是为什么默认情况下禁用动画并且仅通过将 EnabledDependentAnimation 设置为 true 才起作用的原因。你会看到,这个动画会卡顿很多。

尽量避免依赖动画,并在 AdaptiveTriggers 中仅将故事板用于独立动画,例如 Transforms.