Visual Studio是一套完備的工具和服務(wù)，可幫助您在Microsoft平臺(tái)或其他平臺(tái)創(chuàng)建各種各樣的應(yīng)用程序。本文旨在指導(dǎo)如何在Windows Visual Studio平臺(tái)上使用XAML和C#創(chuàng)建一個(gè)簡(jiǎn)單的“Hello World”應(yīng)用。通過本文你將了解到面向Windows 10和UWP如何創(chuàng)建新的Visual Studio項(xiàng)目、如何在編寫XAML時(shí)更改起始頁(yè)上的UI以及怎么在本地運(yùn)行Visual Studio項(xiàng)目等等。

開始之前，如果需要下載安裝Visual Studio 2017可以點(diǎn)擊下方下載鏈接和安裝教程鏈接。

Microsoft Visual Studio 2017安裝和使用教程>>

一、在Visual Studio中創(chuàng)建新項(xiàng)目

1. 啟動(dòng)Visual Studio 2017。
2. 從File菜單中，選擇New>Project打開項(xiàng)目對(duì)話框。
3. 從左側(cè)的模板列表選擇Installed>Visual C#>Windows Universal查看項(xiàng)目模板列表。如果未看到任何通用模板，可能是缺少UWP應(yīng)用的組件，可以通過在New Project對(duì)話框中單擊打開Visual Studio安裝來重復(fù)安裝流程并添加UWP支持。
   
4. 選擇Blank APP(Universal Windows)模板，輸入“Hello World”作為名稱，確定。
   

如果你是首次使用Visual Studio，則可能會(huì)看到要求啟用Developer Mode的設(shè)置對(duì)話框。開發(fā)人員模式是一種用于啟用某些功能，如允許直接運(yùn)行應(yīng)用而不是從應(yīng)用商店運(yùn)行的特殊設(shè)置。這里需要選擇Developer Mode，然后點(diǎn)擊OK并關(guān)閉對(duì)話框。

1. 將顯示Target Version/Minimum Version對(duì)話框，默認(rèn)設(shè)置均適用于本教程，因此選擇OK以創(chuàng)建項(xiàng)目。
   
2. 新項(xiàng)目打開時(shí)，項(xiàng)目文件將顯示在右側(cè)的Solution Explorer Pane窗口中，若要查看你的文件請(qǐng)選擇Solution Explorer Tab選項(xiàng)卡而不是Properties Tab選項(xiàng)卡。
   

盡管Blank APP(Universal Windows)為最基本的模板，但該模板仍包含很多文件。這些文件是使用C#的所有UWP應(yīng)用必不可少的文件。在Visual Studio中創(chuàng)建的每一個(gè)項(xiàng)目都包含這些文件。

二、使用設(shè)計(jì)器視圖添加按鈕

1. 在設(shè)計(jì)視圖中雙擊MainPage.xaml打開，你將發(fā)現(xiàn)圖形視圖位于屏幕頂部，而XAML代碼視圖位于底部。我們可以對(duì)任一視圖進(jìn)行更改，但現(xiàn)在使用圖形視圖。
   
2. 單擊左側(cè)垂直的Toolbox選項(xiàng)，打開UI空間列表（可以單擊標(biāo)題欄中的固定圖表使其始終可見）。
   
3. 展開Common XAML Controls，然后將Button拖動(dòng)到設(shè)計(jì)畫面的中間。
   
   如果查看XAML代碼窗口，你會(huì)發(fā)現(xiàn)Button已添加到此窗口中：

   <Button x:name="button" Content="Button" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>

4. 更改按鈕的文本：在XAML代碼視圖中單擊一下，然后將內(nèi)容從“Button”更改為“Hello World”。

   <Button x:name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>

   注意設(shè)計(jì)畫布中顯示的按鈕如何更新顯示新文本。
   

三、啟動(dòng)應(yīng)用

至此已經(jīng)創(chuàng)建了一個(gè)非常簡(jiǎn)單的應(yīng)用，現(xiàn)在可以開始構(gòu)建、部署和啟動(dòng)應(yīng)用并查看其外觀。你可以在本地計(jì)算機(jī)、模擬器、仿真器或者在遠(yuǎn)程設(shè)備上調(diào)試應(yīng)用。下面是Visual Studio中的目標(biāo)設(shè)備菜單。

默認(rèn)情況下，應(yīng)用在本地計(jì)算機(jī)上運(yùn)行。目標(biāo)設(shè)備菜單提供用于在桌面設(shè)備上調(diào)試應(yīng)用的多個(gè)選項(xiàng)。如模擬器、本地計(jì)算機(jī)和遠(yuǎn)程計(jì)算機(jī)。

在本地計(jì)算機(jī)上開始調(diào)試：

1. 在Standard工具欄上的目標(biāo)設(shè)備菜單Local Machiine中，確保已選中Local Machine。
2. 單擊工具欄或Debug餐單中的Start Debugging按鈕或者按F5。
3. 應(yīng)用將在窗口中打開，并且將首先顯示默認(rèn)初始屏幕。初始屏幕由一個(gè)圖像（SplashScreen.png）和背景色（在應(yīng)用的清單文件中指定）定義。初始屏幕會(huì)消失，然后會(huì)出現(xiàn)你的應(yīng)用，外觀如下所示：
   
   按Windows鍵以打開開始菜單然后顯示所有應(yīng)用。請(qǐng)注意，本地部署應(yīng)用會(huì)將其添加到開始菜單，若要稍后再次運(yùn)行該應(yīng)用，請(qǐng)?jiān)陂_始菜單中點(diǎn)擊。至此已經(jīng)生成了第一個(gè)UWP應(yīng)用！
4. 停止調(diào)試：?jiǎn)螕艄ぞ邫谥械腟top Debugging或者在Debug菜單中單擊Stop Debugging或者關(guān)閉應(yīng)用窗口。

四、事件處理程序

事件處理程序聽起來很復(fù)雜，但它只是事件發(fā)生，如用戶單擊按鈕時(shí)調(diào)用的代碼的另一個(gè)名稱。雙擊設(shè)計(jì)畫布中的按鈕控件，讓Visual Studio為該按鈕創(chuàng)建事件處理程序。也可以手動(dòng)創(chuàng)建所有代碼。

編輯MainPage.xaml.cs（即代碼隱藏頁(yè)面）中的事件處理程序代碼。

private void Button_Click(object sender, RoutedEventArgs e)
{

}

對(duì)其進(jìn)行更改以后如下所示：

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();
}

此代碼使用一些Windows API創(chuàng)建的一個(gè)語音合成對(duì)象，提供給該對(duì)象一些要說的文本。運(yùn)行該應(yīng)用并單擊按鈕時(shí)，計(jì)算機(jī)或手機(jī)會(huì)逐字的說出“Hello World”。

觀看下方視頻了解更多詳細(xì)信息：

想要購(gòu)買Visual Studio正版授權(quán)，或者獲取更多該產(chǎn)品相關(guān)信息的朋友可以點(diǎn)擊" "~