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 <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);
}

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

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

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();
    }
}

让咱们看下使用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/