2

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

1 回答 1

3

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

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这样的独立动画。

于 2016-01-27T21:11:39.027 回答