How to do different Animations on the same page but on different screen sizes?

I am making a UWP app in which in which I need to different animations for different screen sizes on the same page. I want if screen width is less than 400 this animation should play, If screen with is less than 720 other animation should play. How can I write the code for this in C#.

Answers


You can get what you want by using the StateTriggers property with an AdaptiveTrigger to create a declarative rule in XAML markup based on window size. For example:

<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>

I think you can use either the SystemParameters.Workarea or the System.Windows.Forms.WorkingArea. From either you can access the width property.

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


Need Your Help

PHP (mysqli) to find single value

php mysqli

I know how to search using mysqli to find if there is at least one match. How do I go about retrieving another value from a found row. It must just require changing 1 or 2 things.

Chartboost iOS: Get localized Video Ads?

ios localization chartboost

How to set up a campaign to get localized video ads? Is it possible?