Panning With Snap-Points in Windows Store Application

This article describes the Panning snap-points and provides how you can using this new interaction mechanism in your Windows Store application for good user experience.

Introduction of Panning snap-points

Snap-points can be set to aid users in getting to key locations in the content and act as a paging mechanism for the user. This will help the user to minimize excessive sliding in large pannable areas.

Panning snap-points are useful for applications such as photo albums or that have logical groupings of items that can be dynamically regrouped to fit within the display area.

There are five types of snap-points properties that you can set according to needs; they are:

• None: This means there no snap points to be set.
• Optional: User will snap Proximity Snap-Points.
• OptionSingle: Snap-points are optional.
• Mandatory: The content is always smoothly animated to a snap-point.
• MandtorySingle: Snap-points are mandatory and cannot be jumped over.

After going through all available snap-points now let's begin to implement this in a Windows Store Application.

First, open VS 2012 and choose a Blank Windows Store application using XAML.

Now, open the MainPage.xaml page and use the following code in it.

Here is the UI code:

<Grid x:Name="Parent">

    <Grid.RowDefinitions>

        <RowDefinition Height="Auto"/>

        <RowDefinition Height="Auto"/>

    </Grid.RowDefinitions>

    <Grid Grid.Row="0">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="Auto"/>

        </Grid.RowDefinitions>      

        <StackPanel Orientation="Vertical" Margin="0,10,0,0" Grid.Row="1">

            <StackPanel Orientation="Horizontal">

                <TextBlock Style="{StaticResource BasicTextStyle}" VerticalAlignment="Center" Text="Select SnapPoint Type" />

                <ComboBox x:Name="snapPointsCombo" SelectedIndex="0" SelectionChanged="ComboBox_SelectionChanged_1" >

                    <ComboBoxItem>None</ComboBoxItem>

                    <ComboBoxItem>Optional</ComboBoxItem>

                    <ComboBoxItem>Optional Single</ComboBoxItem>

                    <ComboBoxItem>Mandatory</ComboBoxItem>

                    <ComboBoxItem>Mandatory Single</ComboBoxItem>

                </ComboBox>

            </StackPanel>

            <Button x:Name="scenario2Clear" Content="Reset" Margin="0,10,0,0" Click="Scenario2Reset" />

        </StackPanel>

    </Grid> 

    <Grid HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1">

        <ScrollViewer x:Name="scrollViewer" Width="480" Height="270"

                      HorizontalAlignment="Left" VerticalAlignment="Top"

                      VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto"

                    VerticalScrollMode="Disabled" HorizontalScrollMode="Auto"

                      ZoomMode="Disabled">

            <StackPanel Orientation="Horizontal">

                <Image Width="480" Height="270" AutomationProperties.Name="Image of a cliff" Source="images/cliff.jpg" Stretch="None"  HorizontalAlignment="Left" VerticalAlignment="Top"/>

                <Image Width="480" Height="270" AutomationProperties.Name="Image of Grapes" Source="images/grapes.jpg" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"/>

                <Image Width="350" Height="270" AutomationProperties.Name="Image of Mount Rainier" Source="images/Rainier.jpg" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"/>

                <Image Width="480" Height="270" AutomationProperties.Name="Image of a sunset" Source="images/sunset.jpg" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"/>

                <Image Width="550" Height="270" AutomationProperties.Name="Image of a valley" Source="images/valley.jpg" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"/>

            </StackPanel>

        </ScrollViewer>

    </Grid>

</Grid>

</Grid>

In the above I simply used some XAML controls. I have used multiple images in the single Scrollviewer control for panning purposes. I also set some default properties of Scrollviewer like scrolling mode and scrolling visibility etc.

After designing the UI portion, now go to the MainPage.xaml.cs file and put some C# code there.

Here I simply work on the SelectionChanged event of ComboBox that I have designed in my UI page.

Code of .cs file:
 

private void ComboBox_SelectionChanged_1(object sender, SelectionChangedEventArgs e)

{

    if (scrollViewer == null)

    {

       return;

    } 

    ComboBox cb = sender as ComboBox; 

    if (cb != null)

    {

       switch (cb.SelectedIndex)

       {

           case 0:

               scrollViewer.HorizontalSnapPointsType = SnapPointsType.None;

               break;

            case 1:

               scrollViewer.HorizontalSnapPointsType = SnapPointsType.Optional;

               break;

            case 2:
               scrollViewer.HorizontalSnapPointsType = SnapPointsType.OptionalSingle;

               break;

            case 3:
                scrollViewer.HorizontalSnapPointsType = SnapPointsType.Mandatory;

                break;

            case 4:

                scrollViewer.HorizontalSnapPointsType = SnapPointsType.MandatorySingle;

            break;

                default:

                scrollViewer.HorizontalSnapPointsType = SnapPointsType.None;

                break;

         }

     }

}

In the above code I set the HorizontalSnapPointsType property of the ScrollViewer control based on the ComboBox selected item. This property describes the manipulation behavior to the snap points along the horizontal axis.

Now, your app is ready to behave in snap point panning that act as a paging mechanism for the given multiple images and user view a photo albums that emulate paginated content.

At last build the application and run it.

Select any option from the given ComboBox as needed.