開始使用:使用 Visual Studio

Applies to Windows and Windows Phone

使用 Microsoft Visual Studio

現在我們回到您先前建立的 MyApp 專案,為您示範如何使用 Visual Studio 整合式開發環境 (IDE)。

Xcode 開發人員應該熟悉下圖中的預設檢視,其中左窗格中是原始程式檔,編輯器 (UI 或程式碼) 位於中央窗格,控制項及其屬性則位於右窗格。

Xcode 開發環境

Microsoft Visual Studio 很相似,但預設檢視的控制項在 [工具箱] 的左邊。原始檔位於右邊的 [方案總管],而屬性位於右邊的 [屬性]。此配置如下圖所示:

Visual Studio 開發環境

附註  請注意列在 [方案總管] 檢視的右欄中的檔案如何分成三個主要區段:MyApp.WindowsMyApp.WindowsPhone 以及 MyApp.Shared。因為這是一個通用的 Windows 應用程式,因此存在這些區段。當必要時,原始程式檔可以存在於兩個專案的 MyApp.Shared 底下,或平台專屬的區段底下。

如果您希望原始程式檔位於左側而控制項位於右側,可以重新排列 Visual Studio 中的窗格。例如,若要將 [工具箱] 從畫面的左側移到右側,請按住 [工具箱] 窗格的標題列,開始拖曳它,然後將它放置在畫面中央顯示的最右邊放置目標。Visual Studio 會顯示一個有陰影的方塊,讓您知道放置 [工具箱] 之後它會停駐的位置。

為了讓您的 IDE 看起來像上圖一樣,請按照下列步驟操作:

  1. 在 [方案總管] 中,按住 (或以滑鼠右鍵按一下) MyApp.Windows 底下的 MainPage.xaml 來開啟它。
  2. 點選左側的 [工具箱] 以顯示它。接著,在 [工具箱] 窗格的標題列上,點選大頭針圖示來釘選它,如下圖中所示。
在 Visual Studio 中釘選工具箱

頁首

新增控制項、設定其屬性以及回應事件

現在可將一些控制項新增到您的 MyApp 專案。然後變更某些控制項的屬性,以及編寫一些程式碼以回應其中一個控制項的事件。

若要在 Xcode 中新增控制項,您要開啟所需的 .xib 檔案,然後新增控制項,像是 Round Rect ButtonLabel,如下圖中所示。在 Visual Studio 中,.xaml 檔案就類似 .xib 檔案。

在 Xcode 中設計 UI

讓我們在 Visual Studio 執行類似的步驟。在 [工具箱] 中,按住 Button 控制項,然後將它放置到 MainPage.xaml 檔案的設計表面上。對 TextBlock 控制項執行相同的動作,如下圖中所示。

在 Visual Studio 中設計 UI

請注意,Visual Studio 與 Xcode 不一樣,後者將配置及繫結資訊儲存在 .xib 檔案內部,而前者的 .xaml 檔案會用豐富的可編輯宣告式語言來顯示這些詳細資料。如需有關 Extensible Application Markup Language (XAML) 的詳細資訊,請參閱 XAML 概觀。[設計] 窗格中顯示的所有物件都會定義於 [XAML] 窗格中。XAML 窗格能夠更精確地控制所需的細節,隨著您了解得越多,開發程式碼的速度也能加快。不過,在目前這個階段,讓我們先只專注於 [設計] 窗格和 [屬性] 窗格。

我們現在來變更按鈕的內容及名稱。若要在 Xcode 中變更按鈕的內容,請在按鈕的屬性窗格中變更 [標題] 方塊的值,如下圖中所示。

Xcode 中的屬性視窗

在 Visual Studio 中您會執行類似動作。在 [設計] 窗格中,點選按鈕讓它成為焦點。接著,若要變更按鈕的內容,請在 [屬性] 窗格中,將 [內容] 方塊的值從 "Button" 變更為 "Press Me"。接下來,若要變更按鈕的名稱,請將 [名稱] 方塊的值從 "<No Name>" 變更為 "myButton",如下圖中所示。

Visual Studio 中的按鈕屬性視窗

現在,我們來編寫一些程式碼,在使用者點選按鈕之後將 TextBlock 控制項的內容變更為 "Hello, World!"。

在 Xcode 中,您可編寫程式碼來產生事件行為與控制項的關聯,然後再將該程式碼與控制項關聯,與下列程式碼和圖表類似。


// Objective-C header.

-(IBAction) buttonPressed: (id) sender;


// Objective-C implementation.

-(IBAction) buttonPressed: (id) sender {

}

在 Xcode 中編寫以關聯按鈕和事件

請注意,在 Xcode 中,您也可以關聯事件程式碼與控制項,如下圖中所示。

在 Xcode 中編寫以關聯按鈕和事件的另一種方式

Visual Studio 很相似。[屬性] 右上角有一個閃電按鈕。這裡列出了與所選控制項關聯的事件,如下圖中所示。

Visual Studio 中的按鈕事件清單

若要為按鈕的 Click 事件新增程式碼,請先在 [設計] 窗格中點選按鈕。然後點選閃電按鈕,並按住 [Click] 標籤旁的方塊。 Visual Studio 會將 "myButton_Click" 文字新增到 [Click] 方塊,然後在 MainPage.xaml.cs 檔案中新增並顯示對應的事件處理常式,如下面的程式碼所示。


private void myButton_Click(object sender, RoutedEventArgs e)
{

}

現在變更 TextBlock 控制項的名稱。在 Xcode 中,您需要編寫下列程式碼,並關聯控制項與其定義,如下圖中所示。


// Objective-C header.

IBOutlet UILabel *myLabel;

在 Xcode 中編寫以關聯標籤及其定義

請注意,在 Xcode 中,您也可以關聯程式碼及其定義,如下圖中所示。

在 Xcode 中編寫以關聯標籤及其定義的另一種方式

您在 Visual Studio 中要這樣做,請如下圖中所示進行:

  1. 點選 MainPage.xaml 檔案索引標籤。
  2. 在 [設計] 窗格中,點選 [TextBlock] 控制項。
  3. 在 [屬性] 窗格中,點選扳手按鈕以顯示其屬性。
  4. 在 [名稱] 方塊中,將 "<No Name>" 變更為 "myLabel"。
Visual Studio 中的標籤屬性視窗

現在要新增一些程式碼到按鈕的 Click 事件。若要這樣做,請點選 MainPage.xaml.cs 檔案,然後新增下列程式碼到 myButton_Click 事件處理常式。


private void myButton_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.    
    myLabel.Text = "Hello, World!";
}

前面的程式碼與您在 Xcode 中編寫的相似,如下所示。


-(IBAction) buttonPressed: (id) sender {
    myLabel.text = @"Hello, World!";
}

最後,若要執行應用程式,請在 Visual Studio 中,確認 MyApp.Windows 為粗體 (表示這是預設的 StartUp 專案),並點選 [偵錯] 功能表,然後點選 [開始偵錯] (或只按下 F5)。在應用程式啟動之後,點選 [Press Me]"" 按鈕,就會看到標籤的內容從 "TextBlock" 變更為 "Hello, World!",如下圖中所示。

第一個逐步解說的執行結果:Hello, World!

若要退出應用程式,請返回 Visual Studio,點選 [偵錯] 功能表,然後點選 [停止偵錯] (或只按下 SHIFT + F5)。

您可以針對 MyApp.WindowsPhone 分支底下的 MainPage.xaml 遵循完全相同的步驟,以便為 Windows Phone 專案重複這個程序。當然,如果這就是您的應用程式所執行的程序,您可以將 MainPage.xaml 檔案拖曳到 MyApp.Shared 分支,然後從 MyApp.WindowsPhone 分支底下刪除現有的 MainPage.xaml。這將會在兩個平台之間共用 MainPage.xaml 檔案,省去您的部分工作。

下一步

開始使用:常用控制項

 

 

顯示:
© 2014 Microsoft