跳到主要內容

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








標籤：

留言

  1. strada1072018年12月22日 清晨7:29

    感謝您的分享，簡單又實用，但MainPage.xaml畫面您貼錯圖了

    回覆刪除
    回覆
    1. 黑皮考町2018年12月24日 凌晨12:58

      謝謝您的發現, 我已經更新了 MainPage.xaml 的程式碼了

      刪除

張貼留言

這個網誌中的熱門文章

如何在 QNAP QuTS hero 上設定共享資料夾與 NFS 存取權限

如何在 QNAP QuTS hero 上設定共享資料夾與 NFS 存取權限 How to Set Up Shared Folders and NFS Access on QNAP QuTS Hero QNAP 的 QuTS hero 是一個強大的儲存解決方案，結合 ZFS 檔案系統，提供高效能和高可靠性的數據管理功能。如果您需要在 QuTS hero 上建立共享資料夾並啟用 NFS 存取權限，以下是完整的教學步驟，適合用於數據密集型工作負載。 步驟 1：建立共享資料夾並設定儲存屬性 首先，透過以下指令建立一個名為 test123 的共享資料夾，同時設定壓縮啟用、快速複製 (Fast Clone)、以及適合 VDI 或資料庫的 4KB 記錄大小： # 建立共享資料夾並設定儲存屬性 qcli_sharedfolder -s sharename=test123 poolID=1 \ compress=1 \ dedup=0 \ read_cache=0 \ fast_clone=1 \ sync=0 \ record_size=4 \ type=1 \ worm_type=0 \ size=107374182400 參數說明： compress=1 ：啟用壓縮以節省存儲空間。 dedup=0 ：關閉重複數據刪除以降低系統負擔。 record_size=4 ：設定 4KB 記錄大小，適合資料庫應用。 fast_clone=1 ：啟用快速複製以提升數據處理效率。 size=107374182400: 100 Gb 步驟 2：啟用並設定 NFS 存取 共享資料夾建立完成後，接下來啟用 NFS 存取，並設定所有主機 ( * ) 皆具有讀寫權限： # 啟用 NFS 存取 qcli_sharedfolder -N sharename=test123 Access=Enabled qcli_sharedfolder -U sharename=test123 userrw=guest # 為所有主機設定 NFS 權限 qcli_sharedfolder -K sharename=test123 remove_HostIP="*" qcli_sharedfolder -T sharename=test123 HostIP="*...
張貼留言
閱讀完整內容

[解決方法] docker: permission denied

前言 當我們執行docker 指令時若出現以下錯誤訊息 docker: Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Post http://%2Fvar%2Frun%2Fdocker.sock/v1.26/containers/create: dial unix /var/run/docker.sock: connect: permission denied. See 'docker run --help'. 表示目前的使用者身分沒有權限去存取docker engine, 因為docker的服務基本上都是以root的身分在執行的, 所以在指令前加sudo就能成功執行指令 但每次實行docker指令(就連docker ps)都還要加sudo實在有點麻煩, 正確的解法是 我們可以把目前使用者加到docker群組裡面, 當docker service 起來時, 會以這個群組的成員來初始化相關服務 sudo groupadd docker sudo usermod -aG docker $USER 需要退出重新登錄後才會生效 Workaround 因為問題是出在權限不足, 如果以上方法都不管用的話, 可以手動修改權限來解決這個問題 sudo chmod 777 /var/run/docker.sock https://docs.docker.com/install/linux/linux-postinstall/
張貼留言
閱讀完整內容

[C#] Visual Studio, 如何在10分鐘內快速更改命名專案名稱

前言: 由於工作需要, 而且懶得再重寫類似的專案, 所以常常將之前寫的專案複製一份加料後, 再重新命名編譯 假設今天我有一個專案HolyUWP, 我想把它重新命名成 BestUWP 時該怎麼做? 以下是幾個簡單的的步驟 使用Visual Studio 2017 備份原來專案 更改Solution名稱 更改Assembly name, Default namespce 更改每支程式碼的Namespace 更改專案資料夾名稱 備份原來專案 由於怕改壞掉, 所以在改之前先備份 更改Solution名稱 更改sln的名稱, 這邊我改成BestUWP.sln 使用Visual Studio打開你的.sln, 右鍵點擊Solution後選擇Rename, 這邊我把它重新命名成BestUWP(跟檔案名稱一致) 必要的話可以順便修改Porject名稱 更改Assembly name, Default namespce 進入 Project > OOXX Properties    修改Assembly Name, Default namesapce 更改每支程式碼的Namespace 基本上隨便挑一支有用到預設Namesapce(HolyUWP)的程式碼來改就好了 重新命名後點擊Apply,  這個動作做完後所有用到舊Namespace的程式碼都會被改成新的 更改專案資料夾名稱 以上動作做完後, 基本上就可以把專案編譯出來測看看了~
2 則留言
閱讀完整內容