UWP 入門教程2——如何實現自適應用戶界面

系列文章

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

 

如上文所說的，佈局面板根據可用的屏幕空間，指定界面元素的大小和位置。例如StackPanel 會水平或垂直排列界面元素。Grid 佈局與CSS 中的表格控件相似，可將各元素按單元排列。

新提供的 RelativePanel 即相對佈局，各個元素之間存在相對關係，可用來建立自適應界面。當用戶設備發生變化時，用戶界面也會從新排列從新組織，而有了RelativePanel就省去了界面元素從新排列。

如圖所示，不管用戶使用哪一種設備，藍色按鈕始終放在文本框右側，並排放在黃色按鈕頂部。

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、日程安排、輸入、導航等多個控件，有效的幫助開發過程。

 

相關閱讀：

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

是什麼讓C＃成爲最值得學習的編程語言

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

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

Visual Studio 2017正式版發佈全紀錄