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/