本系列文章來源MSDN的
面向完全新手的 Windows Phone 8 開發
主要是想通過翻譯本系列文章來鞏固下基礎知識順帶學習下英語和練習下自己的毅力(因為打算每天翻譯一篇,但是發現翻譯這篇花費了好多時間,所以可能后面可能會兩天翻譯一篇,希望多與大家交流)
現在我們已經安裝好了開發工具,我們能創建我們的第一個wp8應用。
以下是我們的計划:
1、我們將創建一個新的Windows Phone應用項目;
2、我們做一些簡單的編輯,例如刪除注釋並且添加一個MediaControl和一個Button並添加style(style it up);
3、寫一個Button的Click事件處理;
4、在Button的Click事件里面我們將播放一段wav文件。
第一步:創建一個新的Windows Phone項目,命名為PetSounds
我希望你已經在channel9上看其他菜鳥系列文章的時候已經掌握了新建項目、文件等技巧。接下來我不回花時間解釋這些,如果有不熟悉的你可以去復習C# for Absolute Beginners系列。
1、文件
2、新建
3、項目
新建項目對話框:
1、確保你是在Windows Phone項目模版開發中;
2、選擇Windows Phone應用模版
3、重命名為:PetSounds
4、確保項目解決方案的名字也是PetSounds
5、點擊OK
接下來你能看到下面的對話框:
因為這個系列講的是WP8開發,如果你想要項目支持以前的版本的話你可以選擇不同的目標版本。
第二步:刪除無用的注釋使我們更容易閱讀(navigate through)我們的代碼
過一會兒,這新建的項目就加載在解決方案窗口中,MainPage.xaml呈現在Visual Studio的主窗口中,注意這個screen是叫做page,在MainPage.xaml中,在我們的第一個應用中只有一個頁面,但是在以后的應用中我們將會增加多個頁面並且在相互之間導航。
我假設你沒有在項目模板中做任何修改,你將在設計器中看到下面的內容:
1、在左邊,你將看到一個可視化的設計器,然而我們能用它作為我們布局和添加控件的主要工具,用他來展現我們在里面做的所有事情。。
2、XAML編輯窗口在右邊,我我們通常手寫XAML代碼,我們在XAML中做的修改將會反應在可視化設計器中,反之(vice versa)也是這樣的,他們是兩個視角(perspectives),但是代表着同樣的東西。
在窗口下方(beneath the panes)有許多工具:
和中間位置:
隨時可以實驗他們,他們是自己擴展的,你需要花時間去學習了解他們,然而這不是我們這次課程的重點,我們快速過這些,在XAML窗口,我想要刪除大段的注釋,以便我們能更好的閱讀代碼,我已經發現了他們的位置如圖所示:
你可以毫無疑問的刪除他們,但是確保他們是以<!--開始-->結尾;
你的XAML應該看起來像這樣:
在這節課中我們將集中關注在36行的ContentPanel,添加新的XAML代碼在Grid元素中。
第三步:在ContentPanel中添加一個Button並且給他添加Style
添加下面的代碼在Grid中:
一旦你添加了<Button>Quack</Button>代碼,你就可以在可視化設計器中看到改變:
按鈕幾乎占據(take up practically)整個屏幕,這不是我們想要的,我們需要通過設置他的Width和Height屬性來限制他的尺寸。
200代表200像素
可視化設計器也變為同樣的尺寸。
我們移動Button到左上角(標題的下面)並且修改他的背景顏色為紅色
我們也給Button命名了一個名字,這樣的話我們就能在后台c#代碼中訪問他,命名是可選的,我們只需要命名我們需要在c#代碼中訪問的元素,現在我們知道等下我們需要用到所以我們給他命名一個程序化(programmatic)的名字。
現在可視化設計器將變為以下效果:
這是一個偉大的開始,我們能通過設置元素的屬性來操縱對象的視覺效果(manipulate the visual qualities of objects)
第四步:添加一個MediaElement控件
接下來讓我們在Button下面添加一個MediaELement控件:
你能注意到我們能添加空白和空行在我們的XAML代碼中,並且他不會有任何影響,Visual Studio會自動縮進(indent)和空個代碼來增加可讀性,但是他不會影響頁面的渲染(rendered)。
我們還沒有設置MediaElemen控件的Source屬性,因為我們的項目沒有任何可選的源(即 媒體元素,像聲音文件)。
第五步:添加一個wav文件作為項目的資產
確定你已經下載好了這個音樂伴奏文件,你能從下載這個文檔或者觀看這個視頻的地方下載。
我已經解壓這個文件C9Phone8文件在我的文檔目錄下面,包括3個子文件夾:
我們想要用包含在PetSounds_Assets文件夾里面的資產,在這個文件目錄下有兩個子文件,我們把Audio子文件復制到我們的項目:
復制到我們項目的Assets目標文件夾下面:
將我們需要復制的文件拖拽到目標問價夾Assets后:
在應用中有很多聲音文件,我們將要訪問一個指定的文件Duck.wav,我們將它的值賦值給MediaElement控件的Source屬性。
首先,注意我們填寫的路徑是相對MainPage.xaml根目錄的相對路徑,
第二,注意我們設置的其他兩個屬性的值,我設置了Volume為1,意思是最大音量,在Windows Phone API中許多設置都是0.0最小1.0最大0.5中間,這些值一般都是double類型。
第三,我們需要在后台代碼中訪問這個控件來觸發播放這個聲音當有人點擊Button的時候,因此我們需要給Media控件命名,你可能想知道x:前綴(prefix)什么意思,我在后面的課程將會講到,現在你只需要有個印象就可以了。
最后,我設置了AutoPlay屬性為false,如果我設置為true,當我們的程序加載完成后聲音會立刻播放。這不是我想要的,我想要當我點擊Quack按鈕的時候,接下來我將寫代碼來實現它。
第六步:給Button添加Click事件處理
在Button的XAML代碼中我們添加Click=“”屬性后Visual Studio的自動感知功能會提示我們創建一個新的事件。
確保這個選項是高亮的,我將點擊Enter鍵來輸入一個事件名稱。
我想要寫代碼來執行點擊事件,因此我將導航到后代代碼中的PlayAudioButton_Click方法。
在Click屬性那一行任何地方點擊右鍵選擇導航到事件。
這樣將會打開一個叫MainPage.xaml.cs的文件。
如果你是在Visual Studio新建Windows,WEB,Phone應用程序,你將會發現我們創建的Page包括兩部分,XAML設計器窗口允許我們編寫XAML代碼,關聯的cs文件代碼允許我們寫C#代碼。這是兩個相同的概念,以后會越來越多,在Visual Studio中,你的光標(cursor)將會在打開和關閉PlayAudioButton_Click事件的大括號中。
因為這個代碼塊將執行每當有人點擊按鈕的時候觸發MediaElement播放我們設置在其Source屬性上的聲音,即Quack.wav文件。
我們用MediaElment元素的名字QuackMediaElement訪問它,我想訪問他的Play方法來啟動(kick off)播放源,也即Quack.wav文件。
現在,讓我們來測試這個應用程序。
第七步:啟動應用程序
是的,這對於你來說已經很熟悉了,你可以使用像控制台程序那樣調用Debug方法來運行程序,通過點擊工具欄上的那個播放按鈕或者按F5.
接下來你將看到Windows Phone模擬器,他是一個運行wp8系統的虛擬機。你也可以認為他是一個真實的設備。然而虛擬在在這個層面上是微軟用軟件模擬硬件的方式。
在本系列課程中我們將廣泛使用模擬器,因為這樣比使用物理設備更容易。你將會了解更多關於手機模擬器的使用。
通過鼠標模擬手指在屏幕上操作,當你點擊Quack按鈕的時候電腦將會播放聲音文件,然后你將通過耳機(headset)或揚聲器(speakers)聽到聲音。
通過點擊工具條上的紅色正方形按鈕來停止調試。
回顧:
在這節課中,我們創建了一個簡單的播放聲音應用。我們學習了如何創建Windows Phone 項目。學習了如何通過修改XAML代碼來添加和配置控件,學習了如何添加資源到項目中並在代碼中調用他們。以及如何添加事件來處理用戶的相應。學習了MainPage.xaml和MainPage.xaml.cs文件如何關聯的。我們將學習更多在接下來的課程中,我們學習了如何觸發方法來控制聲音播放。最后我們學習了如何在虛擬環境下用模擬器來測試我們的應用。
然而,有太多的想談論,。。如果你是一個新手學習XAML,牢固的XAML基礎是特別重要的,接下來的課程我將討論XAML的功能,來建立接下來系列課程的貫穿體系。正如我前面(at the outset)所說,接下的課程都將轉移到API的調用和XAML的運用,例如WPF和Windows Stor應用程序。
