Solution for Snap View in Windows 8

Question

How to use the "Snap View" process in Win 8 application?

I have tried many no.of times using different blogs but couldn't find the right solution for it.
Can anyone help me with the following conditions:

1. What is the coding for snap view?
2. How to implement this?

I made the application but got stuck in this "Snap View".

Thanks in Advance.

Answer 1

Snap View is a built-in Windows feature.

As long as your user's screen resolution is at least 1366 by 768, they will be able to activate snap view.

Answer 2

SnapView is really easy to implement. Default stuff like back button and Page title is already implemented but you can add your custom elements to the list too.

                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                               Storyboard.TargetProperty="Style">
                    <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{StaticResource SnappedBackButtonStyle}" />
                </ObjectAnimationUsingKeyFrames>

Let's work with above code:

1. Element you want to change: Storyboard.TargetName="backButton"
2. Property of the element you want to change: Storyboard.TargetProperty="Style"
3. New value of the property: Value="{StaticResource SnappedBackButtonStyle}"

So all we are doing is, for backButton change the Style property to {StaticResource SnappedBackButtonStyle}.

You can do same for any other element.

Here is code from the file:

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape" />
                <VisualState x:Name="Filled" />

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>