---
tags: 視窗程式設計
---

# 視窗程式設計：基本視窗程式設計

這邊跟同學介紹，最基本的視窗程式設計，透過簡單的界面設計和程式，讓同學初步瞭解視窗程式設計的基本概念。

## 開啟新專案

要進行視窗程式設計，一定要先開一個專案，開啟新專案之前有教學過，如果你忘記了或不太熟悉，請點選[這裡](https://hackmd.io/CLPlEpWLSIO_aAlsoYTpxQ)。

:::success
我們的專案名稱可以叫做「HelloWorld」，簡單就好。
:::

專案開啟成功之後，請同學可以參考「[工作環境](https://hackmd.io/@chohsunlu/rkHZSXE3p)」章節介紹怎麼設定基本操作畫面，這邊再讓同學複習回想一下。

## 開始吧！

接下來我們開始介紹一般的視窗程式要怎麼進行製作，其實大概就以下兩個主要流程：

:::success
1. 介面基本設計
2. 程式撰寫
:::

所以我們依序讓同學先製作一個最簡單的視窗程式，視窗裡面只有一個按鍵，按下按鍵之後，就會顯示一段簡單的訊息。

## 第一步：進行介面基本設計

視窗應用程式和一般電腦程式不同，你除了程式邏輯要思考之外，連同使用者介面要一起考慮進去。因為...

:::info
對使用者來說，介面就是他的一切。
:::

程式寫得再漂亮，使用者也看不到（但這句話不是說程式寫很爛沒關係），但是介面太難用，使用者可是一眼就看得出來。所以請同學記得，設計一個一看就知道怎麼用的使用者介面，是一門技術更是藝術。

因此我們先開始學習如何「拉」出一個簡單的視窗程式介面。請先看以下畫面...


上面的畫面是一個視窗外觀的設計，你可以看成是一個沒有放任何操作介面的空白視窗，所以，我們打算讓這個視窗有東西可以操作，就要放一些可以操作的按鍵、表單、下拉選單、文字輸入方塊 ...。

:::success
訣竅：你可以用「Ctrl+滾輪」縮放畫面、按「空白鍵+滑鼠左鍵」移動畫面
:::

這邊跟同學說明，視窗上面的各種可以操作的東西，專有名詞叫做：

:::info
**控制項（台灣）或控件（中國），英文是 Controls**，所以之後我們都會用「控制項」來描述這些按鍵、表單、下拉選單、文字輸入方塊等物件。
:::

要怎麼放這些控制項到視窗上面？很簡單，請選擇「==**工具箱**==」，就可以看到類似以下的控制項選單，你可以注意到，其實 Visual Studio 就有很多預設的控制項可以使用。

那怎麼放到我們的空白視窗裡面呢？很簡單，請找一下「**Button**」這個控制項，選擇它之後，然後再到空白視窗拖拉出你要的尺寸，就可以新增一個的「**按鍵控制項**」，你的視窗裡面就有一個可以按的按鍵，按鍵大小可以之後再調整。


:::success
大多數的視窗程式介面設計，都是像這樣新增控制項來設計的，很簡單吧！
:::

### 如何儲存、測試程式

放好一個按鍵之後，在寫程式之前，我們先教同學如何儲存與測試程式？

#### 儲存程式

儲存程式的方式很簡單，不過有兩種儲存方式：「==**儲存單一程式**==」與「==**儲存全部程式**==」。你只要點選以下畫面的磁碟片圖示就可以，左邊是「儲存單一程式」，右邊則是「儲存全部程式」。


那這兩者差別在哪邊呢？當你按下「儲存單一程式」，只會儲存你正在編輯的頁籤；當你按下「儲存全部程式」，則是全部儲存所有未儲存的頁籤。

例如下圖，只要是還沒有儲存的頁籤會有一個「**＊**」，如果按的是「儲存單一程式」，就只會儲存當下你選擇的頁籤，因此按下「儲存全部程式」，則是只要有「＊」的頁籤通通都會被儲存。


:::danger
建議同學隨時記得要儲存，不然電腦當機就慘了。如果你真的不知道該選哪一個儲存方式，那就先按「儲存全部程式」就好。
:::

#### 測試程式

視窗介面和程式，當你製作到一定程度的時候，你都會想要進行簡單測試，來確認寫的東西對不對？測試程式的方式很簡單，請在工具列上面找到一個跟以下一樣的「==**開始**==」按鍵，只要把它按下去，程式就會開始測試執行。

:::success
訣竅：按快速鍵「F5」也可以測試程式
:::


如果你按下去，就會出現一個剛剛我們放了一個按鍵控制項的視窗。之後，當我們要做測試，除非程式編譯有問題，造成無法執行，不然你應該都會看到一個視窗跑出來，你可以繼續在測試這個程式有沒有問題？


結束測試也很簡單，請把那個跳出來的程式關掉，就可以結束測試。

### 增加另一個控制項：輸入文字框

請同學再到「工具箱」點選「**TextBox（輸入文字框）**」控制項，再到視窗中拖拉出來。

「輸入文字框」是一個可以讓你輸入文字的框框，也是一個常見的控制項。你可以調整視窗、按鍵、輸入文字框的大小，調整成你想要的大小，就像下圖的樣子。



OK，最簡單的介面我們大致完成了，接下來我們繼續完成視窗介面的細節設定。

### 控制項的屬性設定

完成到這裡，大多數同學應該都大致熟悉你要怎麼放置控制項了，那同學你可能就會好奇：如果我想把按鍵的文字修改、我想把按鍵放大一點（其實剛剛你做過了）、我想把字體改一下...要怎麼做呢？

其實以上的修改，都是在修改控制項的「==**屬性（Property）**==」，像我們剛剛說到的字體大小、顏色、物件大小...等等都是所謂的屬性。一個控制項可以調整的屬性「非常多」，甚至你可以自訂更多的屬性，所以不可能上課全說完，但常用的大概也都是之前舉例過的屬性，我們有機會都會說明。

不過，這邊跟同學說明，最重要的屬性就是這個「==**控制項名稱（Name）**==」，也就是這個控制項的「**名字**」叫什麼？

通常，我們要對一個控制項取名字，有一些基本規範，之後老師會給你一些建議，這邊你先記住一個原則：

:::info
一支視窗應用程式裡的控制項名稱，都要**獨一無二**。
:::

意思就是控制項不要有重複的名稱，不然程式一定出錯。先記住這一點。

那怎麼修改控制項屬性呢？如果你忘掉怎麼「**屬性視窗**」，點選視窗上方的「檢視」，再選擇「**屬性視窗**」，或者按 **F4** 也可以。通常按下去之後就會在「**方案總管**」下方顯示。


這個屬性視窗內容會隨著你選擇的控制項變動，也就是選擇按鍵，會顯示按鍵可以修改的屬性；選擇輸入文字框，會顯示輸入文字框能修改的屬性。

我們先試著修改按鍵上的名稱與顯示文字，所以請依照以下的步驟：

1. 點選你在視窗上面新增的按鍵
2. 選擇「(Name)」，輸入「btnGo」，這是按鍵的名稱
3. 選擇「Text」，輸入「開始」，這是設定按鍵上面顯示的文字



修改後，你應該會看到按鍵會變成這個樣子，現在你應該初步知道屬性是在做什麼的吧？


同樣的輸入文字框也是一樣，請依照以下類似的步驟來修改。試試看吧！

1. 選擇輸入文字框
2. 選擇「(Name)」，輸入「txtShow」，
3. 選擇「Text」，清除掉裡面的內容，我們要讓它維持空白



完成後，我們的視窗介面就完成了。

## 第二步：進行程式撰寫

接下來，我們要開始進行程式的撰寫，其實，寫程式就是「**設計一個資料處理的流程**」。這就像是你要安排一個「工作流程」進行是一樣的概念，我們日常生活都是在完成很多大大小小的工作，只要能夠依照順序進行，就能完成一項一項的工作。

那我們要設計什麼樣的「工作流程」？很簡單：

:::info
按下按鍵，然後在輸入文字框顯示文字。
:::

非常好理解對吧？其實基本的視窗程式設計就像這樣，例如：「按下一個按鍵，產生另一個結果」；或者，「輸入一串文字，按下按鍵，顯示一個東西」。我們先讓同學製作簡單的，慢慢再增加複雜度。

然後，**請在按鍵上「點兩下滑鼠左鍵」**，會立刻把你帶到下圖的視窗裡，其實就是切換成「Form1.cs」程式碼檔案的頁籤，我們的程式要寫在這個檔案裡。


等一下我們說明一下這一長串的程式碼大概都是什麼內容，但我們先不管，請在上圖黃色框框的區段，直接填入以下這些程式碼，「==txtShow.Text = "Hello World!";==」。

就像以下的樣子：

private void btnGo_Click(object sender, EventArgs e)
{
    txtShow.Text = "Hello World!"; //你可以直接複製貼過去
}

這樣就寫完了，沒錯就這麼短，請按下測試的「==**開始**==」按鍵，程式就會開始測試執行。


你會看到以下的測試視窗畫面。


請按下視窗上的按鍵，你應該就可以看到輸入文字框有一段文字「Hello World!」。恭喜你，完成第一支最簡單的視窗程式了！


### 基本C#視窗程式架構

現在我們來跟同學介紹基本的C#視窗程式架構，不要看到密密麻麻的程式碼就昏倒了，其實看程式碼有訣竅，先學著用 ==**大括號「{」與「}」**== 來分隔程式區塊，底下就是我們剛剛編輯的所有程式碼，請同學先試試看用大括號來分隔出來程式區塊。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace Helloworld
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void btnGo_Click(object sender, EventArgs e)
        {
            txtShow.Text = "Hello World!"; //你可以直接複製貼過去
        }
    }
}

你有成功的看得出來程式的區塊嗎？來跟下圖比較一下，有沒有跟你想的一樣？


接下來，跟同學解釋以上的區塊到底在幹嘛的，可能以下的說明你不太理解，沒關係，先有粗淺的概念就好，我們之後有機會都會再進一步說明。

**1. 引用函式庫區段**

這裡是上面的紅色框線區段。什麼是「函式庫」？你可以先想像成這是好多種的程式庫，如果我們要來使用這些有特定用途的程式，我們要先「引用它」，然後才能運用這些程式。

:::info
就好像如果你要修車，可能會去買一套工具箱，裡面有各種拆卸車輛零件的工具。

函式庫就是「工具箱」。

引用函式庫，就類似「買工具箱來用」。
:::

**2. 專案命名空間 namespace**

這裡是下方的紅色框線區段。其實聽到命名空間真的聽起來很不容易理解，但是你可以注意看，關鍵字 namespace 旁邊有一個「HelloWorld」，這個會跟你的專案檔名稱一模一樣，這樣你可以大概理解什麼叫命名空間了吧？其實就是你的專案名稱。

:::danger
沒事別亂動命名空間！可能造成編譯錯誤。
:::

**2. （視窗）互動邏輯類別**

這裡是下方紅色框線區段中的綠色區段。這裡定義了我們設計的視窗介面，要有什麼樣的程式邏輯，也就是說：

:::info
我們大多數都在這裡寫程式！
:::

同樣的，請注意以下程式碼：

public partial class Form1 : Form
{
    ...
}

請注意「Form1」，這也剛好就是你製作的「**視窗介面名稱**」，請看以下的圖片，這是之前我們看過的頁籤，你可以注意到，檔名也是「Form1.cs」。


再複習一下，這兩個頁籤通常是一組的。「**Form.cs**」檔案是視窗畫面與程式碼。

:::danger
沒事別亂動視窗介面名稱！可能造成編譯錯誤。
:::

**3. 視窗初始化程式**

這裡是綠色區段中的上方藍色區段。這裡的用途就是當你開始執行你的視窗程式，第一個一定會執行的地方，通常用來「繪製」你所設計的介面。

:::danger
沒事別亂動這裡！可能造成編譯錯誤。
:::

**4. 觸發「按下按鍵」事件處理**

這裡是綠色區段中的下方藍色區段。

首先我們複習一下，我們這支小小的視窗程式，其實做的事情很簡單：「按下按鍵，然後在輸入文字框顯示文字」。因此這裡在處理的就是，如果使用者按下按鍵之後，那要做什麼事情？所以我們寫程式，要讓輸入文字框顯示一段小文字「Hello World!」。


那我們怎麼讓輸入文字框顯示文字？還記得我們放的輸入文字框控制項叫什麼「名字」嗎？忘掉的話沒關係，請回顧這張圖片，你可以清楚的看到你放的輸入文字框，名字就是「txtShow」。


所以，你希望寫程式來控制你放置的控制項，要做出什麼樣動作，第一個就要先設定那個控制項的「名稱」，第二個步驟，則是要透過控制項「屬性」或「方法（之後會講這是什麼？）」，直接修改屬性或執行方法，讓它做出你要的動作。

請參考以下的程式碼，「**Button_Click**」指的是「按下這個按鍵之後」這件事情，然後大括號裡面就是要寫按下按鍵後要做什麼事情？

大括號裡面，我們指定了「**txtShow**」輸入文字框，「**Text**」就是指「輸入文字框的顯示文字內容」，你把一個字串「Hello World!」指定（=符號）給它，代表就是要這個「txtShow」輸入文字框顯示一段文字「Hello World!」。

private void btnGo_Click(object sender, EventArgs e)
{
    txtShow.Text = "Hello World!"; //你可以直接複製貼過去
}

## 結語

以上我們初步讓同學建立簡單的視窗程式，並且快速的介紹基本視窗程式需要製作或撰寫程式的內容，其實大多數視窗程式也大概都有類似的流程，請同學也是先多練習，習慣了就不會覺得太難喔！