Snap View in Windows Store Apps

Introduction

In this article I describe snap view in Windows Store Apps. The snap view allows us to create a targeted view of 320px wide. A width of 320px is a common and familiar size that we are already designing for on various platforms.
When we use grid apps or Split Apps than we will get all the code that shows a different view in Snap View.

When we use a blank app to create a Windows Store App then we make some changes, first we change the page to a Layoutaware page. For this make the following change:

Change in the Blackpage.xaml.cs:

change the following:

public sealed partial class MainPage : Page

to:

public sealed partial class MainPage : LayoutAwarePage

changes in blankpage.xml:

Change the following:

<Page

    x:Class="Application1.BlankPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Application1"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

to

<common:LayoutAwarePage

x:Name="pageRoot"

x:Class="Application1.BlankPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:Application1"

xmlns:common="using:Application1.Common"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">

Adding of visual State manager:

Now we add A visual state manager. The Visual state manager manages the various views in various sizes automatically. The XAML for it is:

<VisualStateManager.VisualStateGroups>

    <VisualStateGroup>

        <VisualState x:Name="FullScreenLandscape"/>

        <VisualState x:Name="Filled"/>

        <VisualState x:Name="FullScreenPortrait"/>

        <VisualState x:Name="Snapped">

            <Storyboard>

                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyListScroller" Storyboard.TargetProperty="Visibility">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                </ObjectAnimationUsingKeyFrames>

                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyGridScroller" Storyboard.TargetProperty="Visibility">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                </ObjectAnimationUsingKeyFrames>

            </Storyboard>

        </VisualState>

    </VisualStateGroup>

</VisualStateManager.VisualStateGroups>

Summary

In this article I described how to create a Windows StoreApp for Listview Rating using JavaScript. I hope this article has helped you in understanding this topic. Please share it. If you know more about this, your feedback and constructive contributions are welcome.