We will use the FlipView for iterating through Images that’s passed to it from the WinJS List object.
Step 2: In the default.html add the below Html code:
<div id="trgFilpView" data-win-control="WinJS.UI.FlipView"></div>
Note that the <div> is set to the WinJS.UI.FlipView using data-win-control property.
Step 3: Add the style for the FlipView in the default.html as below:
border: solid 1px black;
var trainerArray = [
name: "Sachin Shukre",
description: "The Senior Corporate Trainer for C,C++"
name: "Mahesh Sabnis",
description: "The Senior Corporate Trainer for .NET"
name: "Sachin Nimbalkar",
description: "The Senior Corporate Trainer for Client Side Frameworks"
name: "Mahesh Sabnis",
description: "The Senior Corporate Trainer for C# and ASP.NET"
//Define the List from the Array
var trainersList = new WinJS.Binding.List(trainerArray);
//This is the Private data
//To expose Data publically, define namespace which defines
//The object containing the Property-Value pair.
//The property is the public name of the member and the value is variable which contains data
var trainersInfo =
The above code defines a JSON array with hard-coded data in it. This array is then passed to the ‘trainersList’ object defined as a List object using WinJS.Binding.List(). Since the array and the List are declared as private objects, these will not be exposed to the FlipView. To do this, we need to define the namespace which defines an object with property/value pair. The namespace is defined using WinJS.Namespace.define(). The ‘trList’ is the public property which contains the ‘trainersList’. This is now exposed to the FlipView.
Step 5: To display data into the FlipView, we need to define a Template for showing the repeated data. (Note: This is conceptually similar to templates in XAML). In the default.html add the below <div> tag, this is set to the WinJS.Binding.Template.
<!--Define the Template Here-->
<div id="DataTemplate" data-win-control="WinJS.Binding.Template">
<img src="#" data-win-bind="src : image"
<h3 data-win-bind="innerText : name" ></h3>
<h4 data-win-bind="innerText : description" ></h4>
The above template contains <img> which is bound to the ‘image’ property. which is coming from the List which is defined in Step 4 using the Array. The header <h3> and <h4> are used for displaying ‘name’ and ‘description’ declared in the array.
Step 6: To display the data in the FlipView, change the <div> with id ‘trgFlipView’ as shown below:
To connect to the data, the itemsDataSource property of the FlipView is used. This property is assigned to trList object defined in the namespace in Step 4. The ItemTemplate property is set to the DataTemplate defined in Step 5.
Run the application, you will get the First Record from the Array.
Click on the Flip Navigation button, the next record will be displayed:
ConclusionWe saw how to bind an array of images to a FlipView control in WinJS. We can use the FlipView control to display any page-wise data, for example magazines, books etc.
The entire source code of this article can be downloaded at https://github.com/devcurry/winrt-flipview