天天看點

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

原文位址:

<a href="http://channel9.msdn.com/Series/Windows-Phone-8-Development-for-Absolute-Beginners/Part-3-Writing-your-First-Windows-Phone-8-App">http://channel9.msdn.com/Series/Windows-Phone-8-Development-for-Absolute-Beginners/Part-3-Writing-your-First-Windows-Phone-8-App</a>

既然我們已将需要的工具安裝完畢,我們可以着手建立第一個Windows Phone 8應用程式了。

以下是我們的計劃:

我們将建立一個新的Windows Phone應用程式項目

我們将進行一些簡單的編輯,例如删除注釋,添加媒體控件(MediaControl)和按鈕控件并應用樣式。

我們将編寫響應按鈕單擊事件的事件處理程式

在按鈕單擊事件處理程式中我們将播放聲音檔案

根據以往的經驗或者通過觀看Channel9的其他絕對初學者系列,您應該已經熟悉了建立新項目、添加新檔案等一些基本的步驟。我不會花時間解釋上 述内容。如果對某些内容不熟悉,您可以再次複習絕對初學者的C#系列教程(C# for Absolute Beginners series)。

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

檔案

建立

項目 ...

在建立項目對話框中:

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

确認您位于Windows Phone項目模闆

選擇Windows Phone應用程式模闆

重命名為PetSounds

确認解決方案名稱也被修改為“PetSounds”

單擊OK

您将看到以下對話框:

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

 由于本系列僅針對Windows Phone OS 8.0,是以選擇該選項。如果您想擴充您的應用程式至老版本的Windows Phone裝置,在剛才的步驟中您可以選擇針對以前版本的Windows Phone作業系統。

新項目将很快被建立并加載到解決方案管理器中,同時MainPage.xaml将出現在Visual Studio的主區域中。如MainPage.xaml中所示,這些“螢幕”被稱為“頁面”。在我們的第一個應用程式中,我們僅使用一個頁面,但是在其他 應用程式中我們将添加多個頁面并在它們之間進行導航。

我假設您以前從來沒有接觸過Windows Phone 項目模闆。您将看到MainPage.xaml被加載到可視化設計器中。

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

左側是可視化設計器。雖然您可将它作為向Windows Phone應用程式放置和添加控件的主要手段,但是我主要将它作為XAML編輯窗格所做工作的回報來使用。

右側是XAML編輯窗格。我通常以手寫方式編寫XAML。我在XAML代碼中進行的修改将反映在可視化設計器中,反之亦然。它們代表看事物的兩個角度,但實際上表示相同的事物。

在窗格下面有若幹工具:

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

并且在窗格之間:

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

您可以任意對它們進行試驗。它們是自解釋的,您需要花些時間試一試然後就能了解它們的用途。但是因為它不是課程的重點,是以我将繼續下面的内容。在XAML窗格中,我想删除兩個大段的注釋以更友善地浏覽XAML。我已在下圖中将它們标出:

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

您可以安全地删除這些注釋。確定從以下位置開始删除:

&lt;!--

至以下位置結束...

--&gt;

删除後的XAML如下所示:

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

 在本課中我們将注意力集中在從36行開始的"ContentPanel(内容窗格)",并在 &lt;Grid&gt;元素的開始和結束之間添加新的XAML代碼。

在&lt;Grid&gt;元素的開始和結束之間添加以下代碼:

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

一旦添加了:

&lt;Button&gt;Quack&lt;/Button&gt;

代碼,注意可視化設計器的變化:

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

按鈕幾乎占據了整個螢幕。這樣不行,我們需要通過設定Height和Width屬性限制按鈕的大小。

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

值”200”指”200像素”。

可視化設計器更新為一個較小的按鈕:

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

讓我們将Button控件移動到頁面的左上角(頁面标題的下方)并将背景色設定為紅色:

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

我同時為&lt;Button&gt;控件提供了一個名稱,這樣我就可以在C#中對該控件進行引用。設定控件的名稱是可選的。僅在需要用C#通路這些控件時才需要設定控件的名稱。我知道我需要通路這些按鈕,是以我為按鈕提供了可程式設計的名稱。

可視化設計器更新并顯示了修改的效果:

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

 這是很好的開始。您已看到我們可以通過設定對象的屬性在Windows Phone頁面中控制對象的可視化形态。

接下來,讓我們向XAML添加一個MediaElement控件,它位于Button控件的下方。

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

注意我可以在XAML代碼之間添加空格和額外的空行,這不會對代碼有任何影響。您接下來将看到Visual Studio将會自動縮進并以一定間隔排列代碼以增加代碼的可讀性,但是它不會影響頁面的呈現方式。

 此外我還未設定MediaElement的Sound屬性。因為在項目中還沒有可以選擇的來源(即聲音檔案等媒體元素)。

确認您已經下載下傳随視訊一起出現的資産檔案。您可以在下載下傳本文檔或觀看視訊的位置下載下傳到它們。

我已将檔案解壓縮到稱為C9Phone8的文檔目錄中。C9Phone8目錄包含3個子目錄:

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

我們需要使用包含在PetSounds_Assets檔案夾中的資産。在此檔案夾中有兩個子檔案夾,我們需要将Audio子檔案夾拷貝到項目中。

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

Audio檔案夾的目标是項目中的Assets子檔案夾:

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

 我從Windows資料總管中拖動并釋放Audio檔案夾至Visual Studio解決方案資料總管中的目标目錄,即Assets檔案夾。将所有内容展開後,現在我的Assets檔案夾看起來是這樣:

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

在應用程式中有若幹.wav聲音檔案。我需要通路Duck.wav這個檔案。我将它添加為MediaElement中的Source屬性。

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

首先,注意我添加了相對MainPage.xaml檔案的完整子檔案夾路徑,MainPage.xaml位于項目的根目錄。

其次,注意我同時添加了兩個屬性。我将Volume設定為”1”,它代表聲音最大。Windows Phone API中許多設定從最小值0.0到最大值1.0,0.5位于中間。大多數這些值是C#中的Double類型。

第三,我需要當有人點選按鈕時以程式設計方式通路此控件以觸發聲音的回放,是以我需要設定MediaControl的名稱。您也許想知道x:字首的作用。我将在下節課解釋。現在請暫時放一放。

 最後我将AutoPlay屬性設定為”False”。如果設定為”True”,Duck.wav聲音檔案将在應用程式加載時立即播放。這不是我需要的。我需要在單擊”Qack”按鈕時觸發wav檔案的播放。我将在下一節通過編寫代碼來實作。

在&lt;Button&gt; XAML元素中,我将添加Click=””屬性。Visual Studio的智能感覺功能提供了建立一個新的事件處理程式的功能。

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

 确認該選項被高亮顯示,我将單擊鍵盤上的Enter鍵以為事件處理程式生成一個名稱。

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

我将編寫當使用者單擊按鈕時執行的代碼,是以我将定位到PlayAudioButton_Click()方法并在這裡編寫C#代碼。

我在那一行代碼的任意位置單擊右鍵并從上下文菜單中選擇“定位到事件處理程式”:

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

這将在Visual Studio中打開名稱為MainPage.xaml.cs的檔案。

如果您是在Visual

Studio中建立Windows,Web以及現在的手機應用程式的新手,您将會意識到我們建立的這些頁面由兩部分組成。XAML和設計視圖允許我們編寫

聲明性的代碼(XAML)。與之相關的代碼視圖(.cs檔案)允許我們在C#中定義行為。它們都是同一概念的組成部分。以後會經常這樣:您的光标将會出現

在PlayAudioButton_Click()方法的開始和結束大括号之間。

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

因為隻要有人點選Quack按鈕,代碼塊就會執行,是以我們需要觸發MediaElement播放在Source屬性中設定的聲音,即Quack.wav檔案。

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

我使用MediaElement的名稱QuackMediaElement,通過程式設計的方法對它進行通路。我需要調用Play()方法來啟動Source屬性指向檔案的回放,換句話說就是Quack.wav檔案。

 現在讓我們測試應用程式。

 您将對以下内容很熟悉。通過使用工具欄中的播放按鈕或使用鍵盤上的F5鍵,您将在調試模式下運作應用程式,與我們在C#基礎系列(C# Fundamentals series)中運作控制台應用程式的方法相同。

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

接下來将看到Windows Phone模拟器。它是運作Windows Phone

8.0的虛拟機。換句話說,作業系統實際上認為它是運作在一部實體手機裝置上。但是它是虛拟的,即微軟建立了從各個方面模仿手機硬體的軟體。我們将在此系

列中經常使用手機模拟器,因為每次需要測試編寫的代碼或者對代碼進行修改時,模拟器比部署測試至實體手機要來得簡單。在本系列中,我們将了解更多有關手機

模拟器的特性。

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

請使用滑鼠來模拟使用手指單擊手機的螢幕。您需要單擊紅色的Quack按鈕。如果計算機被設定為可以聽到聲音,您将從耳機或揚聲器中聽到鴨子的嘎嘎聲。

如果需要停止調試,單擊工具欄中的紅色方塊按鈕。

Windows Phone 8初學者開發—第3部分:編寫第一個Windows Phone 8應用程式

快速回顧一下,在本課中您建立了一個簡單的聲音面闆應用。我們學習了如何建立Windows

Phone項目,如何修改聲明性的XAML代碼以添加并配置控件。我們學習了如何在項目中添加資産檔案并在代碼中對其進行引用,如何添加事件處理程式以對

終端使用者觸發的特定事件進行響應。我們學習了MainPage.xaml和MainPage.xaml.cs是如何進行關聯的,我們将在下節課中學習更多

的内容。我們學習了如何觸發控件的方法以在使用者點選按鈕時播放聲音。最後我們學習了Windows Phone模拟器可以作為虛拟環境下測試應用的方法。

但是還有很多内容需要讨論。如果您是XAML方面的新手,具備這方面的堅實基礎對您來說非常重要,是以在下一節課我們将讨論XAML的特性,本系列

的其餘部分将始終在這些特性之上進行建構。正如我在開篇中所說的,您在這裡學習的很多内容将可以遷移到使用XAML的所有API(應用程式接口),例如

Windows Presentation Foundation和Windows應用商店應用。

繼續閱讀