UWP 新手教程2——怎樣實現自適應用戶界面
系列文章
UWP新手教程1——UWP的前世今生
如上文所說的，布局面板依據可用的屏幕空間。指定界面元素的大小和位置。
比如StackPanel 會水平或垂直排列界面元素。Grid 布局與CSS 中的表格控件相似。可將各元素按單元排列。
新提供的 RelativePanel 即相對布局。各個元素之間存在相對關系，可用來創建自適應界面。當用戶設備發生變化時，用戶界面也會又一次排列又一次組織，而有了RelativePanel就省去了界面元素又一次排列。
如圖所看到的，不管用戶使用哪種設備。藍色button始終放在文本框右側，並排放在黃色button頂部。
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>
使用可視化狀態觸發器創建自適應UI
UWP 提供自適應可視化狀態，可依據窗體大小來調整狀態值。StateTriggers定義了一個閾值，達到閾值則觸發可視化狀態。下面演示樣例了。當窗體大於720像素。wideView 狀態則被觸發，遊戲面板又一次排列，如圖所看到的：
當窗體小於720px。則narrowView視態被觸發，由於wideView 觸發器無法滿足條件，NarrowView 狀態則將Best-rated games 置於最底端。而且向左對齊，效果圖例如以下：
XAML 代碼例如以下：
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="wideView"><VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" /></VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="best.(RelativePanel.RightOf)" Value="free"/>
<Setter Target="best.(RelativePanel.AlignTopWidth)" Value="free"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="narrowView"><VisualState.Setters>
<Setter Target="best.(RelativePanel.Below)" Value="paid"/>
<Setter Target="best.(RelativePanel.AlignLeftWithPanel)" Value="true"/>
</VisualState.Setters>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" /></VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
...
</Grid>
創建UWP可使用的工具
創建App時。一般會明白目標設備，當須要在設備中預覽App,能夠使用VS中的Preview toolbar（預覽工具箱）查看App,能夠模擬不同的設備。如PC。TV，智能手機等。
自適應擴展
Windows 10 引入“縮放模型”的升級版，除了縮放矢量圖之外。有一個統一的縮放因子集合，能夠保證UI元素在不同的屏幕尺寸和分辨率下。界面元素大小的一致性。縮放因子能夠兼容多種操作系統如iOS，Android等，資源科跨多平臺共享。
通用輸入處理
可使用通用控件創建通用Windows App來管理控制不同的輸入模式，如鼠標，鍵盤。觸摸筆，控制器等。
本文列舉了下面API 來訪問輸入：
CoreIndependentInputSource：是新添加的API。可將源輸入，遷移到主線程或後臺線程。
PointerPoint：統一了觸摸，鼠標，筆數據。具有一致的接口和事件。
PointerDevice：是設備API，可支持查詢設備支持的輸入能力。
新的 InkCanvas XAML 控件和InkPresenter API 可訪問Stroke 數據
編寫代碼
VS中開發Windows10 項目支持多種開發語言。如C++，C#，VB以及JavaScript。也能夠使用XAML，開發原生UI 用戶體驗。
調用API來實現目標設備族群
不管須要調用哪種API。你須要了解API適應的設備族群，是否滿足您App開發的須要。例如以下面代碼所看到的，設備族群是Universal：
Windows.UI.Core.SystemNavigationManager.GetForCurrentView().BackRequested += TestView_BackRequested;
當然也能夠調用API ，在App中不實現。
這樣的情況通常指當你的目標設備族群未在文檔中標明，你能夠調用此api,改動一些代碼就可以。
使用ApiInformation 類編寫自適應代碼
編寫自適應代碼僅僅須要兩步，一。確定須要調用的API。二，使用Windows.Foundation.Metadata.ApiInformation 類來測試API 。
可用於評估App是否執行良好。
假設想同一時候調用非常多API，能夠使用ApiInformation.IsTypePresent 方法，例如以下：
// Note: Cache the value instead of querying it more than once. bool isHardwareButtonsAPIPresent = Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"); if (isHardwareButtonsAPIPresent) {Windows.Phone.UI.Input.HardwareButtons.CameraPressed +=
HardwareButtons_CameraPressed;
}
上述演示樣例中HardwareButtons類實現了CameraPressed事件。由於該類成員有同樣的信息需求。
用戶體驗
通用Windows App 可利用全部設備特征來呈現App.App可充分利用桌面設備的處理能力，平板電腦的自然交互方式，以及智能手機的便捷性和移動性等。
良好的設計從確定用戶交互方式開始，同一時候滿足App的功能性和外觀。
用戶體驗非常重要直接影響了用戶是否喜歡你的App,使用過程中是否愉悅或始終保持積極的情緒。而不受阻礙。
設計通用App更加須要註意影響用戶體驗的不同設備因素。
除了設備的交互方式不同，還須要利用跨平臺的長處，如：
- 使用雲計算來訪問不同設備資源
- 考慮如何支持從一種設備遷移到還有一種設備之上，並保持一致性。
- 使用導航設計指南來設計工作流程，使得App可兼容移動設備，較小的屏幕或較大的屏幕設備。
- 考慮特殊情況，較小的移動設備屏幕失效，也可能有一些功能區在固定式臺式機上不起作用，而需在移動設備上才幹執行。
- 考慮如何兼容多種輸入形式
通過Dashboard提交通用 Windows 應用
利用新的通用的 Windows 開發者中心儀表板。能夠在同一位置管理和提交全部面向 Windows 設備的應用。新功能簡化了流程。並具有很多其它的控制權限。
在進行UWP開發時，還能夠借助一些開發工具，有效提高開發效率。
ComponentOne Studio for UWP 是一套能夠編寫全部 UWP 平臺應用的控件集，包含表格、報表、圖表、儀表盤、組織圖、地圖、PDF、Excel、Word、日程安排、輸入、導航等多個控件，有效的幫助開發過程。
UWP 新手教程2——怎樣實現自適應用戶界面