Windows Phone 7.5開發初體驗

by Vivid 11. 四月 2012 03:19

.NET Magazine國際中文電子雜誌
者:許薰尹
稿:張智凱
文章編號:N120412301
出刊日期: 2012/4/11

 

現在最流行的應用程式類型便是智慧型手機上的App程式,不免俗地,微軟也有一個開發手機程式的平台,稱之為Windows Phone Application Platform,提供一系列開發工具、作業系統與相關技術來建置這類型的應用程式。本文將介紹如何在Visual Studio 2010建立Windows Phone應用程式,並在Windows Phone應用程式之中,加入Content與Resource,並探討它們之間的不同點,了解其對效能的影響。

參考圖1,Windows Phone Application Platform架構中的主要組成元件包含:

  • Runtimes:Silverlight framework與XNA framework。Silverlight framework可利用XAML來設計手機上的應用程式,支援事件驅動能力;XNA framework則是用來設計遊戲。
  • 開發工具:包含Visual Studio 2010可用於設計應用程式;Microsoft Expression Blend可用來設計畫面。Windows Phone Emulator工具則是可以在Windows PC上測試手機應用程式。
  • 雲端服務:涵蓋Windows Azure、Xbox Live服務、通知服務(Notification Service)與位置服務(Location Service)….等等。
  • 網站服務:提供Windows Phone Marketplace,可以讓程式設計師將設計好的程式,部署到市場販售。

clip_image002

圖 1:Windows Phone Application Platform架構。

作業系統與軟體下載

在開發Windows Phone應用程式之前,你需要下載並安裝Windows Phone SDK 7.1,下載網址為:

http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=27570

Windows Phone SDK包含了以下軟體及工具程式:

  • Microsoft Visual Studio 2010 Express for Windows Phone
  • Windows Phone Emulator
  • Windows Phone SDK 7.1 Assemblies
  • Silverlight 4 SDK and DRT
  • Windows Phone SDK 7.1 Extensions for XNA Game Studio 4.0
  • Microsoft Expression Blend SDK for Windows Phone 7
  • Microsoft Expression Blend SDK for Windows Phone OS 7.1
  • WCF Data Services Client for Window Phone
  • Microsoft Advertising SDK for Windows Phone

開發機器上的作業系統則有一些限制,目前限定只能夠在Windows Vista或Windows 7作業系統上開發才行,當你在Windows Server 2008的機器上安裝Windows Phone SDK 7.1時,會得到一個錯誤訊息,無法進行安裝。

Windows Phone SDK 7.1也不能夠在虛擬機器上執行,也就是說不支援Virtual PC或VMware等等。

設計第一個Windows Phone應用程式

接下來我們以一個範例程式與Step-by-Step的步驟來說明如何建立一個Windows Phone專案,並在專案之中加入圖片檔案。啟動Visual Studio 2010開發環境。參考圖2,從Visual Studio 2010工具選單「File」à「New」à「Project」,選取Visual C#語言,點選「Silverlight for Windows Phone」,你將看到許多不同的Windows Phone應用程式範本可以提供選擇。

對於第一個應用程式而言,我們選取「Silverlight for Windows Phone」分類下的「Windows Phone Application」來建立一個專案,在「Name」後方的文字方塊中,為應用程式命名,例如本範例命名為「PhoneApp1」。並設定「Location」為一個適當的目錄。

clip_image004

圖 2:建立一個Windows Phone Application。

按下「OK」按鈕建立專案。這時會出現一個「New Windows Phone Application」對話方塊,在對話方塊中,「Target Windows Phone OS Version」項目有兩種選項,一為「Windows Phone OS 7.0」;一為「Windows Phone OS 7.1」。 Windows Phone的第一個版本名稱為「Windows Phone 7」執行在「Windows Phone OS 7.0」上;而目前最新的Windows Phone版本為Windows Phone 7.5,執行在「Windows Phone OS 7.1」上。你可以選取適當的作業系統版本。本例選取「Windows Phone OS 7.1」項目,然後按下「OK」按鈕,請參考圖3所示。

clip_image006

圖 3:選取適當的作業系統版本。

接著便可以看到圖3的操作畫面,「Solution Explorer」視窗中包含了一個MainPage.xaml,這是Windows Phone應用程式的主畫面檔案,主要是用來設定應用程式的主要外觀。左方是設計畫面,中間則是描述設計畫面的XAML標籤,請參考圖4所示:

clip_image008

圖 4:Windows Phone應用程式設計畫面。

在「Solution Explorer」視窗中還有許多檔案,其中ApplicationIcon.png檔案是用來定義應用程式圖示。Background.png檔案用來顯示應用程式背景圖;SplashScreenImage.jpg則使用在應用程式的啟動畫面。

點選設計畫面上顯示「page name」的TextBlock控制項,使用「Properties」視窗設定Text屬性的值為「我的應用程式」,請參考圖5所示:

clip_image010

圖 5:使用屬性視窗修改Text屬性。

若切換到XAML進行檢視,此TextBlock的標籤看起來如下:

 

<TextBlock x:Name="PageTitle" Text="我的應用程式" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

使用Microsoft Expression Blend設計畫面

你可以切換到Microsoft Expression Blend來設計MainPage畫面,在Visual Studio 的「Solution Explorer」,點選視窗中的MainPage.xaml檔案,按滑鼠右鍵,從突顯式選單中選取「Open in Expression Blend」,請參考圖6所示:

clip_image012

圖 6:切換到Expression Blend。

在Microsoft Expression Blend中,你也可以修改屬性或撰寫程式碼,請參考圖7所示。本文暫不討論使用Microsoft Expression Blend設計Windows Phone應用程式的細節。

clip_image014

圖 7:使用Microsoft Expression Blend來設計MainPage畫面。

若在Microsoft Expression Blend之中,要切換回Visual Studio,可於左方「Projects」區塊,選取MainPage.xaml檔案,按滑鼠右鍵,從突顯式選單中選取「Edit in
Visual Studio」,請參考圖8所示:

clip_image016

圖 8:切換回Visual Studio。

Content 與Resources

一個Content項目實際上就是一個檔案,它可能是一張圖片檔,通常存放在Windows Phone應用程式所在的目錄。手機應用程式可以視需求載入此檔案到記憶體。在應用程式的專案中加入內容(Content)檔案,不會影響到編譯完的程式檔案的大小。

資源(Resource)則會儲存在應用程式組件中,這代表著應用程式編譯完之後,應用程式執行檔的檔案的大小會比較大一點。使用資源的方式來開發手機程式,當程式載入執行時,需要將內嵌資源的應用程式組件載入記憶體,因此啟動程式的時間會比使用Content方式要來得久一點點。若應用程式啟動時間過久,你的程式可能會被Windows Phone作業系統刪除,因此在設計手機應用程式時,需要小心地規劃,不要內嵌太多東西在應用程式組件之中,來避免這樣的情況發生。

當應用程式執行時,使用Content方式設計的應用程式,其起始的速度會比使用資源的方式快一些,但後續若應用程式需要用到Content內容時,便在執行時期動態進行載入的動作,這會讓應用程式的執行速度變慢一些。而使用資源方式設計的應用程式,一開始載入執行的速度會慢一些,但後續要存取資源時,便不用再做載入動作,執行的速度就會快一些。

在專案中加入資源

你可以在專案中加入資源,例如加入圖檔。當你在專案中新增圖片時,需特別注意,因為手機並沒有足夠的記憶體來顯示高解析度的圖片,能接受的最高解析度為800*480 像素(pixel)。因此挑選圖片來當作應用程式背景圖時,要注意不要超過此解析度。將JPG圖檔檔案加入專案的操作步驟為:從Visual Studio 2010選單「Project」-「Add Existing Item」選取一個JPG檔案,按下「Add」按鈕。

在「Solution Explorer」視窗,點選你的專案中的JPG檔案,開啟「Properties」視窗。預設「Copy to Output Directory」屬性值的設定為「Do not copy」。設定它的「Build Action」屬性值為「Content」;將「Copy to Output Directory」屬性值為「Copy if newer」,請參考圖9所示。

clip_image018

圖 9:加入Content。

當應用程式編譯時,Visual Studio 2010會將此圖檔複製到應用程式所在目錄。設定「Copy to Output Directory」屬性值為「Copy if newer」的意思是當專案中此圖檔有變動時,會將新版本的檔案複製到應用程式所在目錄。而設定「Copy to Output Directory」屬性值為「Copy always」的意思便是永遠都會複製到應用程式所在目錄。

在MainPage.xaml設計畫面,從工具箱拖曳一個Image控制項到畫面下方名為ContentPanel的Grid控制項中。要顯示設定為Content類型的圖檔,只需要在XAML中設定Image控制項的Source屬性為圖檔的名字就可以了。Silverlight會按照XAML中項目定義的順序來繪製畫面。

使用「Properties」視窗設定Image控制項屬性:Stretch屬性的值為「Fill」; Source屬性的值為JPG檔檔名,以本例而言為「field.jpg」,名為ContentPanel的Grid控制項的標籤看起來如下:

<!--ContentPanel - place additional content here-->

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<Image Height="503" HorizontalAlignment="Left" Margin="25,38,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="361" Source="field.jpg" />

</Grid>

 

接下來,從Visual Studio 2010選單選擇「Build」-「Build Solution」。組件編譯完成後,field.jpg檔案將會被copy到專案的 \bin\debug目錄,您可以使用檔案總管檢視之,請參考圖10所示:

clip_image020

圖 10:設定為「Content」與「Copy to Output Directory」的圖檔將被加到應用程式所在目錄。

在「Solution Explorer」視窗,點選你的專案-「field.jpg」項目,利用「Properties」視窗,設定field.jpg的「Build Action」屬性值為「Resource」;將「Copy to Output Directory」屬性值為「Do not Copy」,請參考圖11所示:

clip_image022

圖 11:設定將「Copy to Output Directory」屬性值為「Do not Copy」。

選取MainPage.xaml設計畫面上的Image1控制項,利用「Properties」視窗,點選「Source」-「Reset Value」,請參考圖12所示:

clip_image024

圖 12:重設Source屬性值。

在「Properties」視窗,點選Image1控制項「Source」屬性後方的 ( Choose Image)按鈕,叫出「Choose image」對話盒,此對話盒會顯示目前專案中所有的圖片,預設當你選取field.jpg檔案,就會自動設定Path為「/PhoneApp1;component/field.jpg」,請參考圖13所示。

clip_image028

圖 13:選取圖片。

目前Image控制項的XAML標籤參考如下:

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Image Height="503" HorizontalAlignment="Left" Margin="25,38,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="361" Source="/PhoneApp1;component/field.jpg" />
</Grid>

 

從Visual Studio 2010選單選擇「Build」-「Build Solution」。使用檔案總管檢查專案的 \bin\debug目錄,您可以發現 field.jpg檔案將不會被copy到此目錄下, 這是因為圖檔被內嵌在PhoneApp1.dll組件之中的緣故。

使用Windows Phone 模擬器執行程式

若要執行Windows Phone應用程式,可以在Visual Studio 2010開發工具中,按下鍵盤F5鍵,或選取Visual Studio 2010「Debug」-「Start Debugging」選單選項來執行程式,您所撰寫的Windows Phone程式並不會在PC上執行,而需要傳輸到Windows Phone手機上,或是透過Windows Phone模擬器上執行。Visual Studio 2010工具列上預設設定將程式部署到Windows Phone 模擬器上執行,你可以自行切換部署的目地,請參考圖14所示:

clip_image030

圖 14:設定程式將部署到Windows Phone 模擬器上執行。

此時會啟動Windows Phone Emulator,並看到畫面如下。

clip_image032

圖 15:第一個Windows Phone應用程式執行結果。

總結

當你開發Windows Phone手機應用程式時,應該要深入地了解內容(Content)和資源(Resource)的不同,才能夠撰寫出執行效率好的程式碼。當一個應用程式載入Windows Phone手機裝置執行時,首先會檢查此應用程式組件是否是一個合法的組件 ,若驗證成功後才會將應用程式組件載入記憶體執行。因此,當應用程式組件檔案愈大時,就會讓程式起始的動作變慢。若起始的時間花太久,你的應用程式可能會被Windows Phone作業系統刪除。因此,你應該小心設計應用程式,避免在應用程式起始時,執行太多工作。

範例下載: 1_PhoneApp1.rar (146.66 kb)

Tags:

.NET Magazine國際中文電子雜誌 | WindowsPhone | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List