jQuery with WinJS in Windows Store Application

Introduction
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.

Description
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

Advertisements

Canvas animation in windows store apps

Introduction:
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.

Description:
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

Page navigation in windows store app

Introduction:
Navigation to different pages is an important part of any application. In Windows Store App it is handled by the Frame class.

Description:
A Windows Store app consist of a Parent frame and pages inside it. This frame provides a method named Navigate() that handles all the navigation between the pages. Navigate method takes the type of Page to navigate as parameters, additionally we can also specify the data to pass to the next page. The Navigate method triggers an event named OnNavigatedFrom inside the page when navigating away from the page and OnNavigatedTo in the page to which we are navigating. The data passed during navigation is caught in the NavigationEventArgs object of the Events above.
The parameter passed from the Previous page is stored in the Parameter property of the NavigationEventArgs that is received while navigating. Continue reading

Windows Store App : Flipview custom styling – Part 3

Introduction :
Flipviews in Windows store app can be used to show items both Horizontally and vertically.
By default flipview items are aligned horizontally. But vertical alignment is also possible using flipview.

Description:
Vertical Alignment of flipview items can be achieved by editing the ItemsPanelTemplate and changing the orientation of VirtualizingStackPanel inside the itemsPanelTemplate to vertical. Continue reading

Windows Store App : Flipview custom styling – Part 1

Introduction
Flipviews are a common control provided along with the windows store library. They are commonly used for magazines and news applications where reading content page wise is essential. It provides a unique swipe effect where you can see pages sliding horizontally or vertically according to your requirement.

For Swipe gestures using mouse,  as per the default style, there are arrows on both side boundaries of the flip view pointing towards the required direction of movement.

Description
We will Look into a situation where we need to remove the arrows of the flip view from it’s style. This situation may arise when we want an entirely touch application where swiping the screen might be the only option. Continue reading