HOW TO:建立 C# Windows Form 應用程式

更新:2007 年 11 月

本主題的目標,是要讓您在使用 Windows Form 建置相當易懂的 C# 程式時,能夠了解 Visual C# Express 版整合式開發環境 (IDE) 的項目。Windows Form 為您的專案提供所的元件 (如:對話方塊、功能表、按鈕以及其他許多控制項),能夠組成標準的 Windows 應用程式使用者介面 (UI)。基本上,這些控制項只是 .NET Framework 類別庫的類別。Visual C# Express 版中的 [設計工具] 檢視,讓您能夠將控制項拖曳到應用程式的主要表單中,並可調整其大小和位置。當您執行這項作業時,IDE 會自動加入原始程式碼以建立適當類別的執行個體,並加以初始化。

這個範例向您示範如何建立自己的 Web 瀏覽器應用程式,您可以自訂該 Web 瀏覽器應用程式,讓它具有通往最喜愛網站的捷徑。

在此章節中,您將學習如何完成下列工作:

  • 建立新的 Windows Form 應用程式。

  • 在 [程式碼] 檢視和 [設計工具] 檢視之間切換。

  • 變更 Windows Form 的屬性。

  • 加入 MenuStrip 控制項。

  • 加入 Button 控制項。

  • 建立並填入 ComboBox 控制項。

  • 使用 WebBrowser 控制項。

  • 建立控制項的事件處理常式。

視訊的連結 如需觀看示範影片,請參閱影片 Video HOW TO:建立 C# Windows Form 應用程式

若要建立 C# Windows 應用程式

  1. 在 [檔案] 功能表上,按一下 [新增專案]。

    [新增專案] 對話方塊便會出現。這個對話方塊會列出 Visual C# Express 版可建立的不同預設應用程式類型。

  2. 選取 [Windows Form 應用程式] 為您的專案類型。

  3. 將應用程式的名稱變更為 Web 瀏覽器。

  4. 按一下 [確定]。

    Visual C# Express 版會為您的專案建立新資料夾,並依專案標題予以命名,然後在 [設計工具] 檢視中顯示標題為 Form1 的新 Windows Form。只要以滑鼠右鍵按一下設計介面或程式碼視窗,並按一下 [檢視程式碼] 或 [設計工具檢視],即可隨時在此檢視和 [程式碼] 檢視之間切換。

    ExpressForm1cs 螢幕擷取畫面

    您在 [設計工具] 檢視中看到的 Windows Form,就是會在開啟應用程式時所開啟之視窗的視覺表示。在 [設計工具] 檢視中,您可以將各種控制項從 [工具箱] 拖放至表單上。這些控制項並不是真正地在「運作」,它們只是一些影像,方便在表單上移動至精確的位置。

    將控制項拖放至表單之後,Visual C# 便會在幕後建立程式碼,使真正的控制項可以在程式執行時正確地放置到位置上。這段原始檔程式碼通常位於檢視外的巢狀檔案中。只要展開 Form1.cs,您就可以在 [方案總管] 中看到這個名為 Form1.designer.cs 的檔案。

  5. 如果是在 [程式碼] 檢視中,只要以滑鼠右鍵按一下程式碼視窗,再按一下 [設計工具檢視],即可切換到 [設計工具] 檢視。現在變更 Windows Form 的大小。

    1. 按一下 Windows Form 的右下角。

    2. 當指標變成雙箭頭時,拖曳表單的一角,直到表單的寬度與深度至少等於畫面的四分之一為止。

      由於這將會是顯示網頁的視窗,因此最好不要過於狹窄。

  6. 確定 [屬性] 視窗已顯示。其預設位置在 IDE 的右下角,但如果需要的話,您也可以將它移動到另一個位置。下圖將其顯示在右上角。如果沒看到 [屬性] 視窗,請按一下 [檢視] 功能表中的 [屬性] 視窗。這個視窗會列出目前所選取 Windows Form 或控制項的屬性,而且您可以在此變更現有的值。

  7. 變更 Windows Form 的標題。

    1. 按一下表單予以選取。

    2. 在 [屬性] 視窗中,向下捲動至 [文字],選取文字 [Form1],並輸入 Web Browser。

    3. 按下 ENTER 鍵或 TAB 鍵,將焦點從 "Text" 文字方塊移開。

    現在,您會看到位於 Windows Form 頂端 (在稱為標題列的區域中) 的文字已經變更。

    ExpressTextWebBrowser 螢幕擷取畫面

    若要快速變更控制項的名稱,請以滑鼠右鍵按一下控制項,並按一下 [屬性]。您可以在 [Name] 屬性中變更控制項的名稱。

  8. 按一下工具列上的 [工具箱] 按鈕,或是按一下 [檢視] 功能表上的 [工具箱]。向下捲動控制項的清單,並展開 [功能表與工具列],直到看到 MenuStrip 為止。將此控制項拖曳至 Windows Form 上的任何位置。

    ExpressMainmenuForm 螢幕擷取畫面

    這個控制項會在表單的頂端建立預設功能表。

  9. 在顯示 [在這裡輸入] 的方塊中,輸入功能表的名稱,在此情況中為 Navigate。當您按下 ENTER 鍵時,便會出現新的空白方塊,可以用來建立其他功能表及功能表項目。在較低的方塊中,輸入 Home。按下 ENTER 鍵便會顯示更多方塊。輸入 Go Back。按下 ENTER 鍵,然後輸入 Go Forward。

    ExpressTypeHere 螢幕擷取畫面

    這些功能表項目會組成您的基本網站巡覽控制項。

  10. 加入按鈕。

    從 [工具箱] 的 [通用控制項] 分類中,將 Button 控制項拖曳至 Windows Form 大約中央、功能表列正下方的位置。在 [屬性] 視窗中,將 [Text] 屬性變更為 Go,而非 [button1],並將看來像 [(名稱)] 的設計名稱,從 [button1] 變更為 goButton。

  11. 加入 [ComboBox]。

    從 [工具箱] 的 [通用控制項] 分類中,拖曳 ComboBox 控制項,並將其置放在新按鈕的左邊。拖曳邊緣和角落,以調整 [ComboBox] 的大小和位置,使該控制項與按鈕對齊。

    注意事項:

    當您在 Windows Form 周圍移動控制項時,便會看到出現藍色線條。這些線條就是輔助線,可以協助水平且垂直地對齊控制項。您也可以一次選取一個以上的控制項以進行對齊。按一下並拖曳這些控制項周圍的選取方塊,或是在按下控制項的同時按住 SHIFT 鍵,即可做到這點。在選取了多個控制項之後,即可使用對齊與調整大小圖示來修改對齊方式和大小。這些圖示出現在 [設計] 視窗頂端的 [配置工具列] 中。

  12. 填入 ComboBox

    ComboBox 提供使用者可從其中選取的選項下拉式清單。在這個程式中,ComboBox 將會包含您最喜愛的網站清單,讓您可以快速存取。

    若要建立網站清單,請選取 ComboBox 並檢視其屬性。選取 [Items] 屬性,您會看到含有省略符號 (…) 按鈕的文字 [(集合)]。按一下此按鈕即可變更 ComboBox 的內容。盡量加入您想要的網站 URL,並在每次加入後按下 RETURN 鍵。

    注意事項:

    請務必在每個網站位址之前加上 http://。

  13. 加入 WebBrowser 控制項。

    從 [工具箱] 的 [通用控制項] 分類中,向下捲動直到您找到 WebBrowser 控制項。將控制項拖曳到 Windows Form。調整 WebBrowser 控制項的大小,使控制項剛好符合 Windows Form 的內部,而不會遮蓋到 ComboBoxButton 控制項。如果 WebBrowser 控制項的大小不好調整,請先將控制項設定為需要的大小,再開啟它的屬性,找出 Dock 設定,並確定將該項設定為 [無]。將 Anchor 設定值設為 [上方]、[下方]、[左方] 或 [右方],會使 WebBrowser 控制項在您調整應用程式視窗大小時正確調整大小。

    WebBrowser 控制項也就是負責呈現網頁之所有費力工作的控制項。您可以透過 WebBrowser 類別的執行個體,在應用程式中存取該控制項。檢視 form1.Designer.cs,您會看到此類別的執行個體,以及以設計工具來表示所加入之其他項目的類別執行個體,都已加入至應用程式的程式碼中。當您對控制項加入事件處理常式,或是呼叫方法時,便會用到這些執行個體。

  14. 加入 Button 控制項的事件處理常式。

    現在,您已經完成應用程式的設計階段,並且開始能夠加入一些程式碼,以提供程式的功能。

    程式必須具有按鈕和每個功能表選項的事件處理常式。事件處理常式是一種方法,會在使用者與控制項互動時執行。Visual C# Express 版會自動為您建立空白的事件處理常式。

    按兩下按鈕,便會看到專案的 [程式碼編輯器]。您也會看到 Click 事件的事件處理常式已經為您建立,也就是使用者按一下按鈕時會出現的事件訊息。請將程式碼加入至事件處理常式方法,使它看起來如下列程式碼。

    private void goButton_Click(object sender, System.EventArgs e)
    {
        webBrowser1.Navigate(new Uri(comboBox1.SelectedItem.ToString()));
    }
    

    這段程式碼採用目前從 [ComboBox] 控制項所選取的項目,也就是包含 Web URL 的字串,並將它傳遞至 Web 瀏覽器的 Navigate 方法。Navigate 方法會載入並顯示該位置的網頁內容。

  15. 加入 MenuStrip 選項的事件處理常式。

    返回 [設計工具] 視窗,並且依序按兩下功能表的每個項目。Visual C# Express 版便會為每個功能表項目建立事件處理常式方法。請編輯這些方法,使它們看起來如下列程式碼。

    private void homeToolStripMenuItem_Click(object sender, System.EventArgs e)
    {
        webBrowser1.GoHome();
    }
    
    private void goForwardToolStripMenuItem_Click(object sender, System.EventArgs e)
    {
        webBrowser1.GoForward();
    }
    
    private void goBackToolStripMenuItem_Click(object sender, System.EventArgs e)
    {
        webBrowser1.GoBack();
    }
    

    每個這些功能表處理常式都會呼叫 WebBrowser 類別所支援的巡覽方法。

    注意事項:

    您可以從這段程式碼看出,原先給予功能表選項的預設名稱可能會混淆不清。因此,建議最好在建立每個功能表控制項時,使用 [屬性] 編輯器變更它們的名稱。然後,處理常式的名稱將會反映功能表選項的名稱。

  16. 請查看 Visual C# 已經為您撰寫好的程式碼。

    Visual C# IDE 已經為您撰寫初始化程式碼。在 [程式碼] 檢視中,找到 Form1 類別的建構函式 (Constructor)。該建構函式具有的 public Form1() 的簽章。以滑鼠右鍵按一下從建構函式內部呼叫的 InitializeComponent 方法,然後按一下 [移至定義]。現在,您可以看到在拖放控制項和設定 [屬性] 視窗中的屬性時,在幕後撰寫的所有程式碼。

  17. 加入一些自己的初始化程式碼。

    最後一個工作,就是將一些自己的初始化程式碼加入至 Form1。建構函式絕不能用來呼叫可能擲回例外狀況的任何程式碼。因此,任何這類程式碼都必須放到其他位置,而此位置就是 Form1_Load 方法。按一下 [程式碼編輯器] 頂端的 [Form1.cs[設計]] 索引標籤,返回 Windows Form。選取表單,並按一下 [屬性] 視窗中的 [事件] 按鈕 (即有閃電的按鈕),然後再按兩下 [載入]。這樣便會加入事件處理常式方法,並將您的游標放置在 [程式碼] 檢視的方法中。

    當使用者啟動您的程式時,Windows 將會傳送 Load 事件以通知應用程式的表單。當表單接收到該事件時,便會呼叫 Form1_Load 方法。為回應事件而呼叫的方法即稱為事件處理常式。系統將會在適當的時候呼叫您的事件,而您要做的就是將程式碼置於要在事件發生時執行的事件處理常式中。

    在 [程式碼] 檢視中,將下列兩行程式碼加入至 Form1_Load 方法。這樣會讓 WebBrowser 控制項顯示電腦的預設首頁,並會設定 ComboBox 的初始值。

    private void Form1_Load(object sender, EventArgs e)
    {
        comboBox1.SelectedIndex = 0;
        webBrowser1.GoHome();
    }
    
  18. 建置並執行程式。

    按下 F5 鍵,建置並執行 Web 瀏覽器。Windows Form 會在畫面上出現,然後顯示電腦的預設首頁。您可以使用 ComboBox 控制項選取網站,並按一下 [Go] 以巡覽至該網站。此功能表選項讓您能夠返回首頁,或者往返先前造訪過的網站。

    MSN 範例螢幕擷取畫面

    如果您是 C# 程式設計的新手,最好請先閱讀 C# 語言入門 一節。如果想要更了解 Visual C# Express 版開發環境,尤其是如何使用 IntelliSense 來建立主控台應用程式,請參閱 HOW TO:建立 C# 主控台應用程式。若要學習如何建置 Windows Presentation Foundation 應用程式,請參閱 HOW TO:建立 C# WPF 應用程式

請參閱

工作

HOW TO:建立 C# 主控台應用程式

HOW TO:建立 C# WPF 應用程式

概念

C# 語言入門

其他資源

建立您的第一個 Visual C# 應用程式

Visual C# Express 秘訣和訣竅