UWP開發(fā)——第一個小程序 Hello, world!

開發(fā)環(huán)境配置好之后误趴,是不是開始手癢癢了~下面讓我們創(chuàng)建第一個Win10的UWP小程序吧~

首先雙擊Microsoft Visual Studio圖標(以下簡稱VS)霹琼,打開VS程序,此時出現(xiàn)了一個Start Page頁面凉当,點擊左側(cè)“New Project”創(chuàng)建一個新項目枣申。

在彈出的頁面中,選擇Blank App(默認選中此項)看杭,在對話框下半部分輸入項目名稱和項目目錄忠藤,點擊“OK”


創(chuàng)建空白項目

在接下來彈出的選擇框中可以看到此項目支持的系統(tǒng)版本,默認設(shè)置都合適楼雹,點擊“OK”模孩,等待1s左右,一個Win10的項目就創(chuàng)建好了贮缅。


項目支持的系統(tǒng)版本

讓我們看看Win10的項目結(jié)構(gòu)(和Xcode不同的是榨咐,目錄結(jié)構(gòu)默認放在右側(cè)Solution Explorer選項卡中)


目錄結(jié)構(gòu)

默認空白項目中包含哪些內(nèi)容?(以下內(nèi)容參考了官方開發(fā)文檔)

App.xaml 和 App.xaml.cs

App.xaml 是你聲明應(yīng)用中所使用的資源的位置谴供。

App.xaml.cs 是 App.xaml 的代碼隱藏文件块茁。 與所有代碼隱藏頁面一樣,它包含一個調(diào)用InitializeComponent方法的構(gòu)造函數(shù)桂肌。 你不必編寫InitializeComponent方法数焊。 該方法由 Visual Studio 生成,其主要作用是初始化在 XAML 文件中聲明的元素轴或。(App.xaml.cs 是應(yīng)用的入口點昌跌,App.xaml.cs 還包含一些處理應(yīng)用激活和掛起的方法)

MainPage.xaml

用來為應(yīng)用定義 UI。 有兩種方式照雁,類似iOS開發(fā)中storyboard設(shè)計UI和代碼創(chuàng)建UI蚕愤,在Win10開發(fā)中可以直接使用 XAML 標記(寫代碼)添加元素答恶,也可以使用 Visual Studio 提供的設(shè)計工具(所見即所得)。

同理萍诱,MainPage.xaml.cs 是 MainPage.xaml 的代碼隱藏頁面悬嗓,可以在其中添加應(yīng)用邏輯和事件處理程序。

這兩個文件一起定義稱為MainPage的新類裕坊,該類繼承自HelloWorld命名空間中的Page包竹。

Package.appxmanifest

描述應(yīng)用的清單文件:應(yīng)用的名稱、描述籍凝、磁貼周瞎、起始頁等等。

包括應(yīng)用包含的文件列表饵蒂。

Assets 圖像文件夾

Assets/Square150x150Logo.scale-200.png 表示“開始”菜單中的應(yīng)用声诸。

Assets/StoreLogo.png 表示 Windows 應(yīng)用商店中的應(yīng)用。

Assets/SplashScreen.scale-200.png 是應(yīng)用啟動時顯示的初始屏幕退盯。


了解完整個項目的結(jié)構(gòu)之后彼乌,讓我們添加一個按鈕,并處理按鈕的點擊事件吧~

雙擊MainPage.xaml文件(第一次打開需要2s左右時間加載控件)渊迁,可以看到在屏幕中央有一個比較小的空白界面(默認手機屏幕大形空铡),在該窗口的右下角可以設(shè)置這個界面的顯示比例(我一般都設(shè)置為33.3%琉朽,大小適中)


MainPage.xaml文件

單擊左側(cè)垂直的“Toolbox”毒租,打開 UI 控件列表 (可以單擊彈出的列表選框的右上角的固定圖標使其始終可見)


Toolbox

展開“Common XAML Controls”(常用的xaml控件)將Button拖動到設(shè)計畫面的中間。


添加Button

此時查看XMAL(在此窗口的左下角點擊XMAL按鈕)代碼箱叁,可以看到如下代碼:

(粘貼代碼時發(fā)現(xiàn)直接在簡書的編輯頁面出現(xiàn)了一個按鈕 = =)蝌衔,因此將代碼截了個圖


按鈕的xmal代碼

還好在大學期間學過html標簽~能看懂此代碼的大致含義,對比按鈕的顯示樣式蝌蹂,可以看出Content中的內(nèi)容即為按鈕的標題,雙擊Button文本曹锨,改為“Hello World”(或者你想要改成的任意文本)孤个,再點擊Design,發(fā)現(xiàn)界面上的按鈕標題果然改成了“Hello World”


是不是有點躍躍欲試沛简,想看一下運行的效果呢~

點擊菜單欄下側(cè)的綠色三角按鈕齐鲤,默認選中“Local Machine”,也就是在本機器上調(diào)試椒楣,點擊Local Machine给郊,等待程序運行


這就是該項目在本機器上運行的樣子!

那在手機上呢捧灰?

關(guān)閉這個調(diào)試的窗口淆九,或者在VS上點擊紅色正方形(Shift+F5),結(jié)束本次調(diào)試,點擊Local Machine右側(cè)的向下按鈕炭庙,選擇任意一個內(nèi)存小于你現(xiàn)在用的電腦的Mobile Emulator(親測用Surface Pro3開發(fā)時只要打開瀏覽器饲窿,內(nèi)存就不夠手機模擬器的調(diào)試了…),再次點擊運行按鈕(或快捷鍵F5)

此時屏幕上出現(xiàn)了一個Windows Phone模擬器焕蹄,并運行著我們剛寫好的項目:


Windows Phone模擬器

體驗不亞于開發(fā)iOS程序~下面我們給按鈕加一個點擊事件吧

首先停止調(diào)試程序(不停止不能繼續(xù)編輯項目)逾雄,雙擊xaml中的按鈕,VS會自動創(chuàng)建此按鈕的點擊事件腻脏,并且光標跳轉(zhuǎn)到該代碼的位置(這點比iOS開發(fā)的體驗好多了)


按鈕點擊事件的代碼


當然我們也可以自己用代碼手動創(chuàng)建這個點擊事件鸦泳,這里還有另外一種方式:

單擊按鈕選中它,然后訪問右下方的“屬性”窗格永品,切換到“事件”(一個小閃電圖標)做鹰,也可以添加按鈕的點擊事件的代碼

下面給按鈕的點擊事件加一些代碼,實現(xiàn)如下兩個功能

①點擊按鈕腐碱,彈出對話框誊垢,上面顯示“Hello World”

②點擊按鈕,讓系統(tǒng)朗讀“Hello World”

下面分別是兩個事件的代碼:

private async void button_Click(object sender, RoutedEventArgs e)

{

? ? ? await new MessageDialog("Hello World").ShowAsync();

}

注意:MessageDialog方法需要導(dǎo)入命名空間症见,可以根據(jù)VS的提示自動導(dǎo)入喂走,

private async void button_Click(object sender, RoutedEventArgs e)

{

? ? ? MediaElement mediaElement = new MediaElement();

? ? ? var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();

? ? ? Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");

? ? ? mediaElement.SetSource(stream, stream.ContentType);

? ? ? mediaElement.Play();

}


細心的朋友發(fā)現(xiàn)這兩個方法前面都加了關(guān)鍵字“async”,由于方法內(nèi)部的方法使用了async關(guān)鍵字谋作,因此該方法也需要async關(guān)鍵字修飾芋肠,因為才開始學習Win10開發(fā),只知道async的意思是異步調(diào)用遵蚜,但是究竟為什么是異步的操作帖池,而不是像iOS一樣UI相關(guān)的操作都放在主線程中執(zhí)行,還需要以后的學習來解答啦~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末吭净,一起剝皮案震驚了整個濱河市睡汹,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌寂殉,老刑警劉巖囚巴,帶你破解...
    沈念sama閱讀 216,651評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異友扰,居然都是意外死亡彤叉,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評論 3 392
  • 文/潘曉璐 我一進店門村怪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來秽浇,“玉大人,你說我怎么就攤上這事甚负〖砘溃” “怎么了审残?”我有些...
    開封第一講書人閱讀 162,931評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長击喂。 經(jīng)常有香客問我维苔,道長,這世上最難降的妖魔是什么懂昂? 我笑而不...
    開封第一講書人閱讀 58,218評論 1 292
  • 正文 為了忘掉前任介时,我火速辦了婚禮,結(jié)果婚禮上凌彬,老公的妹妹穿的比我還像新娘沸柔。我一直安慰自己,他們只是感情好铲敛,可當我...
    茶點故事閱讀 67,234評論 6 388
  • 文/花漫 我一把揭開白布褐澎。 她就那樣靜靜地躺著,像睡著了一般伐蒋。 火紅的嫁衣襯著肌膚如雪工三。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,198評論 1 299
  • 那天先鱼,我揣著相機與錄音俭正,去河邊找鬼。 笑死焙畔,一個胖子當著我的面吹牛掸读,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播宏多,決...
    沈念sama閱讀 40,084評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼儿惫,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了伸但?” 一聲冷哼從身側(cè)響起肾请,我...
    開封第一講書人閱讀 38,926評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎更胖,沒想到半個月后筐喳,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,341評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡函喉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,563評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了荣月。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片管呵。...
    茶點故事閱讀 39,731評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖哺窄,靈堂內(nèi)的尸體忽然破棺而出捐下,到底是詐尸還是另有隱情账锹,我是刑警寧澤,帶...
    沈念sama閱讀 35,430評論 5 343
  • 正文 年R本政府宣布坷襟,位于F島的核電站奸柬,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏婴程。R本人自食惡果不足惜廓奕,卻給世界環(huán)境...
    茶點故事閱讀 41,036評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望档叔。 院中可真熱鬧桌粉,春花似錦、人聲如沸衙四。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽传蹈。三九已至押逼,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間惦界,已是汗流浹背挑格。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留表锻,地道東北人恕齐。 一個月前我還...
    沈念sama閱讀 47,743評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像瞬逊,于是被迫代替她去往敵國和親显歧。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,629評論 2 354

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,081評論 25 707
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理确镊,服務(wù)發(fā)現(xiàn)士骤,斷路器,智...
    卡卡羅2017閱讀 134,652評論 18 139
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫蕾域、插件拷肌、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,095評論 4 62
  • 直到現(xiàn)在我才發(fā)現(xiàn)自己是堅強的, 人真的好累旨巷,可是我挺過來了巨缘,我不知道為什么現(xiàn)在的我開始懷疑人生,對未來感到失望采呐,很...
    1703d4f59593閱讀 143評論 0 0
  • 目錄 上一章 徐玲飛和張麗娜雖然都有車若锁,但是知道今晚會喝酒,所以誰也沒開斧吐。夜深露重又固,徐玲飛和張麗娜都懶得回家仲器,所以...
    小靜讀童書閱讀 707評論 0 4