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

# 實作：單位轉換程式（介面設計）

程式設計的學習，如果能從範例開始，學習絕對是最快的，所以我們先從簡單的程式開始。

但同學也別擔心，偶而老師還是會回去複習基本的程式設計。

現在我們來製作一個簡單的單位轉換程式，類似這個網站的畫面與功能，[所以我們先來看看這個網站...](http://www.mold.net.tw/classroom/unit.htm)。

## 試用軟體

同學你可以在以下連結，先把完整的程式下載回去使用看看。

[下載連結](https://fgu365-my.sharepoint.com/:f:/g/personal/chlu_vdi_fgu_edu_tw/ErAp2L7jZPFLtKxozH19ldgBUePawwFRqANx_wo7HsQj9Q?e=fWApLK)

## 單位轉換程式的運作流程

如果你先把這個單位轉換程式網站操作過一次，大概可以確認以下的重點：

:::info
* 這個程式提供各種單位轉換
* 使用方式：選擇任一個單位，輸入數字，按下 Enter 或「離開焦點」，其他單位就會同步計算單位轉換的結果
* 按下「重新計算」的按鍵，就會清除所有欄位
:::

其實，你有沒有發現，在寫程式之前，先瞭解「==**要做什麼事情？**==」可能才是最重要的。因為這可以幫助我們思考有哪些工作要做，避免浪費時間重複試誤，並且能夠聚焦在重點。

接下來，我們就跟之前第二部分的基本視窗程式設計相同，先開啟一個新專案，來完成這個單位轉換程式的設計，為了減少複雜度，我們先來設計簡單的 **長度轉換程式** 就好。

## 開啟新專案

開啟新專案之前有教學過，如果你忘記了或不太熟悉，請點選[這裡](https://hackmd.io/@chohsunlu/H1wnHYMTt)。

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

## 開始吧！

還記得第二部分的基本視窗程式設計嗎？同樣的，我們依照之前說過的兩個主要程式設計流程來設計：

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

因此，我們也是先初步設計介面，再來進行程式撰寫。

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

[再回到我們剛剛說到的網站...](http://www.mold.net.tw/classroom/unit.htm)，同學應該可以先瞭解一下大致有哪些控制項需要放上去？


看起來大概就需要放三種控制項：

:::info
* 按鍵控制項
* 輸入文字框
* 文字標籤（Label）
:::

前兩項我們在[基本視窗程式設計](https://hackmd.io/@chohsunlu/H15sUL-TK)章節看過了，現在我們介紹第三種也是非常常用的「**文字標籤（Label）**」，顧名思義，他就是用來顯示文字用的，跟輸入文字框不一樣的地方在於**使用者無法修改內容**。


使用方式也和按鍵與輸入文字框一樣，選擇之後，再到空白的視窗內拉出你要的內容即可。


一個「**文字標籤（Label）**」預設會有文字在裡面，你可以自行修改，請到「**屬性視窗**」中尋找「**Text**」項目直接修改就可以了，可以輸入英文字也可以輸入中文字。


### 完成視窗設計

接下來，我們讓同學一一將需要的控制項，置放到空白的設計視窗內。如果你忘記了或不太熟悉，請點選[這裡](https://hackmd.io/@chohsunlu/H15sUL-TK)。

同樣為了簡化，我們就選擇「公分」、「公尺」、「公里」、「英吋」、「英呎」、「碼」共六種單位來轉換。以下是一個你可以參考的設計畫面，請花一點時間從工具箱拉入你需要的控制項，並且調整文字內容、元件大小、字體大小等等。


你可能會覺得一個一個拉很累，這裡有一個訣竅：

:::success
可以直接按Ctrl不放，多選數個控制項，再按Ctrl+C複製，按Ctrl+P貼上。

或者直接用滑鼠圈選要複製的項目，再複製貼上。
:::

和之前提及的網站不同的地方，我們有增加一個「說明文字」以及一個長條的輸入文字框，請也要記得做進去，我們會拿這個做一些狀態顯示的效果。

### 不要忘記，你要對控制項取一個名字

還記得嗎？控制項最重要的屬性就是「==**控制項名稱（Name）**==」，也就是這個控制項的「**名字**」叫什麼？所以別忘了，也要對你的控制項在「屬性視窗」中，選擇「名稱」，輸入一個有意義的名字。

例如清除按鍵，我們設定一個名稱「btnAllClear」給它，就像下圖的作法。


不過，你不用對每一個控制項都設定一個名字，那麼哪些控制項要有名字？哪些不用？原則很簡單：

:::info
不會變動內容、不用來操作的控制項，不需要設定名稱
:::

你可以思考一下我們這個程式，有哪個東西不會變動內容？也不會用來操作？

:::success
答案：文字標籤控制項，因為只用來顯示文字，不會變動，也不用來操作
:::

但是假設你要讓文字標籤會改變內容，那就要設定名稱。所以， ==**什麼時候要設定控制項的名稱？重點在於：是否要更改內容？是否要用來操作？**== 因此，請在所有的按鍵、輸入文字框，分別設定它們的名稱，這樣我們才能在程式中控制這些控制項。你可以自己設定名稱，只要不和別的控制項重複就好，或者你可以也參考以下來設定名稱。

1. 清除按鍵：btnAllClear
2. 公分輸入文字框：txtCM
3. 公尺輸入文字框：txtM
4. 公里輸入文字框：txtKM
5. 英吋輸入文字框：txtIn
6. 英呎輸入文字框：txtFt
7. 英碼輸入文字框：txtYard
8. 說明文字輸入文字框：txtInfo

這些名稱你可以仔細觀察，好像都有一定的規則？為什麼要這樣做呢？這是有原因的，因為到時候在寫程式的時候，你只要看名稱就可以知道這是什麼樣的控制項。

## 結語

在這裡我們已經初步完成基本的介面設計，接下來要完成程式撰寫，讓這個單位轉換程式可以「動起來」。