jQuery with WinJS in Windows Store Application

As we all know, we can design Windows store applications using HTML, CSS and JavaScript. We can use jQuery along with the WinJS as well.

Let’s open up the Visual Studio and create a new navigation project under JavaScript with a name called jqTest.
Now we will get the project created and opened with the default.html page.SolutionExplorer


Let’s get download the jQuery¬†and place that in js folder in Solution Explorer. Continue reading

Panorama control in Windows Phone

Windows Phone comes with a number of controls for display. Among them the Panorama Control is one the new controls for user interaction and display.

Panorama Control spans beyond the screen and helps user to chose from a number of panorama items. Each panorama item can consists of Grids, Stack Panels and other Phone controls. Image applied to Panorama as background spans across all the panorama items. Only one panorama item is visible at a time and user can make selection from it. A swipe gesture gives the next or previous Panorama item. Continue reading

Custom commands in Windows store Message Dialogs

Message Dialogs are important part of windows store app and they help us providing popup messages and quick information in required places. Typically a message dialog covers the entire screen and by default has a close button. Windows store apps allow us to change these default characteristics of a message dialog.

The default close button in message dialog for windows store app can be removed and new buttons with custom click event handlers can be added to it. These events can be then later used to catch user interactions with the information. Continue reading

Canvas animation in windows store apps

Animations are key features to make an app interactive and lively. It can occur between Opacity, change in X & Y coordinates, Bounce effect, Size changes etc. Storyboards are the most effective way to implement an animation.

In this example we will go through an animation, which would make a rectangular box move from left to right with position and time span being specified.
To make such kind of animation first of all it is required to animate the Canvas.Left property of an element using the DoubleAnimation class. This class makes use of the Duration specified in the format “hour:minute:second” and animates the Canvas.Left property of the element according to the time period specified. Other property includes AutoReverse, which reverses the animation (the same animation in opposite manner)and RepeatBehavior, which specifies how many times the animation can be repeated. Continue reading