Difference between Application created using Metro UI guidelines and Real Windows 8 Metro Application

Windows 8 Metro Application runs in AppContainer, whereas any application (web or desktop) created with the Metro UI design guidelines does not run on AppContainer. They may be running in browser or directly as exe on System32 under the logged in user credential.

I have been seen people are bit confused in between “An Application Designed with UI Guidelines of Metro “and in “METRO APPLICATION “itself. To make my point more clear let us visit this site.

image

If you see this TechED India site is beautifully designed and adhering to Metro UI design guidelines. Although it is following all the UI guidelines of Metro, it cannot be called as METRO APP. Then next question you may ask that what is a Metro App then?

Let us create a simple Hello World Metro Application. I am creating Hello World Metro Application using HTML and JavaScript.

image

There is nothing fancy about above application but a Hello World Text in H1 tag.

New to Metro Application Development? Read here

Hit F5 to run the application. While application is running open Task Manager. To open Task Manger press Ctr+Alt+Del. In Task Manger you can see your application is listed in the Application tab.

image

Click on the Details tab and you can see a program called WMAHost.exe is running. Microsoft WMA Host is responsible to run Metro Application on Windows 8 Machine.

clip_image001

What point I am trying to make here is that when you run a website adhering to Metro UI guidelines is run through a browser on your Windows 8 machine. Whereas Windows 8 Metro Application runs by a program WMAHost.exe. This program runs in sandbox rather than user login to the Windows 8 machine. To understand it more download and install ProcessExplorer.exe.

Open Process Explorer and in the Integrity tab you can see Windows 8 Metro Application run in App Container.

clip_image003

Here you see that Windows 8 Metro Application runs in AppContainer and this is the major difference between any applications created with the UI guidelines of Metro and Windows 8 Metro Application. I hope now it is clear to you difference between Windows 8 Metro application and application adhering UI guidelines of Metro. Thanks for reading

Live Tiles in XAML based Windows 8 Metro Application

In this post we will discuss Live Tiles in XAML based Windows 8 Metro Application. We will see

  • Updating Live Tiles
  • Creating queue of information to update Live Tiles

What is Live Tile?

Tiles are the entry point for the application. You will find TILES for all applications installed on your machine at the start screen. These Tiles are termed as Live if we update the content of the Tiles on basis of some business rules. So when user sees the Tiles, She gets some vital information from the application. Below are the Tiles of some of the installed applications on my system.

 If you see weather application there is weather information about Seattle on the tiles itself. So to know weather information of Seattle, you do not need to open the application. You can get information by just seeing the Tile of the weather application. This information is live and will change as the weather of Seattle will be changed.

You can update information on Tiles in Four ways

  1. From Push Notification Service
  2. Locally
  3. Scheduled
  4. Periodic

In this post we are focusing on updating Tiles locally. To start with add below namespaces

image

You can update Tile using below line of code.

image

You can see that Update method takes TileNotification as input parameter. You need to pass content to update on Tile as XML to TileNotification. Tile XML can be created using below code.

image

There are many templates type available for TileTemplate. We are using TileWideText01 type (see 1st highlighted text).

There are 44 TileTemplateType available. You need to choose one as your requirement. In following post I will go in details of each TileTemplateType.

Each Tile Template Type is a XML document. We can update a particular element by selecting element with the tag name. We are doing this in second line of code. In last line we are setting the information we want to update on the Tile. You can set is dynamically according to your business requirement.

So putting all pieces of codes together on a click event of a Button, a Tile can be updated as following.


private void btnSendLiveTiles_Click_1(object sender, RoutedEventArgs e)
{
XmlDocument tileXml = TileUpdateManager.
GetTemplateContent
(TileTemplateType.TileWideText01);

XmlElement textElement = (XmlElement)tileXml.
GetElementsByTagName("text")[0];
textElement.AppendChild(
tileXml.CreateTextNode
("Hey This my Text Updated on Tile"));

TileUpdateManager.CreateTileUpdaterForApplication()
.Update(new TileNotification(tileXml));
}

Before you run and see that whether Tiles has been updated or not. You need to set Wide Logo of the application. Text on live Tiles appears only when you have set the Wide Logo. Wide Logo need to be 310×150 Pixels. To set Wide Logo from solution explorer click on Package.appmanifest file and the set the Wide Logo.

image

I have set green rectangle of size 310×150 as Wide Logo. Now go ahead and run the application. After clicking on the button close the application and go to start screen. On start screen you can see that Tile text has been updated with the text we provided.

image

You can update Tile multiple times. For that you need to enable notification queue and you can have five information in the queue to be updated on the Tile. If there are more than five information available then recent five would be updated.

image

On click event of a button you can update Tiles with three different information as following.


private void btnSendLiveTiles_Click_1(object sender, RoutedEventArgs e)
{

TileUpdateManager.
CreateTileUpdaterForApplication().
EnableNotificationQueue(true);

XmlDocument tileXml = TileUpdateManager.
GetTemplateContent
(TileTemplateType.TileWideText01);
XmlElement textElement = (XmlElement)tileXml.
GetElementsByTagName("text")[0];
textElement.AppendChild(
tileXml.CreateTextNode
("Updating Tile1"));

TileUpdateManager.CreateTileUpdaterForApplication()
.Update(new TileNotification(tileXml));

XmlDocument tileXml1 = TileUpdateManager.
GetTemplateContent
(TileTemplateType.TileWideText01);

XmlElement textElement1 = (XmlElement)tileXml1.
GetElementsByTagName("text")[0];
textElement1.AppendChild(
tileXml1.CreateTextNode
("Updating Tile2"));

TileUpdateManager.CreateTileUpdaterForApplication()
.Update(new TileNotification(tileXml1));

XmlDocument tileXml2 = TileUpdateManager.
GetTemplateContent
(TileTemplateType.TileWideText01);

XmlElement textElement2 = (XmlElement)tileXml2.
GetElementsByTagName("text")[0];
textElement2.AppendChild(
tileXml2.CreateTextNode
("Updating Tile3"));

TileUpdateManager.CreateTileUpdaterForApplication()
.Update(new TileNotification(tileXml2));
}

You can have three information in queue getting updated on Tiles. In this way you can work with Live Tiles in XAML based window8 metro application. I hope this post is useful. Thanks for reading.

Presented on Windows 8 at Microsoft DreamSpark Yatra 2012 Indore

I always love talking with students. I strongly believe they are having the energy and unbiased aspiration. In order to pursue my love of talking with students on 18th March 2012, I got an opportunity to present at Microsoft DreamSpark Yata 2012 Indore . Event was in DAVV Auditorium, Takshila Campus, Khandwa Road, Indore. Auditorium was adorable.

image

I got amazed seeing one of the most energetic crowds. Around morning 9 am more than 1500 students were in queue to get into the session hall. It was exciting being there and seeing students love for Microsoft technology.

image

558502_1995889313429_1729375419_958541_729951321_n

It was tough to mange 1500 students but hats off to organizers and 15 MSP from Indore. They did a splendid job. A special thanks to Prateek, Ankur , all MSP and whole team.

dj9 

548305_1995911033972_1729375419_958597_1672491337_n

Find more about event and organizers here

Day started with lighting the lamp. It was an honor sharing stage with HOD and other folks of such a reputed and esteems university.

image

After this my session started on Windows 8. I gave an overview of Windows 8 consumer preview, Metro guidelines, Picture Password, App Store etc. to the Students

image

544823_1995899833692_1729375419_958565_2062616086_n

After my session there was a session from Prabhjot Singh Bakshi on Windows Phone. He delivered an awesome session to highly energetic audience.

image

552638_1995905353830_1729375419_958580_839363811_n

After that there was sponsors talk and closing note. It was great experience being there. Last but not least, I would like to thank all young students for attending, organizers for managing and sponsors. I am looking very forward to see you Indore again in future events.

Some Important Points from Design for Windows Phone Developer session from Bijoy Singhal

image

I attended session of Bijoy Singhal on Design for Windows Phone Developer. I captured some of the points from that session as below

IT has been moved from office to home and in between ;

  • Smartphone is not a tiny desktop
  • Phone usage pattern different from desktop
  • You don’t want to create app that wont be used after 1st time
  • As a developer start putting effort in design
  • Good design = ease of use + experience (functionality, useful,delightful )
  • Good design is personal
  • Good design is differential between two apps
  • Metro : Content over Chrome
  • Metro : Navigation
  • Metro : Lite & Simple Tiles
  • Metro : Typography
  • Metro design is large extent inspired by transportation industry
  • Metro is not just about putting square boxes , it is about performance also
  • Metro discourage to use buttons
  • In Windows Phone you do not exit from any random page
  • Shrinking everything does not make better app
  • Chrome is not information but the beauty aspect of the application.
  • all the font in Windows Phone are SIGO font
  • Motion in Windows Phone design : Turnstile ,Contriumm, Swivel, slide
  • Tilt effect to show response to user.

Some Important Points from “SQL Misconceptions” Session from Pinal Dave and Vinod Kumar

image

I attended session of Pinal Dave and Vinod Kumar on SQL Misconceptions. Few of points from that session is as following

  1. SET ROWCOUNT and TOP and OrderBy is not same.
  2. Set RowCount , Top and OrdetBy gives different execution plan
  3. Misconception is Cluster Index gives the result out in Order. It sort and gives result
  4. Seems due to parallelism Cluster Index does not gives result in order
  5. Cluster Index assure u sorted result only if you are explicitly using order by in the query
  6. Precision of small DateTime 31 sec rounded to next minute and 29 sec gets truncated to orevious minute
  7. As of textbook cluster index physically store the data.
  8. Cluster Index does not store in physical order
  9. Go 10 will run 10 times
  10. In simple recovery model your transaction log is as big as longest transaction run in the system.

 

I hope this quick post is useful. Thanks for reading.

Some Important Points from "Software Kaizen: Kanban explained " session from Stephen Forte

imageimage

  • Kaizen-to make better , continuous improvement from the lean manufacturing movement at Toyota
  • Kaizen is the way to self-criticized your work then group work
  • The agile manifesto is statement of values.
  • we value individuals and their view first over processes
  • Agile is about values not rules and rigid adherence process
  • Agile is about embracing change
  • Agile Methods XP [Past], SCRUM [Present] , Kanban [future] .
  • Kanban focus on visualization and raw materials
  • Kanban is Japanese word for "signal card" .Kaizen promotes continuous improvement
  • Kanban is about flow. Communication is about flow. Change is built into model .
  • In Kanban organize a queue. Limit Work in Progress (WIP) for each queue. There is no Sprints.

 

Core Practices in KanBan

  • Define and visualize the workflow
  • Limit work in progress
  • Measure and Manage flow
  • Make Process Policies Explicit
  • Use Models to suggest improvement

Building Kanban Process

Process #1

  •  Define a Process Flow
  • Identify queues
  • Visualize it on board

Process #2

  • Set your first work in progress limits
  • First time you may have to guess

Process #3

  • Break down each item to about the same size
  • Pull the first items through the system
  • Define how long it takes to pull an item through the system

Process #4

  • Establish a delivery cadence
  • Establish regular meetings/reviews

Process #5

  • Constantly improve your process
  • Daily meeting facing the board to evaluate your flow
  • Continue to tweak the WIP limits and queue
  • Formalize the improvement process

I hope this quick post is useful to you. Thanks for reading.

ListView Binding with Grouping and Semantic Zoom in Windows 8 JavaScript Metro Application

Windows 8 CP and VS11 are around. Recently I wrote Setting up Visual Studio11 Beta for Metro Application Creation . In this post let us get into some development.

In this post we will see

  • Creating DataSource
  • ListView Binding to DataSource
  • Creating ItemTemplate
  • Grouping Data Source
  • Using SemanticZoomView over ListView

At the end of the post we will have output like below,

clip_image002clip_image004

We are going to display list of movies in a ListView. Movies will be grouped with the first letter of their title. Later in the post we will apply SemanticZoomView on the ListView . In above image you can see Semantic Zoom View. To switch between SemanticZoomView and detail view either you can tap on the screen or press CTRL + Arrow key on the keyboard.

Create DataSource

Very first we need to create a DataSource. To create DataSource right click on JS folder and add a new JavaScript file. Let us call this newly added JavaScript file as moviedata.js

clip_image002[5]

Inside newly created file, we need to create an anonymous JavaScript function and define a JavaScript array. This array contains locally data to be bind to the ListView.

MovieArray contains two properties,

  • Title to display name of the movie
  • Picture to display thumbnail of the movie.

All the movie images are inside images folder in the project. Let us create array with sample data. Array is given below.


var movieArray = [
{ title: "The Artist", picture: "images/TheArtist.jpg" },
{ title: "A Better Life", picture: "images/abetterlife.jpg" },
{ title: "Abduction", picture: "images/abduction.jpg" },
{ title: "African Cats", picture: "images/africancats.jpg" },
{ title: "Angel Crest", picture: "images/angelscrest.jpg" },
{ title: "Arthur", picture: "images/arthur.jpg" },
{ title: "Anonymous", picture: "images/anonymous.jpg" },
{ title: "A Dangerous Method", picture: "images/adangerousmethod.jpg" },
{ title: "A Good Old Fashioned Orgy ", picture: "images/agoodoldfashionedorgy.jpg" },
{ title: "A Seperation ", picture: "images/aseparation.jpg" },
{ title: "Another Earth ", picture: "images/anotherearth.jpg" },
{ title: "A Heartbeat Away ", picture: "images/aheartbeataway.jpg" },
{ title: "Bad Teacher ", picture: "images/badteacher.jpg" },
{ title: "Begineers ", picture: "images/beginners.jpg" },
{ title: "Brotherhood ", picture: "images/brotherhood.jpg" },
{ title: "Bridesmaids ", picture: "images/bridesmaids.jpg" },
{ title: "Born To Be Wild ", picture: "images/borntobewild.jpg" },
{ title: "Blackthorn ", picture: "images/blackthorn.jpg" },
{ title: "Bellflower ", picture: "images/bellflower.jpg" },
{ title: "Butter ", picture: "images/butter.jpg" },
{ title: "Bunraku ", picture: "images/bunraku.jpg" },
{ title: "Cars 2 ", picture: "images/cars2.jpg" },
{ title: "Cost Of A Soul", picture: "images/costofasoul.jpg" },
{ title: "Carnage ", picture: "images/carnage.jpg" },
{ title: "Crazy Stupid Love ", picture: "images/crazystupidlove.jpg" },
{ title: "Cracks ", picture: "images/cracks.jpg" },
{ title: "Colombiana ", picture: "images/colombiana.jpg" },
{ title: "Cedar Rapids ", picture: "images/cedarrapids.jpg" },
{ title: "Captain America ", picture: "images/captainamerica.jpg" },
];

Next we need to convert JavaScript array into list to be bind to ListView.

image

Now to make this data publicly available we need to make a namespace and on the HTML page need to add reference of this namespace to use data from this file. Namespace can be created as below,

clip_image002[7]

There are few points worth discussing about creating namespace

  • MovieData.itemList is the public member.
  • MovieData.itemList.datasource will be the datasource.

By this step we have created DataSource. And putting all piece of code together moviedata.js file will be as below,

Moviedata.js


(function () {
"use strict";
// http://www.allmoviephoto.com/photo/index_2011.html
var movieArray = [
{ title: "The Artist", picture: "images/TheArtist.jpg" },
{ title: "A Better Life", picture: "images/abetterlife.jpg" },
{ title: "Abduction", picture: "images/abduction.jpg" },
{ title: "African Cats", picture: "images/africancats.jpg" },
{ title: "Angel Crest", picture: "images/angelscrest.jpg" },
{ title: "Arthur", picture: "images/arthur.jpg" },
{ title: "Anonymous", picture: "images/anonymous.jpg" },
{ title: "A Dangerous Method", picture: "images/adangerousmethod.jpg" },
{ title: "A Good Old Fashioned Orgy ", picture: "images/agoodoldfashionedorgy.jpg" },
{ title: "A Seperation ", picture: "images/aseparation.jpg" },
{ title: "Another Earth ", picture: "images/anotherearth.jpg" },
{ title: "A Heartbeat Away ", picture: "images/aheartbeataway.jpg" },
{ title: "Bad Teacher ", picture: "images/badteacher.jpg" },
{ title: "Begineers ", picture: "images/beginners.jpg" },
{ title: "Brotherhood ", picture: "images/brotherhood.jpg" },
{ title: "Bridesmaids ", picture: "images/bridesmaids.jpg" },
{ title: "Born To Be Wild ", picture: "images/borntobewild.jpg" },
{ title: "Blackthorn ", picture: "images/blackthorn.jpg" },
{ title: "Bellflower ", picture: "images/bellflower.jpg" },
{ title: "Butter ", picture: "images/butter.jpg" },
{ title: "Bunraku ", picture: "images/bunraku.jpg" },
{ title: "Cars 2 ", picture: "images/cars2.jpg" },
{ title: "Cost Of A Soul", picture: "images/costofasoul.jpg" },
{ title: "Carnage ", picture: "images/carnage.jpg" },
{ title: "Crazy Stupid Love ", picture: "images/crazystupidlove.jpg" },
{ title: "Cracks ", picture: "images/cracks.jpg" },
{ title: "Colombiana ", picture: "images/colombiana.jpg" },
{ title: "Cedar Rapids ", picture: "images/cedarrapids.jpg" },
{ title: "Captain America ", picture: "images/captainamerica.jpg" },
];

var dataList = new WinJS.Binding.List(movieArray);

Creating ListView

We have created data source and ahead and create a ListView. In ListView we need to set itemDataSource to MovieData.itemList.dataSource.

image

If you remember while creating data source we have created public namespace with name MovieData . in MovieData.js file so we need to add reference as below.

image

At this point if we run the application we will get output as below. Essentially below is the same array we get as output we created as data source

image

Now we need to create a template to render movie image and name of the movie. An ItemTemplate for ListView can be created as below.

image

Inside ItemTemplate there are two controls

  1. Image control to render thumbnail of the movie
  2. Inside div rendering title of movie.

Now go ahead and set the itemTemplate of ListView as below

image

At this point if we run application we should get ListView as below,

image

You can notice automatically WinJS has added scrollbar. By this point we should have HTML file as below,

Default.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ListViewBinding</title>

<!-- WinJS references -->
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

<!-- ListViewBinding references -->
<link href="/css/default.css" rel="stylesheet">
<script src="/js/default.js"></script>
<script src="/js/moviedata.js"></script>

</head>
<body>

<div id="headerTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
<div>
<h1 data-win-bind="innerText: title"></h1>
</div>
</div>

<div id="moviesTemplate"
data-win-control="WinJS.Binding.Template">

<div style="width: 150px; height: 130px;">
<img src="#" style="width: 100px; height: 100px;"
data-win-bind="alt: title; src: picture" />
<div>
<h4 data-win-bind="innerText:title"></h4>
</div>
</div>

</div>

<div id="movieListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource :MovieData.itemList.dataSource,
itemTemplate:moviesTemplate,
layout: {type: WinJS.UI.GridLayout} }">
</div>
</body>
</html>

Customizing ListView

If we see the ListView, it is not that immersive. we can customize a ListView by overriding the CSS. Each HTML file got a corresponding CSS file associated. For example for default.html there is a css file default.css.Now let us go ahead and override ListView properties. In below CSS

  • ListView height and width is set to 600 pixels and 800 pixels respectively
  • ListView border is set to 2 Pixel
  • Margin of each item in ListView is set to 10 Pixel
  • On hover on each item color would get changed to Red.

image

We need to put above CSS in default.css . After that when we run the application, we will get ListView as below. You can notice that on mouse hover color is changing to Red.

image

Grouping of ListView Items

To group the items in ListView, we need to call CreateGrouped JavaScript function from base.js. This function is defined as below

clip_image001

we can see that it takes three parameters. Explanation of parameters are given below

clip_image002

As you see createGrouped function takes three functions as input parameter. So let us create these functions one by one.

Below function will compare the groups. This function will be groupSorter

clip_image001[6]

This function will return group of the item.

clip_image002[6]

Below function will return Title of the group. In this case items would be grouped with first letter.

clip_image001[8]

In last step we need to call above three functions to create group and make a public namespace for this that is it accessible from other files.

clip_image003

By putting all codes together in mymoviedata.js file you will have two public namespaces. You need to set MovieGroupedData as datasource of ListView to create grouped data.

MovieGroupedData.js


(function () {
"use strict";
// http://www.allmoviephoto.com/photo/index_2011.html
var movieArray = [
{ title: "The Artist", picture: "images/TheArtist.jpg" },
{ title: "A Better Life", picture: "images/abetterlife.jpg" },
{ title: "Abduction", picture: "images/abduction.jpg" },
{ title: "African Cats", picture: "images/africancats.jpg" },
{ title: "Angel Crest", picture: "images/angelscrest.jpg" },
{ title: "Arthur", picture: "images/arthur.jpg" },
{ title: "Anonymous", picture: "images/anonymous.jpg" },
{ title: "A Dangerous Method", picture: "images/adangerousmethod.jpg" },
{ title: "A Good Old Fashioned Orgy ", picture: "images/agoodoldfashionedorgy.jpg" },
{ title: "A Seperation ", picture: "images/aseparation.jpg" },
{ title: "Another Earth ", picture: "images/anotherearth.jpg" },
{ title: "A Heartbeat Away ", picture: "images/aheartbeataway.jpg" },
{ title: "Bad Teacher ", picture: "images/badteacher.jpg" },
{ title: "Begineers ", picture: "images/beginners.jpg" },
{ title: "Brotherhood ", picture: "images/brotherhood.jpg" },
{ title: "Bridesmaids ", picture: "images/bridesmaids.jpg" },
{ title: "Born To Be Wild ", picture: "images/borntobewild.jpg" },
{ title: "Blackthorn ", picture: "images/blackthorn.jpg" },
{ title: "Bellflower ", picture: "images/bellflower.jpg" },
{ title: "Butter ", picture: "images/butter.jpg" },
{ title: "Bunraku ", picture: "images/bunraku.jpg" },
{ title: "Cars 2 ", picture: "images/cars2.jpg" },
{ title: "Cost Of A Soul", picture: "images/costofasoul.jpg" },
{ title: "Carnage ", picture: "images/carnage.jpg" },
{ title: "Crazy Stupid Love ", picture: "images/crazystupidlove.jpg" },
{ title: "Cracks ", picture: "images/cracks.jpg" },
{ title: "Colombiana ", picture: "images/colombiana.jpg" },
{ title: "Cedar Rapids ", picture: "images/cedarrapids.jpg" },
{ title: "Captain America ", picture: "images/captainamerica.jpg" },
];

var dataList = new WinJS.Binding.List(movieArray);

function compareGroups(left, right) {
return left.charCodeAt(0) - right.charCodeAt(0);
}

function getGroupKey(dataItem) {
return dataItem.title.toUpperCase().charAt(0);
}

function getGroupData(dataItem) {
return {
title: dataItem.title.toUpperCase().charAt(0)
};
}

var publicMembers =
{
itemList: dataList
};
WinJS.Namespace.define("MovieData", publicMembers);

var groupedItemsList = dataList.createGrouped(getGroupKey, getGroupData, compareGroups);
WinJS.Namespace.define("MovieGroupedData",
{
groupedItemsList: groupedItemsList
});

})();

By this point we have created functions to group data .Next we need to modify ListView datasource to group ListView items. For that let us created a header template. Header template will display Title of the group. Header Template can be created in the same way of Item Template. Header template is given below

image

And we have already created Item Template as following.

image

To group items in ListView we need to create Header Template and Item Template. We have created this in previous step. Next we need to set datasource of the ListView to bind grouped items. ListView can be created as below for the grouped items

image

If we put all codes together then default.html will have following codes.

Default.html

Let us go ahead and run the application. We should be getting output as following.

clip_image002[13]

We have grouped items in ListView. Next let us add Semantic View. To add Semantic View you need to put ListView in side Semantic View control. In Semantic Zoom we will have two views of same ListView. We need to create a view for the zoom out . For zoom out Template can be created as given below.

clip_image003[4]

After creation of Template let us go ahead and create a ListView for Zoom Out view.

clip_image005[4]

ItemDataSource of zoomed ListView is same as of the zoomed in ListView. Now we need to put both ListView , Zoomed In and Zoomed out in the Semantic Zoom control. We can put ListView controls in Semantic Zoom control as below

clip_image007[4]

Now we should have default.html as following

Default.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ListViewBinding</title>

<!-- WinJS references -->
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

<!-- ListViewBinding references -->
<link href="/css/default.css" rel="stylesheet">
<script src="/js/default.js"></script>
<script src="/js/moviedata.js"></script>

</head>
<body>

<div id="headerTemplate"
data-win-control="WinJS.Binding.Template"
style="display: none">
<div>
<h1 data-win-bind="innerText: title"></h1>
</div>
</div>

<div id="moviesTemplate"
data-win-control="WinJS.Binding.Template">

<div style="width: 150px; height: 130px;">
<img src="#" style="width: 100px; height: 100px;"
data-win-bind="alt: title; src: picture" />
<div>
<h4 data-win-bind="innerText:title"></h4>
</div>
</div>

</div>

<!--<div id="movieListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource :MovieData.itemList.dataSource,
itemTemplate:moviesTemplate,
layout: {type: WinJS.UI.GridLayout} }">
</div>  -->

<h1>Rate Movies Application</h1>

<div id="movieListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource : MovieGroupedData.groupedItemsList.dataSource,
groupDataSource: MovieGroupedData.groupedItemsList.groups.dataSource,
itemTemplate: moviesTemplate,
groupHeaderTemplate: headerTemplate,
layout: {type: WinJS.UI.GridLayout} }">
</div>
</body>
</html>

Next we need to add some CSS to make it more immersive. In default.css , we need to add below css


.win-listview
{
height: 600px;
width: 800px;
border: 2px solid gray;
}

.win-listview .win-container {
margin: 10px;
}
.win-listview .win-container:hover {
background-color: red;
border-color: red;
}
.semanticZoomItem
{
width: 130px;
height: 130px;
background-color: rgba(38, 160, 218, 1.0);
}

.semanticZoomItem .semanticZoomItem-Text
{
padding: 10px;
line-height: 150px;
white-space: nowrap;
color: white;
}

On running we should be getting the below output

clip_image002[15]

On tapping or pressing of crtl and arrow key you should be getting the semantic zoom view. Semantic Zoom View of ListView is as following image.

image

In this way we can work ListView and SemanticZoom WinJS controls. In further post we will try to pull data from service. I hope this post is useful. Thanks for reading.