微軟在今年三月揭示了未來的 Universal Apps，將能在各種不同裝置上執行的願景。這些裝置包含了 PC, Mobile, IoT 裝置, Xbox, Surface Hub, 甚至 HoloLens。

那麼，要如何讓同一隻 Universal App 在這些不同的裝置上執行呢? Extension SDK 即是解答之一。

以往的作法是什麼?

我們先檢視一下在 Windows 8/8.1 上，欲同時開發 Windows Store App 及 Windows Phone App 的方法。我們可以將共享的程式碼 (如 Business Logic, Data Model, etc.) 實作於 Shared Projects 中，開發者只需額外處理如螢幕大小等 User Experience 上的不同。

但是，編譯之後將會產出兩份針對不同裝置的 Binary or Package，必需分別上傳至不同的 Store 作審核、也必需在不同的 Dev Center 之中作管理:

另一個開發者會面對到的問題是，當有些 API 只適用於某些裝置時，要如何處理呢? 例如 ：Windows Phone 手機上的實體 Back 鍵、Xbox One 的遙控器、HoloLens 的互動控制等，都不會出現在 Windows 平板上:

常見的處理方式即是 Compilation directives，透過 #if 語法，讓開發工具在編譯 (compile) 期間即決定某功能是否會被引入:

小結以上：

• 現有作法會根據不同的裝置，編譯成數個不同的 Binary，也增加了應用程式管理及維護上的負擔；
• 同時，#if 的作法是在編譯 (compile) 階段即需決定是否引入某些裝置上的功能，亦即無法在執行 (runtime) 階段動態決定。

簡介 Extension SDK：

Windows 10 的 Extension SDK 即是要達成同一個應用程式 (Binary) 能執行在不同裝置上的解決方案：

1. 它是既有 UAP (Universal Applications Platform) 的延伸、
2. 針對不同的裝置，即會有不同的 Extension SDK、
3. 正因為如此，個別的 Extension 即能各自更新其版本

如下圖。不同的裝置上都跑著 Windows Core，提供諸如 File I/O, Drivers 等基礎服務；UAP 則提供了一些通用型的控制項，也就是一群 API 的集合，作為通用型應用程式開發的基礎:

而在特定裝置上才提供的 APIs，則以 Extension SDK 的方式來實作，表現在圖中的話，即是以延伸的方式由 UAP 的通用型 APIs 再向外擴展:

實作 Extension SDK：

1. 透過 Project > Add Reference > Universal App Platform > Extensions ，即可新增您所需要的 Extension 至專案之中。各位可注意到其後有版本別，亦即可各自分別更新並被引入:

2. 接下來，即可於程式中使用 Windows.Foundation.Metadata.ApiInformation 這個 Class，在執行 (runtime) 期間判斷某 API 是否存在:

若您只想實作一小部份的 APIs，可以考慮直接使用 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 這個 class，若支援，則必定亦包含 CameraPressed 這個事件，我們即可放心的使用它。

當然，除了 IsTypePresent，我們也可使用 IsEventPresent, IsMethodPresent, IsPropertyPresent 測試個別的事件、方法、參數等是否存在:

bool isHardwareButtons_CameraPressedAPIPresent =

    Windows.Foundation.Metadata.ApiInformation.IsEventPresent

        ("Windows.Phone.UI.Input.HardwareButtons", "CameraPressed");

小結：

• Extension SDK 成為 Windows 10 UAP 的開發架構中，達成同時支援多種不同裝置的一步活棋。由於是以延伸方式向外作擴增，其保有隨著各裝置的進化而各自演進版本的彈性。
• 對於開發者而言，能夠簡單的在執行階段 (runtime) 判斷特定裝置上的 API 是否存在，方便達到讓同一隻應用程式執行在不同裝置上的目標。
• 最後，由於可以僅產出一份 Binary，即能達到 One Store + One Dev Center 的目標，減少開發者的後續維護及管理成本。

另請注意，Extension SDK 的目的並非取代 #if 的功能，Compilation directives 的方式仍然是可行的!

註：

若要嘗試這些新功能:

1. 請加入 Windows Insider Program，取得並安裝 Windows 10 Developer Preview.
2. 取得並安裝 Visual Studio 2015 CTP. (目前版本為 CTP6)
3. 新專案中即會出現 Windows 10 Universal App 的範本。

同時：

1. 若您在測試過程中遇到問題:

• 請先檢視 release notes 以及 known issues with Visual Studio 2015 CTP6，查看是否為已知問題。
• 使用 Windows Store 及 Windows Phone Apps 論壇詢問。
• 若您發現的確是個 bug，可透過 Windows 10 內建的 Feedback App 來回報協助。

2. 若您對 API 有任何新功能的需求，則可透過 Windows platform developer UserVoice site 來建議，這網站會在 BUILD 2015 前持續更新，反應最新的 API 功能。

延伸閱讀：

1. Developer’s Guide to Windows 10 Preview: (04) Extension SDKs (英文教學影片)https://channel9.msdn.com/Series/Developers-Guide-to-Windows-10-Preview/04 

2. Guide to Windows universal apps: https://msdn.microsoft.com/en-us/library/dn894631.aspx 

Windows 10 推出之後將支援許多種的輸入 (input) 方式，包括 Windows Hello 透過臉部特徵或虹膜取代密碼輸入、HoloLens 利用全息虛擬實境技術與人作 3D 互動等等。

本文則將介紹 Windows 10 加強後的筆跡 (Pen & Ink) 技術。 對開發者而言，多了 InkCanvas 控制項與基礎 DirectInk 類別，可以使用您已熟悉的程式語言如: C++、C# 或 Visual Basic 等，在 Windows 10 Apps 中實現更強大的筆跡功能。

比如：

叫出地圖後，用筆(或手指)畫上路線圖：

在連線遊戲中，即時紀錄如「狙擊手在右邊建築物屋頂」的筆跡訊息:

用原始筆跡回信：

或是先轉成文字…

Windows 10 在 Pen & Ink 的擴充性

要作到以上應用， Windows 10 提供的 InkCanvas 控制項定義了一個用於繪圖以及轉譯筆跡筆觸的重疊區域。此控制項的功能 (輸入、處理和轉譯) 則來自 InkPresenter、InkStroke、InkRecognizer 與 InkSynchronizer 等類別。

(目前使用 JavaScript 的 Windows 應用程式不支援這些類別)

也就是說，無論使用者是以「觸控筆」或是「手指」作輸入所得到的 “Ink” 物件，都能以原始筆跡、加上述解或描述 (metadata)、亦或轉譯成文字或圖檔等方式，作進一步創意的實踐。

開始實作吧!

假設我想在一個影像 (image) 上面疊一個筆跡畫布，在 XAML 描述中只要多加一個 InkCanvas 即可，非常直覺簡單:

<ScrollViewer>

    <Grid>

        <Image Source="Assets/signature.jpg" />

        <InkCanvas x:Name="myInkCanvas" />

    </Grid>

</ScrollViewer>

執行畫面如以下，各位可注意其中細微的筆觸差異，這些都會被紀錄在 Ink 物件中；同時寫字速度等資訊也會被紀錄下來，可作為進一步 (如筆跡辨認) 的應用。

想更進一步了解 Windows 10 在筆跡功能上的應用，請參考以下 10 分鐘的影片: (Developer’s Guide to Windows 10 Preview: (07) Pen & Ink)

https://channel9.msdn.com/Series/Developers-Guide-to-Windows-10-Preview/07/player

註：

若要嘗試這些新功能:

1. 請加入 Windows Insider Program，取得並安裝 Windows 10 Developer Preview.
2. 取得並安裝 Visual Studio 2015 CTP. (目前版本為 CTP6)
3. 新專案中即會出現 Windows 10 Universal App 的範本。

同時：

1. 若您在測試過程中遇到問題:

1. 請先檢視 release notes 以及 known issues with Visual Studio 2015 CTP6，查看是否為已知問題。
2. 使用 Windows Store 及 Windows Phone Apps 論壇詢問。
3. 若您發現的確是個 bug，可透過 Windows 10 內建的 Feedback App 來回報協助。

2. 若您對 API 有任何新功能的需求，則可透過 Windows platform developer UserVoice site 來建議，這網站會在 BUILD 2015 前持續更新，反應最新的 API 功能。

本文將介紹 2 種全新的 XAML 作法， 來達到 Windows 10 的 UAP 中 “Adaptive User Interface” 的要求。讓我們的 App 在任何螢幕大小的環境之下，都能適切的調整元件的相對位置、或是動態改變元件的呈現方式。

1. RelativePanel：可決定控制項之間的相對位置

<RelativePanel>

  <TextBox x:Name="textBox" Text="我是一段文字我是一段文字我是一段文字" />

  <Button x:Name="yellowBtn" Background="Yellow" Content="黃色按鈕" RelativePanel.RightOf="textBox" />

  <Button x:Name="blueBtn" Background="Blue" Content="藍色按鈕" RelativePanel.RightOf="textBox" RelativePanel.Below="yellowBtn" />

</RelativePanel>

「”yellowBtn” 將位於 “textBox” 的右邊；而 “blueBtn” 不但位於 “textBox” 的右邊，也會位於 “yellowBtn” 的下方。」

2. VisualStateManager：可根據螢幕的大小動態改變控制項的呈現方式

<TextBlock x:Name="text" Foreground="Azure" HorizontalAlignment="Center" VerticalAlignment="Center"/> 

<VisualStateManager.VisualStateGroups>

 <VisualStateGroup x:Name="SizeStateGroup">

     <VisualState x:Name="Min">

         <VisualState.StateTriggers>

           <AdaptiveTrigger MinWindowWidth="0" />

         </VisualState.StateTriggers>

         <VisualState.Setters>

           <Setter Target="text.Text" Value="喔喔好窄!!!!!" />

         </VisualState.Setters>

     </VisualState>

     <VisualState x:Name="Middle">

         <VisualState.StateTriggers>

           <AdaptiveTrigger MinWindowWidth="651" />

         </VisualState.StateTriggers>

         <VisualState.Setters>

           <Setter Target="text.Text" Value="寬多了啊!!!!!" />

         </VisualState.Setters>

     </VisualState>

     <VisualState x:Name="Wide">

         <VisualState.StateTriggers>

           <AdaptiveTrigger MinWindowWidth="1000" />

         </VisualState.StateTriggers>

         <VisualState.Setters>

           <Setter Target="text.Text" Value="可…以…躺…下…了!!!!!" />

         </VisualState.Setters>

     </VisualState>

 </VisualStateGroup>

</VisualStateManager.VisualStateGroups>

觀察以上的 XAML，我們只要注意兩點：

• StateTriggers: 是用來定義一個條件臨界值，當螢幕大小滿足條件時，就會作以下 Setter 所描述的變動。
• Setter: 可在此改變元件的 attributes，如改為 Horizontal、改變 width 等等；可以同時設定多個 Setters。

以白話文說明以上 XAML 描述:

「若 App 寬度至少為 0 pixel 的話，改變文字為 “喔喔好窄!!!!!”；若寬度至少為 651 的話，改為 “寬多了啊!!!!!”，若寬度至少為 1000 的話，改為”可…以…躺…下…了!!!!!”。」

以下是結果，請觀察寬度及文字的關係：

將以上的 RelativePanel 及 VisualStateManager 綜合使用，就可以作到微軟資深技術主管 Kevin Gallo 在 Mobile World Congress 2015 上的 Demo 效果 (約第 30:00 開始約 3 分鐘):

註：

若要嘗試這些新功能:

1. 請加入 Windows Insider Program，取得並安裝 Windows 10 Developer Preview.
2. 取得並安裝 Visual Studio 2015 CTP. (目前版本為 CTP6)
3. 新專案中即會出現 Windows 10 Universal App 的範本。

同時：

1. 若您在測試過程中遇到問題:

1. 請先檢視 release notes 以及 known issues with Visual Studio 2015 CTP6，查看是否為已知問題。
2. 使用 Windows Store 及 Windows Phone Apps 論壇詢問。
3. 若您發現的確是個 bug，可透過 Windows 10 內建的 Feedback App 來回報協助。

2. 若您對 API 有任何新功能的需求，則可透過 Windows platform developer UserVoice site 來建議，這網站會在 BUILD 2015 前持續更新，反應最新的 API 功能。

延伸閱讀：

Guide to Windows universal apps: https://msdn.microsoft.com/library/windows/apps/xaml/dn894631.aspx