【翻译】Windows 10 中为不同设备加载不同页面的3种方法
在以前，为PC和手机做App是两个工程，PC和手机各一个。在Windows 10中会发现只有一个了，对于简单的页面变化可以使用VisualState来解决，但是比如网易云音乐这种PC版和手机版差异巨大使用VisualState也许就力不从心了。如何解决因为UI差异过大所导致的问题？
有两个解决方案
1.分别为PC和手机创建单独的安装包
2.在运行时动态加载
UWP版本淘宝选择了第一种方式，其实这样的方式和Win8.1下的通用App是一样的，应该叫做UAP。建议根据实际情况选择对应的解决方案
下面我们就来看一下如何实 现运行时动态加载 页面。 原文
第一种：DeviceFamily-Type folder
首先创建一个空白的工程，在MainPage中添加一下代码
<TextBlock Foreground="Red" Text="This is desktop." FontSize="72" VerticalAlignment="Center" HorizontalAlignment="Center"/>
然后在工程中添加DeviceFamily-Mobile文件夹，并向其中添加一个名称为MainPage的View
然后添加一下代码：
<TextBlock Text="Hello Windows Phone" HorizontalAlignment="Center" Foreground="Red" VerticalAlignment="Center" />
运行效果如下：
需要注意的是：DeviceFamily-Type文件夹必须与Page页面在同一层
第二种：.DeviceFamily-Type in file name
第二种其实很简单就是把刚才的文件夹换成了文件
注意：不能同时使用1,2两种方法
第三种：重载InitializeComponent方法
前两种其实都是一种合约，但是第三种非常强大，可以编写自己的逻辑。
首先我们在解决方案资源管理器中将MainPage展开，会发现MainPage类中有两个InitializeComponent方法
点击任意一个InitializeComponent方法
会打开MainPage.g.i.cs这个文件，这个其实是一个XAML设计器生成的文件， 用于代码提示。
从图中可以发现，在构造函数中调用的是第一种重载， <(￣︶￣)>，也就是说我们可以手动调用第二个不就完嘛！
下面给出一段代码：
/// <summary> /// An empty page that can be used on its own or navigated to within a Frame. /// </summary> public sealed partial class MainPage : Page { private bool _isMobile = Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"); public MainPage() { if (!_isMobile) this.InitializeComponent(); else this.InitializeComponent(new Uri("ms-appx:///PrimaryMainPage.xaml", UriKind.Absolute)); } } 需要注意的是：请保持MainPage前台页面是空的，否则当前台出现带有x:Name的控件时，XAML设计器生成的代码就会变成了下面这一种。
会发现InitializeComponent(System.Uri resourceLocator)这一种重载没有了！！！，这是XAML设计器的生成规则，所以请保持MainPage页面前台也就是跳转页面前台是干净的，否则很有可能无法通过编译，而且本来MainPage在这种情况下就是没有用的，只不过是为了做一个跳转而已，所以此时只需要为手机，PC或者是Table分辨创建页面然后在运行时判断加载哪一个。至于ViewModel之类的能否共享就看实际的需求和程序的设计了
各位还可以在第三种方法上继续发挥想象力。
以上就是三种运行时动态加载页面的方法。
谢谢啦！
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
