UAP如何根據DeviceFamily顯示不一樣的頁面

背景

微軟推出UAP 推薦使用響應式的UI，可是不免遇到一些特殊狀況須要使用不一樣的Page來在不一樣的設備顯示。

 

微軟目前最新的VS2015在10074上安裝後可以支持這個功能特性，只是暫時沒有文檔介紹。

我拿到了Demo後整理了一下創建工程的使用這個特性方法：

 

使用方法

1 首先創建一個UAP工程。

 

2 在工程中添加本身的Page 好比 這裏在子文件夾Modules/Home 下面創建了一個主頁Index.xaml，Tilte爲"Universal Page"

 

3 添加DeviceFamily-Desktop 和DeviceFamily-Mobile 2個子目錄，這2個目錄的名字必須固定

4 將Index.xaml拷貝到DeviceFamily-Desktop 和DeviceFamily-Mobile，刪除這2個目錄下的Index.xmal.cs 文件。

 

5 修改Desktop下的Tilte 改爲 "Desktop Page"

顯示效果以下：

 

總結

1. 使用方法爲 在Page.xaml的同級目錄添加DeviceFamily-Desktop 和DeviceFamily-Mobile 2個子目錄。
2. 複製Page.xaml到這2個目錄，使Page.xaml.cs 都對於了3個Page.xaml, 系統運行時會經過deviceFamily自動選擇對於的Page.xmal，在沒有對應的deviceFamily時候會選擇原來的Page.xaml.
3. 由於多個Page.xaml 的存在，須要讓出現Control的Name 保持一致，這樣codebehine使用的時候才能正常工做，若是不一致會出現codebehine使用Name的時候出現null的狀況，須要作檢查。

4． 對全部Xmal文件都有效，對其餘文件包括cs文件都無效

 

編譯狀況

3種xmal會編譯成 3種UI和一個codebehind的對象，根據平臺來進行使用。