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/