Start – Stop Magic in WinJS.Application Object

Introduction:
Start and Stop methods of WinJS.Application object explaining their functionality as by the names suggested.

Initial expectation:
These methods are responsible for the starting and stopping of the application, since we usually see them added to the default templates.

My experiment :
default.html file Content


  <body>
    <span id="deSpan" style="font-size:70px;"></span>
</body>

Continue reading

Advertisements

WinJS.Promise – My Experiment to create some delay using loop

Intoduction:
WinJS.Promise is a class, which supports the asynchronous programming model. Upon the execution, program control executes the promise class and proceeds to the subsequent statement to execute. But it keeps track of the execution point to which control needs to get back after the promised function finished its execution.
A question was banging my head, whether I can create my own delay to the promise object and invoke Then/Done.

Description:
I tried 2 kind of exercises. But in both the exercise I had the HTML page common.

Exercise #1
Used the below code to create a delay by executing a long loop in an external method and returning a promise object from it. So that on completion, I can call Then method to do some task. 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

Displaying message dialog in Metro apps

Introduction:
Popup messages play a vital role for an application. Confirmation boxes, Alert messages and displaying specific sets information are done in Windows store app through a message dialog that pops up on the screen covering the entire width of the screen. These message box design are by default provided by Microsoft.

Description:
Message Dialog blocks the user interaction with other objects on the screen and dims the Screen background. So it should be used accordingly. Continue reading

3D effects in Windows Store App

Introduction :
3D effects can be applied to Windows Store apps using Transforms. Rotation of an object is possible along all the Three axis : X, Y and Z. Object appears to be Rotated by the respective angle supplied to it through the transfor.

Description :
In this example, we will take a look into PlaneProjection, it’s rotation angle and Center of rotation. All three play a crucial role in 3D designs in XAML.
PlaneProjection exposes to various properties that can be used to give a 3D effect. In which the RotationAngle helps us to decide the angle by which the object is to be rotated.
CenterOfRotation property decides the point about which the object is to be rotated.
We will see the rotation by an angle and the change of CenterOfRotation, how it differs from the default Point about which it is rotated. 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 2

Introduction :
Flip view by default comes with the style templates, which can be customized to produce a different appearance. Editing or styling the flip view container or its next and previous buttons can be done through these style sheet.

Description :
By default flip views for Windows store app have their own Next and Previous buttons, which are defined in their default styles sheet with a class named as “Arrow”. We can find the default style sheet from this MSDN Link .

Let’s replace the default arrow with a custom Image to change the flip view appearance. Continue reading