背景

微软推出UAP 推荐使用响应式的UI,但是难免遇到一些特殊情况需要使用不同的Page来在不同的设备显示。

 

微软目前最新的VS2015在10074上安装后能够支持这个功能特性,只是暂时没有文档介绍。

我拿到了Demo后整理了一下建立工程的使用这个特性方法:

 

使用方法

1 首先建立一个UAP工程。

UAP如何根据DeviceFamily显示不同的页面

 

2 在工程中添加自己的Page 比如 这里在子文件夹Modules/Home 下面建立了一个主页Index.xaml,Tilte为"Universal Page"

UAP如何根据DeviceFamily显示不同的页面

 

3 添加DeviceFamily-DesktopDeviceFamily-Mobile 2个子目录,这2个目录的名字必须固定

4 将Index.xaml拷贝到DeviceFamily-DesktopDeviceFamily-Mobile,删除这2个目录下的Index.xmal.cs 文件。

UAP如何根据DeviceFamily显示不同的页面

 

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

UAP如何根据DeviceFamily显示不同的页面

显示效果如下:

UAP如何根据DeviceFamily显示不同的页面

 

总结

  1. 使用方法为 在Page.xaml的同级目录添加DeviceFamily-DesktopDeviceFamily-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的对象,根据平台来进行使用。

UAP如何根据DeviceFamily显示不同的页面

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-02-06
  • 2022-12-23
  • 2021-09-27
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-10-19
  • 2021-06-03
  • 2022-01-24
  • 2021-12-22
  • 2021-12-03
  • 2021-07-05
  • 2022-12-23
相关资源
相似解决方案