微軟在下一版本的作業系統Windows 8引入了一個新的Metro樣式的介面。這種介面布局不但簡潔，而且加上不少生動的動畫與個人化設定，讓使用者與電腦之間的互動更為容易且直接流暢。新的「開始」畫面，使用者只需要點擊、滑動，就能簡單的使用應用程式，並在全螢幕的瀏覽下，使用者可以完全專注於畫面上所喜愛內容。

微軟也為了Metro樣式提供了新的開發架構Windows Runtime(WinRT)，為不同語言的開發者，提供了一個整合統一的API，讓開發者不用再學習新語言，如：JavaScript、C++、C# 或 VB.NET，可以輕鬆在許多不同的平台建立一個應用程式，例如：桌上電腦、平板電腦或手持裝置。你可以從微軟的網站下載安裝Windows Customer Preview與Visual Studio 11 Beta，來開始建置你的Metro樣式應用程式，詳細下載與安裝方式請參考微軟網站 http://msdn.microsoft.com/zh-tw/windows/apps。

什麼是Metro樣式應用程式

Metro樣式應用程式(Metro Style Apps)，是採用無邊框的設計，以簡潔乾淨的配置顯示於整個螢幕的應用程式，並加入了新的觸控體驗，不論是使用手指觸控，或是舊有的鍵盤滑鼠的操控方式，都能更專注應用程式內容而不是操作系統的介面，迅速而自然地想做的事情。

只需要連結Windows Live帳號，應用程式就可以同步在許多不同的平台上(x86、x64或arm)使用，依照使用者設備的系統選項，應用程式可以自動地貼齊並縮放其內容，也支援橫向、直向、貼齊及填滿檢視，讓內容更一目了然。

參考圖一的畫面，顯示了Windows Customer Preview中所提供的天氣(Weather)應用程式，這個應用程式畫面顯示於整個螢幕，並且使用了不少動畫與圖像，讓使用者感覺起來十分的靈活生動，例如：若現在天氣是陰天，它會以動畫的方式將一片雲呈現到你的畫面裡；若現在是下雨天，它會在畫面下起雨來並且滴在你的桌面上。



Metro樣式應用程式的布局使用起來不但快速且流暢，使用者可以根據所用的設備自己調整空間，再加上精心設計的動畫絕對可以提供最佳的觸控體驗！

Metro樣式應用程式的元件

在開始建置你的Metro樣式應用程式前，讓我們先來了解Metro樣式應用程式所新加入的元件。

一、Charms (快捷鍵)：

只要在開始畫面右側邊緣向左滑動的時候，螢幕右側會出現由搜尋(Search)、共用(Share)、開始(Start)、裝置(Devices)與設定(Settings)五個圖示組成的選單，這就是在Windows 8中被命名為"Charm"的快捷鍵。例如：共用快捷鍵(Share Charm)可讓使用者將某個應用程式的資料提供給另一個應用程式共用，請參閱圖二右側。



二、搜尋合約 (Search Contract)：

搜尋合約可讓使用者從Windows中的任何位置搜尋應用程式的內容。應用程式提供搜尋建議來幫助使用者更快速的尋找內容，並在應用程式本身的UI內顯示結果。

三、共用合約 (Share Contract)：

共用合約可讓使用者將某個應用程式的資料提供給另一個應用程式共用。來源應用程式提供要共用的內容，而目標應用程式則接收共用的內容，雙方會使用一組相同的資料格式。

四、檔案選擇器合約 (File Picker Contract)：

檔案選擇器合約可讓使用者從一個應用程式存取檔案系統若線上服務的檔案，甚至是另一個應用程式的內容。叫用檔案選擇器後，使用者可以從本機存放區或者支援檔案選擇器合約的另一個應用程式瀏覽和選取檔案。

五、動態磚 (Tiles) ：

動態磚就像是應用程式的門面，只要在開始畫面單擊動態磚便可以進入應用程式。跟傳統圖示比起來，動態磚上的即時性的文字或圖像資訊顯得更引人注目，你可以不斷地透過應用程式磚更新動態、相關以及個人化的內容來吸引使用者開啟你的應用程式。如圖2的畫面，顯示Windows Customer Preview開始畫面中的動態磚列表。

六、通知 (Notification) ：

通知讓你的Metro樣式應用程式向使用者短暫顯示時效性訊息，如果遺漏的通知很重要，請在應用程式磚上顯示通知。鬧鐘(Alarm)應用程式就是一個很好的通知範例，當鬧鈴時間到的時候，將會顯示快顯通知來通知使用者。

七、雲 (Cloud) ：

每一個應用程式都可以取得用戶雲端的服務的狀態、設定與一小部分的使用者資訊。若使用者使用Windows Live ID來登入Windows 8，無論使用者使用何種裝置，都可以繼續之前未完成的工作。

開發Metro樣式應用程式的工具

微軟提供了新的Microsoft Visual Studio 2011 Express與Windows Dev Center，其中包含了Windows 8 SDK與Microsoft Expression Blend等最新工具，讓開發者使用並設計Metro樣式應用程式。

Visual Studio 11 Express Beta 是一個強大的整合開發環境(Integrated Development Environment，IDE)，其中包含了功能完整的程式碼編輯器、偵測與分析工具，以及豐富的語言支援。若需要修改HTML5或XAML來設計使用者介面，則可以透過Expression Blend整合工具，簡單的做視覺化設計；也可以使用DirectX 11與HLSL來編寫華麗且令人投入的遊戲，或使用新整合的工具與介面來開發驅動程式。



在Visual Studio 11，你可以選擇JavaScript、C++、C# 或 Visual Basic不同語言的應用程式範本，例如：格線(Grid) 或分割(Split)… 等布局，可以快速使用各種配置來開始建立你的應用程式。根據你選擇的程式語言，也提供不同的偵錯與測試工具，值得一提的是偵錯模式中的裝置模擬器，讓你能夠在不同的外觀或規格下做測試，確保你的Metro樣式應用程式更有品質。

另外，使用Visual Studio的Store選單，可以直接連結至Windows Store的入口網站，封裝應用程式並上傳到Store，可供銷售或分享給其他使用者下載。

設計與建構 Metro樣式應用程式

在開始建立任何Metro樣式應用程式之前，你應該先從使用者的角度考量，
他們所期望的互動與操作的感受、想法是什麼？這裡列出了幾個需要注意的重要事項。

‧盡量不要從自己的角度考量要加入哪些功能，而要著重於使用者希望能獲得什麼體驗。
‧使用Windows 8所提供的應用程式合約，例如：共用、搜尋等，讓應用程式能夠容易的與其他應用程式互動。
‧精心設計的動畫、即時通知與動態磚，讓你的應用程式更引人注目與耳目一新。
‧為你的應用程式提供更多的個人化設定，例如：製作量身訂做的使用者磚，讓使用者可以載入自己的影像或其他內容。
‧利用漫遊來維護設定與狀態，不論用桌上電腦、平板電腦或手持裝置，都能隨時隨地使用您的應用程式。

建立你第一個Metro樣式應用程式

建立你第一個Metro樣式應用程式的操作步驟：
1.依序選取 [File] > [New Project]，來開啟 [New Project] 對話方塊。
2.選擇 [Visual C#] 或 [Visual Basic] 的 [Windows Metro Style]。
3.在中央窗格中，選取 [Blank Application]的範本類型。
4.最後輸入專案名稱點選OK，在預設路徑建立一個新的專案。



在專案建立後，你將會看到下列檔案與程式片段

‧BlankPage.xaml

這個檔案用來建立應用程式使用者介面的預設起始頁。可延伸應用程式標記語言(XAML)是宣告式語言，用來在 Windows Metro 樣式 UI 中建立 UI。XAML讓你簡單的建立Metro樣式應用程式，先在UI上加入一個按鈕(Button)，如下XAML的範例程式碼。



‧BlankPage.xaml.cs

程式碼後置檔案，包含預設起始頁的邏輯，在BlankPage.xaml建立的按鈕加入Click事件，如下C#的範例程式碼。



‧AssemlyInfo.cs

此檔案包含產生之組件中內嵌的名稱和版本中繼資料。只有C#與Visual Basic的專案才會自動組譯產生此檔案。

‧Package.appxmanifest

此檔案包含用於描述應用程式的中繼資料，如顯示名稱、說明、標誌以及功能等。你可以經由UI或是直接修改XML碼來修改這個部份，來設定到你的應用程式上。



‧Images

預設的標誌和啟動顯示畫面影像，您可以用自己的影像替換它們。

‧App.xaml, App.xaml.cs

這些檔案會指定應用程式層級邏輯。需要這個應用程式類別才能顯示使用者介面。

在編譯完成後執行應用程式，你可以點擊畫面上按鈕，透過P/Invoke叫用Win32播放Windows系統警示音效。雖然Metro樣式應用程式的架構下，已經看不到底層的Win32系統服務了，但在x86的平台上仍支援P/Invoke或COM Interop的使用，讓先前開發的桌面應用程式，能夠簡單地移植在全新的Metro樣式應用程式裡。

Metro樣式應用程式的新功能

為了能讓使用者操作起來更加的流暢，通常都會使用異步(Asynchronous)的方式來處理較長時間的操作。在WinRT中，可以發現超過50ms的API都被設計成異步處理了，但為了簡化異步程序的設計，現在只需要使用async和await關鍵字，就可以簡單地解決異步中的同步問題。在底下的程式碼中，將示範如何處理異步顯示的MessageDialog。



我們利用async關鍵字來宣告Button1_Click是一個異步的方法，並在函式內用await關鍵字來表明msg.ShowAsync()方法需要等待，在等使用者點選Close後，才會繼續往後執行後續的動作。

在Metro應用程式中，開發者也可以根據需求自行定義MessageDialog訊息框中的操作對象(UICommand)。在建立一個UICommand之前，必須先定義好自身的callback function，決定當UICommand的Click事件被觸發時，將執行哪些動作。底下的程式碼中，將示範如何實做訊息框UICommand與UICommandInvokedHandler的定義與應用。





在這次的範例中，可以發現在Metro樣式應用程式裡，不再有層層相疊的彈跳視窗(Pop-ups)或子視窗(Child Windows)出現，如圖七之畫面。取而代之的是，利用各式的Layout Page例如：FlipView、GridView，讓畫面能夠顯示更多的控制項。

認證你的Metro樣式應用程式

想要在Windows Store銷售你的應用程式之前，必須先把應用程式封裝(package)交付給微軟的審核，確認是否符合設計規範或藏有任何惡意程序，以保障使用者的使用體驗與安全。微軟也為開發者準備了Windows App Certification Kit，讓應用程式先在本機端做初步的測試，例如：使用的API是否支援WinRT、效能或安全特性的測試。底下將簡略的說明操作步驟：

1. 首先，必須先確認測試的程序是Release的版本。
2. 在VS11工具列依序選取 [Store] > [Create App Package] 封裝你的應用程式。
3. 於圖八畫面，選擇 [Create a package to use locally only] 在本機端進行封裝。



4. 在封裝完成後，點選 [Launch Windows App Certification Kit] 開始進行認證，如圖九畫面。



5. 接著Windows App Certification Kit便會開始自動地測試你的應用程式。如圖十。



6. 最後會得到一份xml的報告，如圖11，記錄每一個測試的項目與結果。



現在，你已經準備好開始建立你自己的Metro樣式應用程式，試著設計出為使用者量身打造的應用程式，並輕鬆地透過Visual Studio 11認證且交付給Windows Store審核，將你的應用程式銷售給世界各地的客戶使用。

結語

微軟新推出的Metro樣式應用程式布局，使用起來不但快速且流暢，也可以根據所用的設備自由調整空間配置，再加上精心設計的動畫提供了相當不錯的觸控體驗！

微軟給開發者提供了極大的靈活性，來使用他們熟悉的語言開發Metro樣式應用程式。Metro樣式應用程式不但有著生動多變的動態磚，使用起來也十分的友善容易上手。開發者可以簡單地上傳至Windows Store，販售他們的Metro樣式應用程式給各地的使用者下載。

在本文範例中，簡單的利用MessageDialog示範了一些Metro樣式應用程式的新功能，但仍有許多與之前Win32應用程式不同的概念。像是應用程式的生命週期，從部屬(deployment)到移除(removal)，在開始執行(launch)到被關閉(close)之間，系統是如何在有限的資源下有效地運作；或是當你的前景應用程式被暫停(suspend)時，如何把長時間的工作在背景完成，來確保你的客戶得到最佳的體驗。這些都是開發者需要再額外去研讀並熟知的。

參考資料

‧Windows開發人員中心 - Metro 樣式應用程式
‧Metro Style Apps 開發 C# + XAML 系列文章
‧Windows Runtime

本文轉載自RUN!PC