Did you use the WinJS navigation framework ? If not, you should really take a look at it because it’s can be really useful and powerful !<\/p>\n

Today I needed to cancel the navigation from a page based on the current state of the page<\/strong>. It could be useful to zoom out of a semantic zoom instead of navigating back when the user tap the little arrow (windows phone habit \ud83d\ude42 ).<\/p>\n

I was wondering how I would be able to code this and it turned out that this is pretty easy.<\/p>\n

<\/p>\n

Th is done in several steps :<\/strong><\/p>\n

\n
1. Detect the navigation<\/li>\n
2. Cancel or not the navigation<\/li>\n
3. If not canceled, perform some clean-up code<\/li>\n<\/ol>\n

   Detect the navigation<\/h2>\n

   Detecting that the user request a navigation is easy as an event subscription.
   \nThe subscription is done on the “onBeforeNavigate” event of the Navigation object<\/strong>.
   \nI usually do it on the ready method which is called whenever a user navigates to the page.<\/p>\n

   [javascript]
   \n WinJS.Navigation.addEventListener("beforenavigate", onbeforeNavigate);
   \n[\/javascript]<\/p>\n

   Cancel or not the navigation<\/h2>\n

   In the onBeforeNavigate method, you can set a promise which will tell the navigation system if the navigation must be canceled<\/strong>.
   \nThis is done using the provided event param ‘setPromise’ method. Here is an example :<\/p>\n

   [javascript]
   \nfunction onbeforeNavigate(eventObject) {
   \n \/\/cancel the navigation
   \n eventObject.detail.setPromise(WinJS.Promise.wrap(true));<\/p>\n

   \/\/let the navigation proceed (this is the default behavior)
   \n eventObject.detail.setPromise(WinJS.Promise.wrap(false));
   \n}
   \n[\/javascript]<\/p>\n

   If not canceled, perform some clean-up code<\/h2>\n

   When the navigation must be proceed, you have to remove your subscription to the event because<\/strong> it would be raised on each navigation. Simple as this code :
   \n[javascript]
   \n WinJS.Navigation.removeEventListener("beforenavigate", onbeforeNavigate);
   \n[\/javascript]<\/p>\n

   This is my first post on WinJS : let’s celebrate \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"

   Did you use the WinJS navigation framework ? If not, you should really take a look at it because it’s can be really useful and powerful ! Today I needed to cancel the navigation from…<\/p>\n","protected":false},"author":3,"featured_media":1077,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[28],"tags":[],"_links":{"self":[{"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/posts\/1066"}],"collection":[{"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/comments?post=1066"}],"version-history":[{"count":11,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/posts\/1066\/revisions"}],"predecessor-version":[{"id":1076,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/posts\/1066\/revisions\/1076"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/media\/1077"}],"wp:attachment":[{"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/media?parent=1066"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/categories?post=1066"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/tags?post=1066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}