Windows 8 Metro 應用開發入門(一):開發環境介紹


摘 要

Windows8已經發布,隨之而來的基於WinRT的Metro應用也正向我們走來,正像它所宣傳的:光滑、快、現代。看習慣了玻璃、立體風格的應用,或許Metro的簡潔能給你留下不一樣的體驗。Visual Studio 2012為Metro應用提供了強有力的開發支持。磨刀不誤砍柴工!這一章我們先來介紹一下開發環境的搭建及可能遇到的問題,最后再來一個簡單的應用體驗一下Metro的開發。

第1節 搭建開發環境

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的感覺?

 

第2節 創建項目

在新建項目中是以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應用開發。

 

第3節 項目類型

在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。

 

第4節 示例項目及調試

接下來我們創建一個經典的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進行切換。

如果在代碼窗口中有斷點,在程序運行到斷點位置會自動切換到VS代碼窗口的斷點命中位置。

 

小 結


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM