如何在同一页面上但在不同的屏幕尺寸上做不同的动画？答案

【问题标题】：How to do different Animations on the same page but on different screen sizes?如何在同一页面上但在不同的屏幕尺寸上做不同的动画？
【发布时间】：2016-02-24 23:53:06
【问题描述】：

我正在制作一个 UWP 应用程序，其中我需要为同一页面上的不同屏幕尺寸制作不同的动画。我想如果屏幕宽度小于 400 这个动画应该播放，如果屏幕宽度小于 720 应该播放其他动画。我如何在 C# 中为此编写代码。

【问题讨论】：

标签： c# windows animation visual-studio-2015 uwp

【解决方案1】：

您可以通过使用带有AdaptiveTrigger 的StateTriggers 属性在基于窗口大小的XAML 标记中创建声明性规则来获得所需的内容。例如：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <!--  VisualState to be triggered when window width is <400.  -->
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Storyboard>
                    <Storyboard>
                        <!--  The animation you want to play.  -->   
                    </Storyboard>
                </VisualState.Storyboard>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <!--  VisualState to be triggered when window width is >=400 and <720.  -->
                    <AdaptiveTrigger MinWindowWidth="400" />
                </VisualState.StateTriggers>
                <VisualState.Storyboard>
                    <Storyboard>
                        <!--  The animation you want to play.  -->
                    </Storyboard>
                </VisualState.Storyboard>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <!--  VisualState to be triggered when window width is >=720.  -->
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    ...
</Grid>

【讨论】：

感谢您的回答......我已经使用这些属性完成了这项工作并为不同的屏幕尺寸设置了动画......但是如何为特定事件的所有动画编写播放指令，例如OnClick()...??
当窗口宽度满足其条件时，动画将自动播放。例如，当您将窗口宽度从 500 调整为 400 时，VisualState 和<AdaptiveTrigger MinWindowWidth="0" /> 中定义的动画将播放一次。但是如果将窗口宽度从 500 调整为 600，则不会有动画。

【解决方案2】：

我认为您可以使用 SystemParameters.Workarea 或 System.Windows.Forms.WorkingArea。您可以通过任一方式访问 width 属性。

https://msdn.microsoft.com/en-us/library/system.windows.systemparameters.workarea.aspx

https://msdn.microsoft.com/en-us/library/system.windows.forms.screen.workingarea(v=vs.110).aspx

【讨论】：

问题是关于 UWP。