文章出處

目錄

引言

設備族群

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,所有的用戶都可以下載試用。

Windows universal apps run on a variety of devices, support adaptive user interface, natural user input, one store, one dev center, and cloud services

無論設備的形式和輸入模態的不同,UWP 都可以運行,也可以為特殊設備定制。自適應UI控件和新的布局Panel 有助于解決設備屏幕尺寸的多樣性。

 

設備族群

Windows8.1 和Windows Phone 8.1 App 還存在操作系統的差異,無論是Windows和Windows Phone。有了Windows 10就不需要將所有的開發精力都集中在操作系統,但需要解決一個或多設備特征。設備族群可以識別API,系統特征,以及用戶行為,也決定了可運行某一App的設備集。

Device families

設備族群是搜集的帶有版本號和標識符的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控件。而且控件也做了相應的調整,能夠適應大尺寸屏幕。

 

 

Desktop communication app UIPhone communication app UI

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

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

新提供的RelativePanel 是一種布局樣式,可以定義各界面元素之間的關系,當屏幕分辨率發生變化時,界面元素會做出相應的調整來適應。RelativePanel能夠減少由于元素重新排列導致的一些性能問題。

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

 

Relativepanel example

XAML

<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>

在學習完本文之后,我們對UWP平臺已經有了基本理解。在進行UWP平臺的開發時,還可以借助一些開發工具。ComponentOne Studio for UWP是一套可以編寫所有 UWP 平臺應用的控件集,包括表格、報表、圖表、儀表盤、組織圖、地圖、PDF、Excel、Word、日程安排、輸入、導航等多個控件,有效的幫助開發過程。

 

相關閱讀:

微軟 Build 2017 開發者大會:Azure 與 AI 的快速發展

是什么讓C#成為最值得學習的編程語言

從Visual Studio看微軟20年技術變遷

C#開發人員應該知道的13件事情

Visual Studio 2017正式版發布全紀錄

 


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()