阅读目录:
[list=1]
[*]概述
[*]DeviceFamily-Type文件夹
[*]DeviceFamily-Type扩展
[*]InitializeComponent重载
[*]结论
[/list]


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

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

[mw_shl_code=xml,false]<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>[/mw_shl_code]

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


DeviceFamily-Type文件夹
[hr]
大多数实现新布局的方法是在项目中指定一个新的文件夹，叫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扩展
[hr]
第二种方式你能通过创建新的XAML视图达到同样的效果，使用同样的名称，但是DeviceFamily-Type是扩展的。比如MainPage页面，它意思是添加一个新的XAML视图文件叫MainPage.DeviceFamily-Mobile.xaml，它放在和MainPage同样的文件夹。

***附件停止解析***


注意如果你同时使用方法1和方法2，会有一个编译错误：
[mw_shl_code=xml,false]Error Processing Resources failed with error: Duplicate Entry.。[/mw_shl_code]

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

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

[mw_shl_code=csharp,false]public void InitializeComponent(global::System.Uri resourceLocator) { if (_contentLoaded) return;

_contentLoaded = true;

if (resourceLocator <mark> 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);
}[/mw_shl_code]

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


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

[mw_shl_code=csharp,false]public MainPage()
{
if (AnalyticsInfo.VersionInfo.DeviceFamily </mark> "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();
}
}[/mw_shl_code]

让我们看下使用DeviceFamily指定视图的效果，首先是桌面的MainPage.xaml。
***附件停止解析***


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

然后模拟器会加载XAML视图：
***附件停止解析***

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


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

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

***链接停止解析***


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

***链接停止解析***

翻译：蘑菇先生 英文链接：***链接停止解析***

开发者交流群：53078485，期待你的加入！