Monthly Archives: March 2012

Post navigation

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.

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.

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

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.

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.

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.

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

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

From Push Notification Service

Locally

Scheduled

Periodic

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

You can update Tile using below line of code.

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.

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.

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.

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.

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.

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

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.

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.

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.

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

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

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

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.

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

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.

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.

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.

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

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

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

This function will return group of the item.

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

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.

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.

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

And we have already created Item Template as following.

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

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.

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.

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

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

Just after next day of launching I installed Windows 8 Consumer Preview and VS1 Beta. And yes exactly like you, I were excited. After installation VS11 Beta looks like below,

After installation I was tempted to create Metro Application. So I browsed to create new project and found below installed project templates.

So essentially it got all the templates from VS2010 with addition of installed templates to create Metro applications. When first time I launched VS11, I set default language as C Sharp that is why you see Visual C# as first language in above image.

I wanted to create a metro application using HTML and JavaScript so I click on Other Language and then selected a Blank Application from installed template.

After pressing Ok I got message that I need Developer License for Windows 8 Consumer Preview. Off course I had no choice but to click on I Agree to proceed.

Then it asked me to authenticate.

After successful authentication I got message as below that I have developer license and its expiration date also.

In Solution explorer I noticed now WinJS reference files are inside the References folder and there is one X.509 certificate.

In later post I will investigate and discuss more on why this X.509 certificate is in the solution? Other files were same like default.html, default.js and package.appxmanifest file. I put a Hello World in the body.

Next you need to choose debugging environment. Either you can debug it on Simulator, Local Machine or Remote Machine

I selected Simulator and got the expected output in simulator as below,

Next I thought to open project in expression blend for that I right clicked on project and selected open in Expression Blend. In Expression Blend for the purpose of exploration, I dragged and dropped a DatePicker control from Asset on the Body of HTML page.

After adding DatePicker control, I noticed blend has added call to WinJS.UI.processAll function to process the controls.

On running I got DatePicker control as below in the simulator. I noticed that WinJS control has taken the default color of color I set for the Windows 8.

In this way we have set Visual Studio 11 to create metro apps. In further post I will get deeper into all other aspects and areas to create Metro Applications for Windows 8. I hope this post was useful. Thanks for reading.

In above code while making call to service; we are not providing any header type and as response we are getting JSON since default serealizer of ASP.NET Web API is JSON serealizer. If you want to get XML data as response then you need to set Accept Header type to XML. Below code will download XML data from the service.

Now question may come to your mind that why to use HttpClient over WebClient? You can use same instance of HttpClient to make as many call to service as you want. HttpClient allows you to configure headers extension etc.

In this way you can consume an Http Service created using ASP.Net Web API in a managed client. I hope this post is useful. Thanks for reading.

Following WPF controls are available in INFRAGISTICS NETADVATANGE. I have put images corresponding to controls such that you get better idea and visualization of the controls.I am sure you will get excited seeing the images of the controls.

xamCalendar

xamCalculationManager

xamCarouselListBox

xamCarouselPanel

xamChart

xamColorPicker

xamContextMenu

xamDataCards

xamDataCarousel

xamDataGrid

xamDialogWindow

xamDockManager

xamFunnelChart

xamFormulaEditor

xamGrid

xamInputs

xamMenu

xamxamMonthCalendar

xamMultiColumnComboEditor

xamOutlookBar

xamPieChart

xamSlider

xamSpellChecker

xamTagCloud

xamTileManager

xamTilesControl

And the below are the more controls,

I am sure after seeing all the controls you must be very excited to use them. So why to wait? Go ahead and follow below screens to install INFRAGISTICS NETADVANTAGE on your machine.