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

# 實作：計算機程式

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

老師會建議學習一個程式語言，可以從計算機程式開始，藉此掌握最基本的語法與程式邏輯。

## 試用軟體

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

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

## 開啟新專案

開啟新專案之前有教學過，如果你忘記了或不太熟悉，請點選[這裡](https://hackmd.io/sFFV6T2oT0-ysHotbIybhw?view#WPF-%E7%9A%84%E5%B0%88%E6%A1%88%E8%A8%AD%E5%AE%9A)。

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

## 開始吧！

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

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

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

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

同學學習到現在，你應該都有一些自己設計介面的基礎了，請花點時間，拉一下控制項來做出類似以下的畫面。


### 控制項樣式設定

你應該會發現，這次控制項不能夠完全只用預設樣式，你需要調整字體大小和字型，那麼如何改呢？你可以參考數字顯示的輸入文字框的顯示字型設定，這裡我們設定字型為「微軟正黑體」、字體大小為「24pt」。如下圖，你可以試試看。


按鍵的樣式也可以調整，方式也與數字顯示差不多，你可以再試試看。


### 控制項取名

還記得嗎？控制項最重要的屬性就是「==**控制項名稱（Name）**==」，也就是這個控制項的「**名字**」叫什麼？所以別忘了，也要對你的控制項在「屬性視窗」中，選擇「名稱」，輸入一個有意義的名字。你可以自己設定名稱，只要不和別的控制項重複就好，或者你可以也參考以下建議的名稱：

:::info
1. 數字顯示輸入文字框：txtNumber
2. 清除按鍵：btnClear
3. 數字鍵0到9：btnZero、btnOne、btnTwo、btnThree、btnFour、btnFive、btnSix、btnSeven、btnEight、btnNine
4. 小數點按鍵：btnDot
5. 等於按鍵：btnEqual
6. 加減乘除按鍵：btnAdd、btnMinus、btnPlus、btnDivide
:::

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

接下來，我們要開始進行程式的撰寫，其實之前就提及了，寫程式是「**設計一個資料處理的流程**」。因此我們這個計算機程式要設計什麼樣的「工作流程」？

:::success
你可以拿出你手機裡面的計算機App，一邊操作一邊想想，你是怎麼使用計算機的？
:::

通常寫程式之前不是馬上就開始狂打鍵盤，你應該先想想看，你的程式要做什麼事？所以，我們先想想看，計算機是怎麼操作的？因為這會決定我們要怎麼寫程式？

:::info
1. 輸入第一個數字：輸入一個數字，從最左邊的數字輸入到最後一個數字
2. 選擇四則運算符號：從加、減、乘、除中挑選一個
3. 輸入第二個數字：輸入一個數字，從最左邊的數字輸入到最後一個數字
4. 按等於按鍵：得到計算結果
:::

graph TD;
按下數字按鍵輸入第一個數字-->選擇要運算的四則運算符號;
選擇要運算的四則運算符號-->按下數字按鍵輸入第二個數字;
按下數字按鍵輸入第二個數字-->按下等於按鍵;
按下等於按鍵-->顯示計算結果;

研究以上的流程，你會發現簡單的計算機，大概操作流程就跟上面類似，所以我們可以先從最上面的流程先慢慢寫程式。第一個流程完成之後，再實現下一個流程，我們從簡單的程式，再修改、增加、調整程式內容，最後就能完成完整的程式了！

### 事件綁定

這次的事件綁定都很單純，也就是所有的按鍵都要有一個「Click」事件綁定，所以請一次把所有的按鍵通通點兩下，讓所有的按鍵都能有事件綁定。也就是說每一個按鍵，都有能有類似以下的程式碼片段：

private void btnOne_Click(object sender, EventArgs e)
{
    // 以數字1按鍵為例
}

### 實現輸入數字

使用計算機一定會需要輸入數字，因此我們優先把這個功能做出來，這樣才能完成其他的程式。這個功能你不會陌生，就像下面這個簡單的動畫。


你可以注意到，當你輸入第一個數字，上方的數字就會出現，再輸入第二個數字，原來的數字會左移一格，第二個數字就會出現在第一個數字右邊，繼續輸入數字，新的數字都會出現在最右邊的位置。

輸入第一個數字「1」，顯示以下的樣子：

:::success
1
:::

輸入第二個數字「2」，就會顯示以下的樣子：

:::success
12
:::

所以，你可以發現，**每次輸入一個新數字，就是在原有的數字後面，再「加上」新數字**。程式可以寫成這樣：

txtNumber.Text = txtNumber.Text + "1";

:::info
上面的程式碼，你可以解讀成：「把原有的數字顯示輸入文字框」再「加上1」
:::

你可以把這段，放到數字鍵1的事件綁定程式段落，然後測試程式，看看按下數字鍵1會不會一直出現數字1。

private void btnOne_Click(object sender, EventArgs e)
{
    txtNumber.Text = txtNumber.Text + "1";
}

完成之後，你可以把別的數字按鍵也實現出來，讓不同數字按鍵能夠出現數字。

### 小小修正

如果你成功做出按下數字按鍵，數字顯示輸入文字框能夠顯示你輸入的數字，你大概會發現，有一點怪怪的，就是如果一開始輸入文字框只有「0」，再按下數字，數字就會連在「0」後面，這樣很奇怪。

所以我們小小的修改程式，改成以下的程式碼。

private void btnOne_Click(object sender, EventArgs e)
{
    if (txtNumber.Text == "0")
    {
        txtNumber.Text = ""; //這個簡單的判斷式，會預先檢查輸入文字框是不是只有一個「0」？是的話，就先清除掉裡面的數字內容
    }
    txtNumber.Text = txtNumber.Text + "1";
}

我們再增加數字的程式碼上面增加簡單的判斷式，會預先檢查輸入文字框是不是只有一個「0」？是的話，就先清除掉裡面的數字內容，然後再增加數字在最右邊。

現在這樣修改，就不會出現如果輸入文字框只有「0」，新增數字卻放在「0」後面。

### 再小小的修改

現在我們再把程式修改一下，你可以把程式修改成下面的樣子，結果都會是一樣的。

private void btnOne_Click(object sender, EventArgs e)
{
    if (txtNumber.Text == "0")
        txtNumber.Text = ""; // 如果你的判斷式簡單到只有一行程式，可以把 { } 大刮號省略掉
    txtNumber.Text += "1";
    // 這種寫法和這段「txtNumber.Text = txtNumber.Text + "1";」是一樣的
}

這邊是跟同學介紹，有的時候如果你的判斷式如果只有一行程式要執行，那可以省略掉大括號「 { 」與「 } 」。

再來如果你只是要需要在某個變數後面增加資料，可以用運算子「 += 」來連接要增加的資料，這樣就不用連續寫兩次變數，直接用「 += 」來連接就好。

## 參考程式碼

以下就是我們初步修改的程式碼，請同學試著將其他數字按鍵完成！

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 Calculator
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void btnOne_Click(object sender, EventArgs e)
        {
            if (txtNumber.Text == "0")
            {
                txtNumber.Text = "";
            }
                
            txtNumber.Text = txtNumber.Text + "1";
            // txtNumber.Text += "1";  // 上面和下面的寫法意思是一樣的
        }

        private void btnTwo_Click(object sender, EventArgs e)
        {
            if (txtNumber.Text == "0") // 如果你的判斷式簡單到只有一行程式，可以把 { } 大刮號省略掉
                txtNumber.Text = "";
            txtNumber.Text = txtNumber.Text + "2";
        }

        private void btnThree_Click(object sender, EventArgs e)
        {
            if (txtNumber.Text == "0")
                txtNumber.Text = "";
            txtNumber.Text = txtNumber.Text + "3";
        }

        // 以下留給你 ... 請把每一個數字按鍵都做進去
    }
}

如果每一個數字按鍵都可以像下圖，恭喜你已經大概完成所有數字按鍵的實作。


:::spoiler 參考答案

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 Calculator
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void btnOne_Click(object sender, EventArgs e)
        {
            if (txtNumber.Text == "0")
            {
                txtNumber.Text = "";
            }
                
            txtNumber.Text = txtNumber.Text + "1";
            // txtNumber.Text += "1";  // 上面和下面的寫法意思是一樣的
        }

        private void btnTwo_Click(object sender, EventArgs e)
        {
            if (txtNumber.Text == "0") // 如果你的判斷式簡單到只有一行程式，可以把 { } 大刮號省略掉
                txtNumber.Text = "";
            txtNumber.Text = txtNumber.Text + "2";
        }

        private void btnThree_Click(object sender, EventArgs e)
        {
            if (txtNumber.Text == "0")
                txtNumber.Text = "";
            txtNumber.Text = txtNumber.Text + "3";
        }

        private void btnFour_Click(object sender, EventArgs e)
        {
            if (txtNumber.Text == "0")
                txtNumber.Text = "";
            txtNumber.Text = txtNumber.Text + "4";
        }

        private void btnFive_Click(object sender, EventArgs e)
        {
            if (txtNumber.Text == "0")
                txtNumber.Text = "";
            txtNumber.Text = txtNumber.Text + "5";
        }

        private void btnSix_Click(object sender, EventArgs e)
        {
            if (txtNumber.Text == "0")
                txtNumber.Text = "";
            txtNumber.Text = txtNumber.Text + "6";
        }

        private void btnSeven_Click(object sender, EventArgs e)
        {
            if (txtNumber.Text == "0")
                txtNumber.Text = "";
            txtNumber.Text = txtNumber.Text + "7";
        }

        private void btnEight_Click(object sender, EventArgs e)
        {
            if (txtNumber.Text == "0")
                txtNumber.Text = "";
            txtNumber.Text = txtNumber.Text + "8";
        }

        private void btnNine_Click(object sender, EventArgs e)
        {
            if (txtNumber.Text == "0")
                txtNumber.Text = "";
            txtNumber.Text = txtNumber.Text + "9";
        }

        private void btnZero_Click(object sender, EventArgs e)
        {
            if (txtNumber.Text == "0")
                txtNumber.Text = txtNumber.Text + "0";
        }
    }
}

:::