Windows 8 Fragment Navigation

by sunil ravulapalli /13. January 2012 17:57 /windows8 /Comments (0)

This code was tested on Windows 8 developer preview and may be outdated by the time future versions are released.

The contents of default.html are as show below. Just include a div called "contentHost".

<!DOCTYPE html>
    <meta charset="utf-8" />
    <!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script src="winjs/js/base.js"></script>
    <script src="winjs/js/ui.js"></script>
    <script src="winjs/js/binding.js"></script>
    <script src="winjs/js/controls.js"></script>
    <script src="winjs/js/animations.js"></script>
    <script src="winjs/js/wwaapp.js"></script>
    <!-- TTips references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
    <h1>Traffic Tips</h1>
    <div id="contentHost">

In default.js, include the navigated as it is. Don'f forget to include this line WinJS.Navigation.addEventListener('navigated', navigated); as shown. When onmainwindowactivated all you have to do is call WinJS.Navigation.navigate('main.html').

(function () {
    'use strict';
    // Uncomment the following line to enable first chance exceptions.
    // Debug.enableFirstChanceException(true);

    document.addEventListener("DOMContentLoaded", function () {
    }, false);

    WinJS.Application.onmainwindowactivated = function (e) {
        if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {

    function navigated(e) {
        WinJS.UI.Fragments.clone(e.detail.location, e.detail.state)
            .then(function (frag) {
            var host = document.getElementById('contentHost');
            host.innerHTML = '';

                type: 'fragmentappended',
                location: e.detail.location,
                fragment: host,
                state : e.detail.state


    WinJS.Navigation.addEventListener('navigated', navigated);
blog comments powered by Disqus