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的对象，根据平台来进行使用。