iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
1
IoT

來與IoT譜寫一首戀愛樂章吧系列 第 14

op.14 《網路/應用層》-初探 C# 視窗程式設計

op.14 尋找友善的環境

在這陌生的環境之中
我想起你帶來的美好
但首先我先需要在這生存
找到一個對我非常友善的環境
幫助我更好地接近妳

今天是正式的活動日,其實有點累哈哈哈,但看著活動完美的結束,心也跟著安定下來......

今日的主題:C#的視窗程式

昨天的程式執行時都發現有點冷冰冰的,而且似乎沒有甚麼互動的感覺,那麼,今天我們就來試著試試看視窗程式設計吧!今天就以挑戰一個製作簡易的計算機為目標吧!

首先需要新增專案,選擇 Windows Forms App (.NET Framework)。
https://ithelp.ithome.com.tw/upload/images/20200929/20129084aIbMZPd2SA.png
自訂專案名稱。
https://ithelp.ithome.com.tw/upload/images/20200929/20129084aZLiuPG0KY.png
此時應該會看到一個空白的程式介面,這就是等等我們要來設計的程式介面。
https://ithelp.ithome.com.tw/upload/images/20200929/201290843FPFQoHnaK.png
這裡簡單介紹一下各區塊的功能
1.工具箱 (用來放設計時需要的元件)
https://ithelp.ithome.com.tw/upload/images/20200929/20129084aTVskhLA4L.png
2.方案總管 (NuGet或是要新增項目的好地方)
https://ithelp.ithome.com.tw/upload/images/20200929/20129084mxrj4VcFcp.png
3.屬性 (選擇不同的元件屬性也會不一樣)
https://ithelp.ithome.com.tw/upload/images/20200929/20129084uakW4KmWTK.png


接下來,我們來看看計算機需要甚麼功能吧!
https://ithelp.ithome.com.tw/upload/images/20200929/20129084HtfrH7jVPI.png

看起來是要有可以按的數字鍵,並且會顯示出來。另外還要有加減乘除等功能。

先實現按下數字鍵就會顯示的功能,在表單裡拉一個 Button 元件,並且修改顯示的文字
https://ithelp.ithome.com.tw/upload/images/20200929/201290845LB6sHDGAF.png
看起來還需要實作 0-9 和 小數點 的其他字,可以選取 Button 然後複製出12個,排成 4 * 3的形狀
https://ithelp.ithome.com.tw/upload/images/20200929/20129084mbl7zZvw8H.png
然後對每個按鈕的文字修改...
https://ithelp.ithome.com.tw/upload/images/20200929/201290849RepoonKav.png

這裡建議大家有個好習慣,對於按鈕的 (Name) 屬性請定義有意義的,不然會發生到時候不知道按鈕的功能是甚麼
假設以 數字鍵 0 為例子
https://ithelp.ithome.com.tw/upload/images/20200929/20129084OwyVD5hLTh.png
然後在上方新增一個 Textbox 元件
https://ithelp.ithome.com.tw/upload/images/20200929/201290849JNDh2NPXc.png
接下來試著當按下按鈕字可以打印在 Textbox 中,快速點兩下其中一顆按鈕,進入程式碼的區域
https://ithelp.ithome.com.tw/upload/images/20200929/20129084zRJCdqMzlI.png
這裡稍微講解程式碼的意思,首先是 Click 事件

private void btn_num_7_Click(object sender, EventArgs e)
{

}
//這代表一顆名為 "btn_num_7"的按鈕事件,將程式寫在裡面,即可完成指定的事項。

然後因為要實現按下按鈕打印相對的數字,所以需要對Textbox的文字程式碼

textBox1.Text += "7";

完整的會像是這樣(以打印7為例子)。

private void btn_num_7_Click(object sender, EventArgs e)
{
   textBox1.Text += "7";
}

然後不斷地重複依序完成 0-9 XD (好累喔)

再新增五個按鈕分別是加減乘除以及等於。
https://ithelp.ithome.com.tw/upload/images/20200929/20129084WdfUo9evEX.png
那有用過計算機的都知道,當按下加減乘除的任一按鍵,都會清空 Textbox ,但最後按下等於卻又會將果運算出來,所以從這可以得知,按下這四個其中之一就必須將 Textbox 內容(會需要一個公用的變數空間)儲存起來,而且必須記錄按下了甚麼的運算按鈕(也需要一個公用的變數空間)。
所以我們先宣告相關的變數空間。
https://ithelp.ithome.com.tw/upload/images/20200929/20129084CAUMDIqfAo.png
接下來就可以把相關的功能填進去按鈕的事件裡啦,以加法按鈕為例子:

private void btn_add_Click(object sender, EventArgs e)
{
    num = Convert.ToDouble(textBox1.Text);    
       //這裡的Convert.ToDouble是強制將 String 轉 Double
    calc_symbol = 0;
    textBox1.Text = "";
}

然後依序完成其他四個按鈕。

private void btn_add_Click(object sender, EventArgs e)
{
    num = Convert.ToDouble(textBox1.Text);
    calc_symbol = 0;
    textBox1.Text = "";
}

private void btn_sub_Click(object sender, EventArgs e)
{
    num = Convert.ToDouble(textBox1.Text);
    calc_symbol = 1;
    textBox1.Text = "";
}

private void btn_mul_Click(object sender, EventArgs e)
{
    num = Convert.ToDouble(textBox1.Text);
    calc_symbol = 2;
    textBox1.Text = "";
}

private void btn_div_Click(object sender, EventArgs e)
{
     num = Convert.ToDouble(textBox1.Text);
     calc_symbol = 3;
     textBox1.Text = "";
}

最後等於按鈕的功能就是會將兩個結果作運算,並且顯示在Textbox中。

private void btn_result_Click(object sender, EventArgs e)
{
   double result;
   if (calc_symbol == 0)
   {
      result = num + Convert.ToDouble(textBox1.Text);
      textBox1.Text = result.ToString();
   }
   else if (calc_symbol == 1)
   {
      result = num - Convert.ToDouble(textBox1.Text);
      textBox1.Text = result.ToString();
   }
   else if (calc_symbol == 2)
   {
      result = num * Convert.ToDouble(textBox1.Text);
      textBox1.Text = result.ToString();
   }
   else if (calc_symbol == 3)
   {
      result = num / Convert.ToDouble(textBox1.Text);
      textBox1.Text = result.ToString();
   }
}

此時按下執行可以嘗試看看基本的運算。
https://ithelp.ithome.com.tw/upload/images/20200929/20129084StSjZpUQnf.png
https://ithelp.ithome.com.tw/upload/images/20200929/20129084mAOn24j8bu.png
https://ithelp.ithome.com.tw/upload/images/20200929/20129084pa0O0849wB.png

當然,計算機還有很多功能,各位有興趣可以在深入的寫下去,比如基本的防呆、根號、次方等功能...
這裡就先不完整的寫出來,留給各位去發揮吧XDD (其實是我懶啦)
附上完整程式碼。

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 Easy_calc
{
    public partial class Form1 : Form
    {
        double num = 0;
        int calc_symbol;    // 0:+  1:-  2:*  3:/ 
        public Form1()
        {
            InitializeComponent();
        }
        private void btn_num_0_Click(object sender, EventArgs e)
        {
            textBox1.Text += "0";
        }
        private void btn_num_1_Click(object sender, EventArgs e)
        {
            textBox1.Text += "1";
        }
        private void btn_num_2_Click(object sender, EventArgs e)
        {
            textBox1.Text += "2";
        }
        private void btn_num_3_Click(object sender, EventArgs e)
        {
            textBox1.Text += "3";
        }
        private void btn_num_4_Click(object sender, EventArgs e)
        {
            textBox1.Text += "4";
        }
        private void btn_num_5_Click(object sender, EventArgs e)
        {
            textBox1.Text += "5";
        }
        private void btn_num_6_Click(object sender, EventArgs e)
        {
            textBox1.Text += "6";
        }
        private void btn_num_7_Click(object sender, EventArgs e)
        {
            textBox1.Text += "7";
        }
        private void btn_num_8_Click(object sender, EventArgs e)
        {
            textBox1.Text += "8";
        }
        private void btn_num_9_Click(object sender, EventArgs e)
        {
            textBox1.Text += "9";
        }

        private void btn_num_dt_Click(object sender, EventArgs e)
        {
            textBox1.Text += ".";
        }

        private void btn_add_Click(object sender, EventArgs e)
        {
            num = Convert.ToDouble(textBox1.Text);
            calc_symbol = 0;
            textBox1.Text = "";
        }

        private void btn_sub_Click(object sender, EventArgs e)
        {
            num = Convert.ToDouble(textBox1.Text);
            calc_symbol = 1;
            textBox1.Text = "";
        }

        private void btn_mul_Click(object sender, EventArgs e)
        {
            num = Convert.ToDouble(textBox1.Text);
            calc_symbol = 2;
            textBox1.Text = "";
        }

        private void btn_div_Click(object sender, EventArgs e)
        {
            num = Convert.ToDouble(textBox1.Text);
            calc_symbol = 3;
            textBox1.Text = "";
        }

        private void btn_result_Click(object sender, EventArgs e)
        {
            double result;
            if (calc_symbol == 0)
            {
                result = num + Convert.ToDouble(textBox1.Text);
                textBox1.Text = result.ToString();
            }
            else if (calc_symbol == 1)
            {
                result = num - Convert.ToDouble(textBox1.Text);
                textBox1.Text = result.ToString();
            }
            else if (calc_symbol == 2)
            {
                result = num * Convert.ToDouble(textBox1.Text);
                textBox1.Text = result.ToString();
            }
            else if (calc_symbol == 3)
            {
                result = num / Convert.ToDouble(textBox1.Text);
                textBox1.Text = result.ToString();
            }
        }

        private void Form1_Load(object sender, EventArgs e)
        {

        }
    }
}

好啦~恭喜各位有視窗程式設計的概念啦,但是這裡只有教到兩種元件的使用方法,更多元件的使用可以參考 這裡,裡面有各式的元件可以學習,每個元件都有佈一樣的特性,就留給大家去挖掘啦XDD

今日的曲子:<<印象國樂-大曲>>姜瑩

Yes


上一篇
op.13 《網路/應用層》-踏入 C# 程式設計
下一篇
op.15《網路層》-自己的 Broker 自己造 by C#
系列文
來與IoT譜寫一首戀愛樂章吧30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言