PageControl實現頁面之間的跳轉

win8 store app並不像iOS app那樣有一條鏈串聯起整個的程序框架,通過這段時間的學習才深有體會,今天一整天都在瞭解學習win8應用中頁面的跳轉和如何返回等,發現,它並不像iOS那樣,在兩個ViewController之間,按住control鍵拖動到鼠標到目標ViewController就可以完成一個跳轉,在WinJS裏,要實現這個,是需要做很多事情的.

一開始看着MSDN給的一些demo,看着那些代碼,初一看,覺得好麻煩,而且完全看不懂,接着,邊查看WinJS的API文檔,邊看代碼,自己又動手做了一下,突然就明白, 發現,win8應用的這種頁面轉換到的方法其實是很不錯的一種方法,好了,廢話少說,開始進入正題.

之前說過一些html的跳轉方法,就是用window.location.reload(url)方法，在這裏完全沒用，雖然，它可以簡單的實現跳轉到另一個html，但是如果要返回呢，想着在重新reload一下不就行了嗎？不，這是完全行不通的。就比如在之前的文章中提到的，我的第一個html裏面嵌入了一個html，跳轉之後，在跳轉後的也能寫個backbutton想着再重新reload第一個html，然後發現，嵌入的html就不見了，這個我也不去深究原因，行不通就換別的辦法。

終於，WinJS的PageControl幫我解決了這個問題，原理很簡單，以默認的html爲基底,然後在上面嵌入新的html,準確的說,是一個page,然後,page之間的轉換跳轉可以用WinJS.UI.Animation來實現.

首先在底html文件裏定義一個div:

<div id="contentHost"></div>

在默認生成的js文件裏面,在程序啓動時將第一個要顯示的html嵌入到底html,即在函數onactivated裏面實現:

args.setPromise(WinJS.UI.processAll().then(function () {
                WinJS.Navigation.navigate(url);
            }));

最重要的,給WinJS.Navigation添加事件監聽器,沒有這一步,你嵌入的html是沒辦法顯示出來的

WinJS.Navigation.addEventListener("navigated", function (eventObject) {
        var url = eventObject.detail.location;
        var host = document.getElementById("contentHost");
        // Call unload method on current scenario, if there is one
        host.winControl && host.winControl.unload && host.winControl.unload();
        WinJS.Utilities.empty(host);
        eventObject.detail.setPromise(WinJS.UI.Pages.render(url, host, eventObject.detail.state).then(function () {
            WinJS.Application.sessionState.lastUrl = url;
        }));
    });

接着,在嵌入的html中加個button,在與其對應的js文件中實現響應事件,即跳轉到下一個界面

js文件中最重要的一步是以當前html的url創建一個Page,這一步是很重要的,不然的話,當前html的裏的控件無法響應事件.

var page=WinJS.UI.Pages.define(url,members);

member是即page裏面包含的成員,button的響應可以在members裏實現:

button.addEventListener("click", function () {

                WinJS.UI.Animation.exitPage(mainDiv, null).done(function () {
                    WinJS.Navigation.navigate(url);
                });
            });

WinJS.UI.Animation.exitPage是一個page退出動畫,mainDiv就是你要退出的內容,然後將下一個要顯示的url嵌入,這裏還可以設置頁面交替的動畫,這裏設置爲null,即爲默認值,設置的話,可以按照如下格式:

{top:string,left:string,rtlflip:true||false }

string是像素,即動畫開始的起始位置,rtlflip爲true即動畫是從右到左實現.更多的用途會在以後更深入的學習研究

至此,跳轉到下一頁面後,可以設置一個backbutton,響應事件和上面說過的button一樣,這樣,就完成了進入下一界面,而且可以返回的功能了

就個人的理解,WinJS的這種機制是很不錯的,首先,頁面跳轉的流暢性自不用說,再就是它的跳轉不會說像iOS那樣會產生一個新的ViewController壓入到棧裏,耗費內存,它其實就只是page之間的交替互換.