[Universal App] 頁面切換的流程

簡單解釋 Universal App 的頁面切換的流程

        寫 Windows Store  App 的人應該都知道一件事,一般最常見的 UI 構造就是在應用程式啟動後會產生一個 Windows 型別的物件,這個 Window 中間會包著一個 Frame 型別的物件; 這個 Frame 物件中就包著我們所建立的 Page 型別的物件,大致上如下圖所示:

w01

 

 

        當使用 Frame.Navigate 或是 Frame.GoBack (在 Windows Phone 上按 Back 鍵基本上就是呼叫這方法,除非你有覆寫它) 等等方法瀏覽到其他頁面的時候就是把 Frame 中的 Page 換來換去而已。這篇文章要來簡單解釋一下在頁面間瀏覽的行為產生的流程會經過哪些方法 (簡單的意思就是我會忽略掉某些通常不會去修改它內容的方法)。

 

 

        照例要來點假設,這個假設就是不使用空白專案與空白頁面,如果你要測試的話,用基本頁面來做是個好主意。這個假設的原因是要確認使用到 NavigationHelper 類別的一致性,若是沒有先說明,你開了空白頁面,原始程式碼的結構可能就會和我不一樣。所以頁面的建構函式應該會長成這樣:

public MainPage()
{
    this.InitializeComponent();
   
    this.navigationHelper = new NavigationHelper(this);
    this.navigationHelper.LoadState += this.NavigationHelper_LoadState;
    this.navigationHelper.SaveState += this.NavigationHelper_SaveState;
}

 

 

        然後頁面中會包含以下幾個 Method

private void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)
 {
 }

private void NavigationHelper_SaveState(object sender, SaveStateEventArgs e)
{
}

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    this.navigationHelper.OnNavigatedTo(e);
}

protected override void OnNavigatedFrom(NavigationEventArgs e)
{
    this.navigationHelper.OnNavigatedFrom(e);
}

 

 

        先解釋一下 OnNavigatedTo / NavigationHelper_LoadState ,OnNavigatedFrom / NavigationHelper_SaveState 這兩組方法的關係。 在 OnNavigatedTo 方法中會呼叫 this.navigationHelper.OnNavigatedTo(e), 這會引發 navigationHelper 中的 LoadState 事件,從 MainPage 的建構函式可以看出來此 LoadState 事件相關的委派函式就是 NavigationHelper_LoadState 方法;OnNavigatedFrom 則是呼叫 this.navigationHelper.OnNavigatedFrom(e) 引發 navigationHelper 中的 SaveState 事件,相對應的事件委派函式就是 NavigationHelper_SaveState。所以通常我們不太會去修改 OnNavigatedTo 和 OnNavigatedFrom 方法的內容,而是將這些要增加的程式碼放入 NavigationHelper_LoadState (ex: 進入頁面後讀取之前儲存的狀態) 和 NavigationHelper_SaveState (ex: 離開頁面前儲存目前的狀態)。

 

 

        廢梗鋪完了,開始進入正題,第一個要講的流程是從使用者在畫面上按下應用程式的動態磚進入程式的順序。

 

 

        (1) 動作流程:使用者按下動態磚啟動程式。

w02

 

 

 

 

 

       (2) 動作流程:從 MainPage 瀏覽至 SubPage,也就是在 MainPage 中呼叫了 Frame.Navigate(typeof(SubPage)) 。

W03

 

 

        上方的圖顯示了一個有趣的事情,當呼叫了 Frame.Navigate(typeof(SubPage)) 時,先執行的動作其實是 SubPage 的建構函式,然後 MainPage 中的 OnNavigateFrom 方法才會被呼叫。這代表的意義是我們在 SubPage 中的程式碼如果需要長時間的處理的話,當 MainPage 中呼叫 Frame.Navigate(typeof(SubPage)) 時,畫面將會停留在 MainPage 一段時間。

 

 

        (3) 動作流程:由 SubPage 返回 MainPage,也就是呼叫了 Frame.GoBack 方法。

W04

 

 

 

        這個圖顯示了當使用者從 MainPage –> SubPage 再回到 MainPage 時,MainPage 的建構函式依然被呼叫了;這個情況表示當 Frame 在瀏覽至另外一個 Page 時,原有的 Page 將會被丟棄,以這個例子來說 Frame.GoBack 事實上只是製造了一個新的 MainPage 執行個體 ,而非真的回到原來的 MainPage 執行個體中。這也就是為什麼如果你在 MainPage 上的 TextBox 輸入了某些字元後,如果程式沒有做任何處理就瀏覽到另一個頁面後再回來 MainPage 時,TextBox 的內容會消失的原因;所以許多文件中總是建議要在 navigationHelper_SaveState 方法中儲存頁面資訊。