如何在同一页面上但在不同的屏幕大小上制作不同的动画

本文关键字:动画 一页 屏幕 | 更新日期: 2023-09-27 18:23:49

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

如何在同一页面上但在不同的屏幕大小上制作不同的动画

通过将StateTriggers属性与AdaptiveTrigger一起使用,可以根据窗口大小在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>

我认为您可以使用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