xaml - Windows 10 - 视觉状态更改的转换

Question

我正在尝试通过使用视觉状态触发器来更改网格的宽度，使我的 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>

Answer 1

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

VisualState.Setters 的引入是为了消除 Storyboard 中 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>

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

因为通过动画宽度会影响布局。这就是为什么默认情况下动画处于禁用状态，并且只能通过将 EnabledDependentAnimation 设置为 true 才能发挥作用。您会看到，这个动画会很卡顿。

尽量避免依赖动画，并仅在 AdaptiveTriggers 中为独立动画(如变换)使用 Storyboard。