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

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

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

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

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

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

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

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

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

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

三、啟動應(yīng)用

至此已經(jīng)創(chuàng)建了一個非常簡單的應(yīng)用，現(xiàn)在可以開始構(gòu)建、部署和啟動應(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)用的多個選項(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)初始屏幕。初始屏幕由一個圖像（SplashScreen.png）和背景色（在應(yīng)用的清單文件中指定）定義。初始屏幕會消失，然后會出現(xiàn)你的應(yīng)用，外觀如下所示：
   
   按Windows鍵以打開開始菜單然后顯示所有應(yīng)用。請注意，本地部署應(yīng)用會將其添加到開始菜單，若要稍后再次運(yùn)行該應(yīng)用，請?jiān)陂_始菜單中點(diǎn)擊。至此已經(jīng)生成了第一個UWP應(yīng)用！
4. 停止調(diào)試：單擊工具欄中的Stop Debugging或者在Debug菜單中單擊Stop Debugging或者關(guān)閉應(yīng)用窗口。

四、事件處理程序

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

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

private void Button_Click(object sender, RoutedEventArgs e)
{

}

對其進(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)建的一個語音合成對象，提供給該對象一些要說的文本。運(yùn)行該應(yīng)用并單擊按鈕時，計(jì)算機(jī)或手機(jī)會逐字的說出“Hello World”。

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

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