UWP 基礎頁面切換

前言

使用一個簡單的範例介紹如何切換頁面, 基本上會用到Frame的Navigate()作為頁面切換的方法, 以及實作OnNavigatedTo 處理頁面切換時的動作

假設今天我們要設計一支程式, 在主頁面(MainPage)上顯示顧客(Person)資料, 並且提供按鈕(Edit), 讓使用者按下去之後, 切換主頁面到編輯頁面(EditPage)修改資料, 使用情境如下：

情境一：使用者在主頁(MainPage)點擊Edit按鈕

情境二：使用者在編輯頁(EditPage)點擊Save按鈕

Data Model

• 我們首先建立一個Person的類別來表示顧客資訊

MainPage Code-Behind

• 我們在這邊宣告Person, 用來作UI元件的 Data Binding的目標物件
• 將DataContext 設為 this (作為UI元件的Data Binding的來源)
• 實作Edit按鈕的Click Event handler, 在這個函式內我們從Window.Current.Content取得 root frame 的實體, 然後呼叫它的 Navigate 方法去切換頁面並且把現在的Person資訊傳給EditPage
• 複寫(override) OnNavigatedTo 處理當頁面被切換回MainPage時, 我們要去更新Person

MainPage.xaml

• 我們在這邊建立兩個TextBlock並且綁定Code-behind裡的Person.Name, 和Person.Id

EditPage Code-Behind

• 這邊做的事情其實跟MainPage差不多, 宣告Person, 設定DataContext
• 複寫OnNavigatedTo, 拿MainPage傳過來的Person更新EditPage現在的
• 實作按鈕Click Event handler處理頁面切換的動作並傳遞更新後的Person給MainPage

EditPage.xaml

• 在這個頁面供TextBox顯示MainPage傳過來的Person資訊, 以及提供按鈕Save去切換頁面, 然後將更新後的Person回傳給MainPage