windows store app

Question

Hi i developed a app for windows store . i don't know to implement snap view any one can help me

Answer 1

If you create a new project using grid template of visual studio, you can see how that is implemented.

In that project XAML files have something called Visual State Manager that does the trick. Further if you see inside it you will notice there area visual states like Snap, and within it you will find storyboard with animations. For each visual state those animations show or hide elements on screen. In some cases some properties like font size are changed.

That looks something like this:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="ApplicationViewStates">
        <VisualState x:Name="FullScreenLandscape"/>
        <VisualState x:Name="Filled"/>
        <VisualState x:Name="FullScreenPortrait">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="100,126,90,0"/>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
        <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>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Make sure your page is derived from LayoutAwarePage class as it already has required plumbing already implemented. That is part of most of the templates in visual studio.

If you think this is going hard then see this screenshot and follow 4 steps in Blend For Visual Studio 2012

* If you find it hard to see this image, then save it and open in some image viewer.

---

-- Vishal Kaushik --

Please 'Mark as Answer' if my post answers your question and 'Vote as Helpful' if it helps you.

Happy Coding!!!

Answer 2

hi i create one app for windows store using blank template in this app i need to implement snap view any one can help me