Windows10-UWP中设备序列显示不同XAML的三种方式[3]

阅读目录:

1. 概述
2. DeviceFamily-Type文件夹
3. DeviceFamily-Type扩展
4. InitializeComponent重载
5. 结论

概述

Windows10-UWP(Universal Windows Platform)增加一个新特性设备序列(DeviceFamily)特定视图，它允许开发者为指定的设备序列定义指定的XAML显示，(Desktop、Mobile、tablet、Iot等)。 如果你想为不同的设备序列显示较多不一样的UI时，它是非常有用的。当然，使用RelativePanel、VisualStateTriggers也是非常好用的。但倘若你的UI有非常多的不一样时，XAML代码会变的非常臃肿。 这时就可以单独使用一个完整的XAML页面，然后和其他XAML页面共享后台逻辑代码。

有三种方式可以为设备序列设置特定的XAML视图。 下面用一个简单的MainPage页面去描述，使用蓝色背景和一些文字，这时想要用不同的背景和不同的文本，为移动设备序列设置指定的XAML视图。

<Page x:Class="DeviceFamily.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:DeviceFamily" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

<Grid Background="Blue">
    <TextBlock Foreground="White" Text="This is desktop." FontSize="72"
               VerticalAlignment="Center" HorizontalAlignment="Center" />
Grid>
 

假设有一个非常复杂的布局，我们想为移动设备序列做一个新的布局。:)

DeviceFamily-Type文件夹

大多数实现新布局的方法是在项目中指定一个新的文件夹，叫DeviceFamily-Type，其Type表示设备序列类型的名称，如DeviceFamily-Mobile，或替换成Team、Desktop、IoT。 在上诉例子中，应该创建一个叫DeviceFamily-Mobile的文件夹。

下一步是添加一个XAML视图叫同样的名字(和例子一样MainPage.xaml)。

这个文件不能有后端代码，它和desktop共用MainPage.xaml.cs后端代码。

因此如果你在移动设备上运行这个app(这里用模拟器)， 它会从DeviceFamily-Mobile/MainPage.xaml加载要使用的界面。

这种定义一个新的视图是最多使用的。其他的博客也有很多介绍，比如这篇，创建在uwp中创建一个DeviceFamily指定布局(Creating DeviceFamily specific layouts in a Universal App.)。

DeviceFamily-Type扩展

第二种方式你能通过创建新的XAML视图达到同样的效果，使用同样的名称，但是DeviceFamily-Type是扩展的。比如MainPage页面，它意思是添加一个新的XAML视图文件叫MainPage.DeviceFamily-Mobile.xaml，它放在和MainPage同样的文件夹。

注意如果你同时使用方法1和方法2，会有一个编译错误：

Error Processing Resources failed with error: Duplicate Entry.。

 如上，MainPage会根据你的设备序列，加载2个XAML文件中的其中一个。

InitializeComponent重载

有趣的是，在你添加一个指定视图到DeviceFamily-Type文件夹并编译时，编译器会生成一个新的InitializeComponent重载，在MainPage.g.i.cs里。

public void InitializeComponent(global::System.Uri resourceLocator) { if (_contentLoaded) return;

_contentLoaded = true;

if (resourceLocator  null)
{
    resourceLocator = new global::System.Uri("ms-appx:///MainPage.xaml");
}
global::Windows.UI.Xaml.Application.LoadComponent(this, resourceLocator, global::Windows.UI.Xaml.Controls.Primitives.ComponentResourceLocation.Application);
}

这个方法带了一个URL参数，因此你能明确指定想要的XAML视图。如果你没有指定任何页面，它会使用默认的那个页面。比如说你有一个主要的和次要的MainPage视图:

你可以在页面构造函数中使用任何逻辑，去决定你要使用哪一个页面布局。

public MainPage() 
{
    if (AnalyticsInfo.VersionInfo.DeviceFamily  "Windows.Mobile")
    {
        if (usePrimary)
        {
            InitializeComponent(new Uri("ms-appx:///PrimaryMainPage.xaml", UriKind.Absolute));
        }
        else
        {
            InitializeComponent(new Uri("ms-appx:///SecondaryMainPage.xaml", UriKind.Absolute));
        }
    }
    else
    {
        InitializeComponent();
    }
}

让我们看下使用DeviceFamily指定视图的效果，首先是桌面的MainPage.xaml。

如果使用简单的方式1和方式2，为移动设备序列任意选择一个MainPage.xaml进行交互(用简单的不同背景和文字来区分)

然后模拟器会加载XAML视图：

如果使用方式3，添加不动的主要/次要移动视图，那么结果(依赖你InitializeComponent中使用哪一个视图)如下:

补充 - 单页面内状态触发器

这篇文章是关于创建多页面XAML视图。 如果你想在单页面XAML视图中根据DeviceFamily修改一些显示，状态触发器仍然是非常有用的。 使用状态触发器是非常简单的，你可以自己写触发器，也可使用已经存在的WindowsStateTriggers类库。

WindowsStateTriggers DeviceFamily sample

结论

DeviceFamily XAML视图特性是为不同设备序列创建不同页面，非常赞的一种方式。它为我们避免了在一个大XAML页面内，去定义区分这些设备类型的麻烦，方便我们为各种各样的设备序列设计APP。另外一个比较赞的事情是有多种方式去处理不同的UI，甚至可以手动去重载InitializeComponent去实现。

完整代码在GitHub

译自：http://igrali.com/2015/08/02/three-ways-to-set-specific-devicefamily-xaml-views-in-uwp/