UWP入門教程1——UWP的前世今生

目錄

引言

裝置族群

UI 和通用輸入模式

• 通用控制元件和佈局皮膚
• 工具
• 自適應擴充套件
• 通用輸入處理

 

引言

在本篇文章中，可以掌握以下知識：

• 裝置族群，如何決定目標裝置
• 新的UI控制元件和新皮膚幫助你適應不同的裝置特徵

 

從Windows 8系統開始，微軟就 引入了WindowsRT(Windows Runtime),它是Windows App 模型的一箇中間階段。希望能夠成為通用應用體系架構。

Windows Phone 8.1釋出時，也相容WRT 。這樣有助開發者使用同一程式碼庫建立通用的Windows8 app。

將近三年之後，微軟的重頭產品Windows 10終於橫空出世。Windows 10 開始引入 UWP，更進一步的發展了Windows RunTime 模型，並將WRT 引入了Windows10 核心中。作為系統核心的一部分，UWP 現在提供建立通用的App平臺（即App在執行Windows10的所有裝置中都可以執行），當然微軟內部也做出了改進，UWP 不僅包含了WinRT API,也增加了適應特定裝置群的API。UWP 為開發跨裝置App提供了可靠的API 層。這就意味著你只需要開發一次，就可在多種裝置中執行。併發布到Windows Store，所有的使用者都可以下載試用。

無論裝置的形式和輸入模態的不同，UWP 都可以執行，也可以為特殊裝置定製。自適應UI控制元件和新的佈局Panel 有助於解決裝置螢幕尺寸的多樣性。

 

裝置族群

Windows8.1 和Windows Phone 8.1 App 還存在作業系統的差異，無論是Windows和Windows Phone。有了Windows 10就不需要將所有的開發精力都集中在作業系統，但需要解決一個或多裝置特徵。裝置族群可以識別API，系統特徵，以及使用者行為，也決定了可執行某一App的裝置集。

裝置族群是蒐集的帶有版本號和識別符號的API集合，裝置族群是OS的基礎，PC 機執行桌面作業系統，是根據桌面裝置族群決定的，智慧手機和平板電腦等會執行Mobile OS,是由移動裝置族群決定的，等等。

通用裝置族群相對而言比較特殊，它不是任何OS 的基礎，相反，通用裝置族群的API是所有族群的父節點，正因為有了通用裝置族群API才保證了每個OS 能夠正常呈現到每種裝置中。

每個子裝置族群在通用族群基礎上新增自有的API。使用裝置族群的優點在於開發一次，到處執行，無論使用者使用哪種裝置，手機，平板或PC。App可使用自適應程式碼實現動態獲取裝置特徵，適應裝置。

你的App需要使用哪種裝置族群，主要取決開發需求，並且決定影響最終App的呈現:

1. API 集，App執行時需要呼叫的API

2. API集呼叫

3. 適應的裝置集，即App能夠安裝的裝置型別。

選擇裝置族群主要由兩方面原因決定，API 介面型別，是否建立App時能夠無條件呼叫，以及App需要覆蓋的裝置範圍。

如何做決策：

• 最大化App 覆蓋量
• 為了實現App 覆蓋裝置的最大化，保證它能夠在儘可能多的裝置中執行，可把App目標定位通用裝置族群。這樣做的目的，App會就可以使用所有裝置族群，（從通用裝置族群派生的）
• 限制App 適應某一種裝置
• 限制App適應某一類裝置
• 排除只支援某一特殊版本的裝置族群

 

UI 和通用輸入

UWP  App能夠在具有不同特徵的裝置中執行。Windows10 提供新的通用控制元件，佈局皮膚和工具，來幫助開發自適應UI 。例如根據不同的螢幕解析度，相應的調節UI。

Windows 幫助你實現自適應UI：

1. 提供通用控制元件和佈局皮膚來根據螢幕解析度來最佳化UI

2. 常用輸入處理，可解決輸入模態多樣性的問題，無論透過觸控輸入，觸控筆，鍵盤，還是控制器，都能夠統一處理。

3.提供UI 設計輔助工具，能夠自適應不同的螢幕解析度。

4. 自適應擴充套件可調節解析度和DPI。

通用控制和佈局板

Windows 10 提供了一些新控制元件，比如日曆，拆分檢視，在此之前，只有Winodws Phone 提供Pivot 控制元件 ，現在，通用裝置族群也支援Pivot控制元件。而且控制元件也做了相應的調整，能夠適應大尺寸螢幕。

 

 

使用自適應Panels實現自適應介面

Layout Panel 指定子元素的尺寸和位置的值主要取決於螢幕尺寸，比如StackPanel 會指定子節點順序排放（垂直或水平）。Grid 與CSS 提供的Grid相似，每個介面元素都對應單元格。

新提供的RelativePanel 是一種佈局樣式，可以定義各介面元素之間的關係，當螢幕解析度發生變化時，介面元素會做出相應的調整來適應。RelativePanel能夠減少由於元素重新排列導致的一些效能問題。

如下，無論是橫向和縱向的，藍色按鈕始終在Texbox1的右邊，橙色按鈕會放在藍色按鈕下方。

 

<RelativePanel>
    <TextBox x:Name="textBox1" Text="textbox" Margin="5"/>
    <Button x:Name="blueButton" Margin="5" Background="LightBlue" Content="ButtonRight" RelativePanel.RightOf="textBox1"/>
    <Button x:Name="orangeButton" Margin="5" Background="Orange" Content="ButtonBelow" RelativePanel.RightOf="textBox1" RelativePanel.Below="blueButton"/>
</RelativePanel>