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创建基于故事板的动画。

已引入

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中使用故事板，以用于变换等独立动画。

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

1 个答案: