VisualStateManager: how the page is aware of initial VisualState

Question

I have one doubt regarding the working of VisualStateManager in Windows Store apps...

Assume this sample page:

<common:LayoutAwarePage x:Name="pageRoot">
    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="400" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <ListView Grid.Column="0"
                  x:Name="testElement" />
        <Grid Grid.Column="1" />
    </Grid>
<common:LayoutAwarePage/>

I declare the next VisualStateManager behavior, with a sample VisualState:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="ApplicationViewStates">
        <VisualState x:Name="Snapped">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="testElement"
                                               Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="Collapsed" />
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

And now my questions:

How can the application determine that the "state" (I mean, the values of the properties) is the one I used in the XAML declaration of the page?
Do I need to explicitly set the "initial" values of the page in - for example - a FullScreenLandscapeOrWide VisualState?
Is it possible that the page will start (maybe with other screen resolutions or particular devices) in a different VisualState "state" (not FullScreenLandscapeOrWide), giving me problems if I do not declare the FullScreenLandscapeOrWide VisualState (the initial status) ?

Thank you in advance for clarifications...

Farhan Ghumra Farhan Ghumra · Accepted Answer · 2013-09-30T09:44:24

All the things happen in LayoutAwarePage. Check out Visual state switching region, StartLayoutUpdates event is called when the page is loaded. It determines itself what's the current visual state of app, you don't need to add explicitly in each page. It can switch the controls in particular visual state when the app is opened in that particular state.

VisualStateManager: how the page is aware of initial VisualState

1 Answers