【翻译】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之类的能否共享就看实际的需求和程序的设计了

各位还可以在第三种方法上继续发挥想象力。

以上就是三种运行时动态加载页面的方法。

谢谢啦！