Windows 8 Metro 應用開發入門一：開發環境介紹
Windows8已經發布，隨之而來的基於WinRT的Metro應用也正向我們走來，正像它所宣傳的：光滑、快、現代。看習慣了玻璃、立體風格的應用，或許Metro的簡潔能給你留下不一樣的體驗。Visual Studio 2012爲Metro應用提供了強有力的開發支持。磨刀不誤砍柴工！這一章我們先來介紹一下開發環境的搭建及可能遇到的問題，最後再來一個簡單的應用體驗一下Metro的開發。
Windows8不但支持傳統的桌面應用，並且推出一個專爲觸摸而設計的最新Metro風格應用，對於Metro應用必須要求在Visual Studio 2012下開發，隨之一起發佈的是.NET Framework 4.5。所以，爲了開發及調試方便，我們推薦的開發環境是：Windows8 + Visual Studio 2012。
Metro支持三種開發模式：
如果你有Web前臺開發功底，你可以選擇HTML5+CSS3+JavaScript進行開發；
如果你熟悉Silverlight或WPF開發，可以選擇XAML+C#/VB.NET/C++進行開發；
如果你比較關注渲染性能，當然可以選擇C++和DirectX進行開發。
本入門系列會以XAML+C#爲基於進行演示，當然在後文中也可能會進行其他另兩個開發模型的演示。在安裝Visual Studio 2012過程中，可以選擇安裝相應版本的Blend For Visual Studio爲XAML提供可視化設計，不過我個人的習慣是在VS中手寫XAML，畢竟VS中也提供了對XAML的智能感知，在調色或動畫部分會藉助Blend進行輔助工作。
我的測試開發環境是部署在虛擬機中，如果你還沒有安裝Windows8和Visual Studio 2012，可以去微軟網站上下載相應的預覽及試用版。至於安裝，這裏就不再演示了，提醒一下，在安裝Windows8時，一定要創建一個新用戶，另外還要提前註冊一個Windows Live ID，現在已被更名爲Microsoft 帳戶。正確安裝，啓動後，可以看到如下兩個分別是VS2012和Blend的界面，怎麼樣？有沒有Metro的感覺？
在新建項目中是以Windows應用商店表示Metro應用，選擇Windows應用商店項目類型，默認是.NET Framework 4.5版本。
在首次創建Windows應用商店項目時候，VS會要求你先獲取Windows8應用開發許可證，現在這個許可證可用期限是一個月，以後不知道會不會收費。
選擇某一項目類型後，點擊“確定”按鈕，在創建過程中，會彈出如下詢問：
很明顯，義無反顧地選擇“我同意”，接着是連接許可證服務器，然後是要求輸入可用的Microsoft賬戶信息：
輸入完了之後，點擊“登錄”，如果賬戶可用，正常情況下會提示獲取許可證成功，如下：
我是2012年9月12日獲取的，許可證到期日期是2012年10月12日。到此一系列的身份認證表示你已經得到創建Windows8 Metro應用的許可，點擊“關閉”按鈕，接着纔是真正的創建項目。以後再創建Windows商店項目就不會再彈出這些獲取許可證消息的窗口了，當然要看微軟對許可證策略。如果你是以Administrator登錄，還有麻煩，在VS中打開xaml文件設計器時可能會收到如下設計器異常：
明確指出了不能用內置管理員激活此應用，如果你是很固執地嘗試調試程序，可能會收到以下異常：
所以，同志，請切換到其他系統賬戶吧，這就是在上一節中提到的，在安裝Windows8時一定要創建一個新用戶，以這個新用戶登錄Windows然後是進行Metro應用開發。
在Windows8商店項目類型中有幾個模板，如下：
創建任何一個模板的應用，都會默認創建幾個必要的文件夾及目錄，如下圖是創建空白應用程序模板的項目：
Assets 文件夾，放置圖片等資源文件，默認裏面有四個與Windows商店應用程序相關的必須的圖片，也可以將自己的資源文件放進去。
Common 文件夾，默認裏面有一個樣式文件StandardStyles.xaml，是Windows商店應用程序的基礎樣式，強烈建議不要修改它，因爲它與一些控件有關聯，如果有自己的樣式，可以在這裏新建一個自己的樣式，然後在App.xaml 裏做引用即可。
App.xaml/App.xaml.cs 熟悉Silverlight開發的都知道這個是應用程序的初始入點。App.xaml裏僅僅有一個對標準樣式的引用：
<ResourceDictionary Source="Common/StandardStyles.xaml"/>
App類與Silverlight裏的App類相似，這裏有一個重要的方法：
protected override void OnLaunched(LaunchActivatedEventArgs args) { Frame rootFrame = Window.Current.Content as Frame; if (rootFrame == null) { rootFrame = new Frame(); if (args.PreviousExecutionState == ApplicationExecutionState.Terminated) { //TODO: 從之前掛起的應用程序加載狀態
} Window.Current.Content = rootFrame; } if (rootFrame.Content == null) { if (!rootFrame.Navigate(typeof(MainPage), args.Arguments)) { throw new Exception("Failed to create initial page"); } } Window.Current.Activate(); }
應用程序啓動時會進入這個方法，然後導航到第一個主頁面，Frame的Navigate方法很有意思，它只是接收一個目標頁的類型，在其內部創建目標頁的實例進而加載可視。這裏還會涉及到程序掛起、恢復等，建議參考應用程序生命週期的相關資料。
AppXXX_TemporaryKey.pfx 應用程序簽名證書
Package.appxmanifest 應用程序配置相關，比如Logo、應用程序名等，如果你的程序將來要提交到Windows商店，可得好好配置一下這裏面的東西，在VS中可以雙擊打開它進行可視化編輯，也可以用記事本打開它進行編輯，其實它就是一個XML文檔。
以上是項目的基礎配置，對於Windows商店項目有幾個模板可供選擇。
（1） 空白應用程序（XAML） 創建沒有預定義的控件或佈局的Windows應用商店應用程序的單頁項目，該模板會創建一個空的主頁面MainPage.xaml，如下：
<Page x:Class="App1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> </Grid> </Page>
是一個空的頁面，可以在其Grid裏放置總局及控件。這一模板是最基礎的模板，我們可以根據需要自定義各種各樣的頁面。
（2） 網絡應用程序（XAML）創建在以網格形式排列的分組項之間導航的Windows商店應用程序的三頁項目，專用頁將顯示組合項的詳細信息。如下圖分別對應：GroupedItemsPage，GroupDetailPage和ItemDetailPage頁，這些頁都已經有相應的總局元素。
基於組、項、詳細的導航可以加快我們的開發速度，當然如果這些頁達不到我們項目的要求，也可以自定義其他頁面佈局。此模板的項目會在Common文件夾下創建幾個支持導航和消息通知等類，並且在DataModel文件夾下創建一個示例數據源SampleDataSource。
（3） 拆分佈局應用程序（XAML）在已分組的項之間導航的Windows商店應用程序的兩頁項目，如下圖分別表示組頁ItemsPage，和項及選擇列表項頁SplitPage：
如果你的應用程序有類似主-從（包含列表項）展現應用，這個模板非常適合。
（4） 類庫項目（Windows應用商店應用程序）這個基於Metro應用的託管項目，這個項目大家都很熟悉了，裏面通常就是放一些Class。
（5） 還有兩個Windows運行時組件和單元測試項目模板就不再介紹了，有需要可以參考相關資料。
在每個項目中可以添加對應的項：空白頁BlankPage、基本頁BasicPage、拆分頁SplitPage、項頁ItemsPage、項詳細信息頁ItemDetailPage、分組項頁GroupedItemPage、組詳細信息頁GroupDetailPage、資源字典Dictionary、模板化控制CustomControl、用戶控件MyUserControl、文件打開選取器協定FileOpenPickerPage、搜索協定SearchResultsPage、共享目標協定ShareTargetPage。
接下來我們創建一個經典的HelloWorld項目。首先我們創建一個空的HelloWorld項目，如下：
編輯主頁面MainPage，放置一個TextBox和一個Button，當我們點擊按鈕時，彈出對話框，來顯示用戶輸入和其他字符。編輯完成的MainPage頁如下：
<Page x:Class="HelloWorld.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:HelloWorld" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <StackPanel Orientation="Horizontal" Height="100" HorizontalAlignment="Center" Margin="0,120,0,0" VerticalAlignment="Top"> <TextBox x:Name="tbInput" TextWrapping="Wrap" Text="" Width="380" Height="60" FontSize="26" /> <Button x:Name="btnOK" Content="確定" Width="100" Height="64" Click="btnOK_Click_1" FontSize="22"/> </StackPanel> </Grid> </Page>
確定按鈕事件如下：
private void btnOK_Click_1(object sender, RoutedEventArgs e) { string msg = string.Format("You say: {0}.", this.tbInput.Text); MessageDialog dialg = new MessageDialog(msg, "Hello world"); dialg.ShowAsync(); }
調試Metro項目有三種方式：模擬器、本發計算機和遠程計算機。對於模擬器運行效果如下：
模擬器模式下是一個單獨的窗體，所以對於調試比較方便，但是對於本地計算機模式下調試，由於是全屏幕且在Metro風格下運行，所以調試比較不方便，通常當運行起來後，有三種方式可以切換：
（1） 可以使用快捷鍵Alt+F4退出當前程序；
（2） 將鼠標移動屏幕左上角位置，然後在左上角會出現其他程序界面的縮略圖，點擊即可切換；
（3） Alt+Tab進行切換。
（4）鼠標放於屏幕頂端，變成手型形狀時按住鼠標拖到屏幕底端。
如果在代碼窗口中有斷點，在程序運行到斷點位置會自動切換到VS代碼窗口的斷點命中位置。