HTML and CSS Reference
Note Application suspension hardly applies to applications running on a laptop or PC.
It is a scenario that applies to applications running on mobile devices. For example, the
application is suspended on a tablet when another application is run in the foreground or
when the screen gets engaged.
Let's see how to instruct the flip view to retrieve information from the sessionState and how to start
from a given item. You open gallery.js again and add the following lines at the end of the GalleryApp.
var startIndex = WinJS.Application.sessionState.currentPhotoIndex;
flipView.currentPage = startIndex;
If there's no information saved to the sessionState, the startIndex variable is set to undefined. .
However, the FlipView component is smart enough to start anyway from the first element if the value
set to its currentPage property is not a valid index.
Zooming the image in and out
To complete the exercise, you now need to add some template and behavior to the detail page. The
idea is to display the same image the user clicked in the flip view and enable some zoom capabilities.
Defining the template for the detail page
First, you write some additional markup for the detail page. Open details.html and fill up the SECTION
element you find already in the body of the page with the following:
<section aria-label="Main content" role="main">
<img id="zoomable-image" src="#" alt=""
data-win-bind="src: GalleryApp.DetailsPageModel.currentPhoto.imageUrl" />
The same image you picked up in the flip view is now displayed in the detail page. As a user, how
would you like to zoom on the image? This is a point that deserves some attention.
On a classic PC application, a typical user would probably find it natural to click the image to zoom
in and click with the right button to zoom out. A Windows Store application, though, is designed
to be used on a PC as well as touch-enabled devices, such as a tablet. The ideal gesture to zoom
for the user of a tablet would be “pinch-and-zoom.” Implementing pinch-and-zoom is definitely
possible in WinJS but a lot is left to you. In addition, it wouldn't solve the problem of zooming where
a non-touch device is available. For the sake of simplicity, you can opt for yet another approach that
works great for both touch and non-touch devices.