In this article I will talk about one of the interesting control of WinJS in Windows Store and that is FlipView. I personally liked the control because with minimum code it can provide nice feel of your app specially if it is photo or image app.

Let's write code to explore FlipView of WinJS.

Step 1: Open VS2012 and select New Project from File Menu.

Step 2: Select template type as Windows Store under JavaScript.

Step 3: Open default.js and place below code at the end of default.js. In the below code I have created an array with type, title and picture items which I have bind to WinJS.Binding.List. And finally I exposed the anonymous method using WinJS.Namespace.define.

(function () {
   "use strict";
   var array = [
      { type: "item", title: "Item 1", picture: "AppImages/FVImage1.jpg" },{ type: "item", title: "Item 2", picture: "AppImages/FVImage2.jpg" },{ type: "item", title: "Item 3", picture: "AppImages/FVImage3.jpg" },{ type: "item", title: "Item 4", picture: "AppImages/FVImage4.jpg" }
   ];

   var dataList = new WinJS.Binding.List(array);
   var flipViews =
   {
      itemList: dataList
   };
   WinJS.Namespace.define("DataExample", flipViews);
})();

Step 4: Open default.html and place below code inside the body tag.

<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
   <div>
      <img src="#" data-win-bind="src: picture; alt: title" />
      <div>
         <h2 data-win-bind="innerText: title"></h2>   
      </div>
   </div>
</div>

<div id="flipView" data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }">
</div>