Transcript PPT6 - NHU IMBI Lab

第六部分
1
C#程式設計 – 南華大學資管系
C# 程式設計
ListBox(清單方塊)的使用(P.10-41,10-43,10-44) (1/2)
 顯示項目清單，使用者可以選取1到多個選項
C#程式設計
 可在控制項的「屬性」視窗找到「Items」屬性來
新增項目 (設計階段)
 執行階段處理項目清單的方法 (P.10-43)
 新增：listBox1.Items.Add(項目字串)
 刪除：listBox1.Items.Remove(項目字串)
 清除： listBox1.Items.Clear()
2
ListBox(清單方塊)的使用(P.10-41,10-43,10-44) (2/2)
常用屬性 (P.10-45)
 Name：控制項名稱
 Items: 項目清單的集合物件
 SelectedIndices: 選擇項目之索引所構成的集合
常用事件
 SelectedIndexChanged：當改變選項時，所觸發的事件
3
C#程式設計
 SelectionMode: (a) None:不能選取 (b) One:單選 (預設值)
(c) MultiExtended: 配合Ctrl和Shift來選取 (d) MultiSimple:
點選
範例：購物系統 (1/5)
 GUI
1)
3)
 將商品種類ListBox的
SelectionMode設為單
選，其餘的ListBox設
為多選
C#程式設計
2)
商品種類：(a)電腦商品
(b)書籍類
電腦商品：桌上型電腦
、筆記型電腦、印表機
、報表紙、隨身碟、
DVD光碟
書籍類：C#程式設計
、計算機概論、微積分
、資料結構、系統分析
4
範例：購物系統 (2/5)
 宣告實體變數：(項目清單的來源)
string[] Types = {"電腦商品", "書籍類"};
string[][] Items = { new string[] {"桌上型電腦", "筆記型電腦", "印表機", "報表紙",
"隨身碟", "DVD光碟"},
C#程式設計
new string[] {"C#程式設計", "計算機概論", "微積分",
"資料結構", "系統分析"} };
 表單載入時，設定商品種類和商品清單項目，並顯示購買商
品數量
TypeList.DataSource = Types; //會引發TypeList_SelectedIndexChanged事件
output();
 output()函式：
private void output() {
int ctr = BuyList.Items.Count;
lblOutout.Text = txtName.Text + "你好!你共買了" + ctr +"項商品";
}
5
範例：購物系統 (3/5)
 TypeList的SelectedIndexChanged事件處理 (控制項按兩下)
 設定ItemsList的項目集合
C#程式設計
ItemsList.Items.Clear();
int idx = TypeList.SelectedIndex;
foreach(string s in Items[idx])
ItemsList.Items.Add(s);
 也可以使用DataSource來設定，但使用此方式時，無法修改項目
集合
 切換商品種類，引發TypeList的SelectedIndexChanged事件
6
範例：購物系統 (4/5)

＞
1)
：btnToRight_Click事件的處理
把商品清單中選擇的商品，加到購物清單
int count = ItemsList.SelectedIndices.Count;
foreach (string s in ItemsList.SelectedItems) BuyList.Items.Add(s);
從商品清單中刪除選擇的商品項目，有兩種做法：
a) // 使用SelectedItem
C#程式設計
2)
for (int i = 0; i < count; i++) {
string s = ItemsList.SelectedItem.ToString();
ItemsList.Items.Remove(s);
}
b)
// 使用SelectedItems[i] (注意：索引必須遞減)
for (int i = count-1; i >= 0; i--) {
string s = ItemsList.SelectedItems[i].ToString();
ItemsList.Items.Remove(s);
}
3)
利用output()顯示購買商品數量
7
範例：購物系統 (5/5)

＜
1)
：btnToLeft_Click事件的處理
把購物清單中選擇的商品，放回商品清單
int count = BuyList.SelectedIndices.Count;
foreach (string s in BuyList.SelectedItems) ItemsList.Items.Add(s);
從購物清單中刪除放回的商品項目，有兩種作法
a)
b)
3)
C#程式設計
2)
使用SelectedItem
for (int i = 0; i < count; i++) {
string s = BuyList.SelectedItem.ToString();
BuyList.Items.Remove(s);
}
使用SelectedItems[i]
for (int i = count - 1; i >= 0; i--) {
string s = BuyList.SelectedItems[i].ToString();
BuyList.Items.Remove(s);
}
利用output()更新購買商品的數量
8
ComboBox (下拉式清單方塊) (P.10-41,10-52)
C#程式設計
 一次只能點選一個項目；預設顯示SelectedIndex = 0
 DropDownStyle：(a) DropDown：允許編輯文字和選取 (預設)
(b) DropDownList：只能選取 (c) Simple： 顯示清單方塊並允
許編輯
 常用的事件：SelectedIndexChanged
 在界面上加入商品種類的ComboBox，將DropDownStyle設為
DropDowList。表單載入時，設定ComboBox的商品種類
TypeComboBox.Items.Add("電腦商品");
TypeComboBox.Items.Add("書籍類");
TypeComboBox.SelectedIndex = 0;
 處理ComboBox的SelectedIndexChanged事件：
ItemsList.Items.Clear();
int idx = TypeComboBox.SelectedIndex;
foreach (string s in Items[idx]) ItemsList.Items.Add(s);
9
簡易文書編輯器 (Simple Editor) (1/11)
示範Menu(功能表, P.10-2), FontDialog(P.10-31),
ColorDialog(P.10-33)和RichTextBox的使用
C#程式設計
GUI
10
簡易文書編輯器 (Simple Editor) (2/11)
檔案
編輯
設定
 每個選項都是ToolStripMenuItem控制項
全選
 按一下功能表列或按右鍵可新增選項名稱(MenuItem)或分隔
線(Separator)
C#程式設計
開檔
復原
字型
 功能表控制項
(P.10-2) 顏色
存檔
剪下
 MenuStrip可以在表單上方的標題列下
，建立功能指令的功
複製
結束
能表列。
貼上
 事件處理程式：mExit_Click => Close();
11
簡易文書編輯器 (Simple Editor) (3/11)
RichTextBox控制項：可載入、儲存文字檔，可設定不同區段
文字的字型和顏色，以及複製、剪下、貼上的功能

在表單上加入RichTextBox，並能隨著表單改變大小
a)
將其WordWrap設為false
b)
在表單載入時，設定RichTextBox的文件大小，使其填滿表單的
工作區(Client area) (P.11-2)

座標系統以Pixels(像素)為單位，左上角為原點，X軸由左至右，Y
軸由上而下

類別System.Drawing.Size：定義(width , height)

類別System.Drawing.Point ：定義(x , y)

利用this.ClientSize取得表單顯示區域的大小

必須扣掉Menu功能表的高度

程式碼(設定RichTextBox的Location和Size)
int y = menuStrip1.Size.Height;
richTextBox1.Location = new Point(0, y);
int width = this.ClientSize.Width;
int height = this.ClientSize.Height - y;
C#程式設計

12
簡易文書編輯器 (Simple Editor) (4/11)
 處理文字區塊的複製、剪下、貼上
SelectionLength：被選取字元的數目
b)
Copy()：將目前選取的文字複製到剪貼簿
c)
Cut()：將目前選取的文字移到剪貼簿
d)
Paste()：將剪貼簿內容貼到RichTextBox中。
e)
SelectAll()：選取RichTextBox中所有的文字
f)
Undo()：將上次的編輯作業復原。
C#程式設計
a)
13
簡易文書編輯器 (Simple Editor) (5/11)
g) 處理各項目的Click事件

mCopy_Click：
if( richTextBox1.SelectionLength != 0 )

mPaste_Click：richTextBox1.Paste();

mCut_Click：
C#程式設計
richTextBox1.Copy();
if( richTextBox1.SelectionLength != 0 )
richTextBox1.Cut();

mUndo_Click：richTextBox1.Undo();

mSelectAll_Click：richTextBox1.SelectAll();
14
簡易文書編輯器 (Simple Editor) (6/11)
 處理檔案開啟與儲存
1)

public void SaveFile(string path , RichTextBoxStreamType fileType);

fileType常見資料流類型
a)
PlainText：包含空格的純文字資料流
b)
RichText：Rich Text (RTF) 格式的資料流
C#程式設計
2)
SaveFile方法：將RichTextBox內容儲存至檔案
利用SaveFileDialog取得檔案名稱 (P.13-39)

Filter屬性：文字檔(*.txt) | *.txt | RTF檔(*.rtf) | *.rtf

FilterIndex：使用之Filter過濾條件的索引

RestoreDirectory：是否開啟上一次開啟時的路徑(設為true)

FileName：取得檔案名稱
15
簡易文書編輯器 (Simple Editor) (7/11)
3)
mSave_Click事件的處理

利用FilterIndex的值，決定所要儲存之文字檔案的資料流類型

程式名稱：
{
if(saveFileDialog1.FilterIndex == 1)
C#程式設計
if (saveFileDialog1.ShowDialog() == DialogResult.OK)
richTextBox1.SaveFile(saveFileDialog1.FileName,
RichTextBoxStreamType.PlainText);
else
richTextBox1.SaveFile(saveFileDialog1.FileName,
RichTextBoxStreamType.RichText);
}
16
簡易文書編輯器 (Simple Editor) (8/11)
4) LoadFile方法：將檔案載入RichTextBox中
Public void LoadFile(string path , RichTextBoxStreamType fileType);
5) 利用OpenFileDialog取得檔案資訊 (P.13-39)
if (openFileDialog1.ShowDialog() == DialogResult.OK)
C#程式設計
6) mOpen_Click事件的處理
{
if(openFileDialog1.FilterIndex == 1)
richTextBox1.LoadFile(openFileDialog1.FileName,
RichTextBoxStreamType.PlainText);
else
richTextBox1.LoadFile(openFileDialog1.FileName,
RichTextBoxStreamType.RichText);
}
17
簡易文書編輯器 (Simple Editor) (9/11)
 字型(Font)的處理
a)

SelectionFont：存取目前文字選取範圍的字型

SelectionColor：存取目前文字選取範圍的文字顏色
利用FontDialog取得使用者設定的字型資訊 (P.10-32)

ShowDialog()：顯示字型對話方塊

Font：設定或取得所選取的字型、樣式、大小和效果資訊

Color：設定或取得所選取的字型顏色

ShowColor：設定是否顯示字型色彩的選項 (預設false)

ShowEffects：設定是否顯示特殊效果的選項 (預設false)
C#程式設計
b)
RichTextBox的屬性
18
簡易文書編輯器 (Simple Editor) (10/11)
c)
mFont_Click事件的處理
fontDialog1.Color = richTextBox1.ForeColor;
fontDialog1.Font = richTextBox1.Font;
fontDialog1.ShowEffects = true;
C#程式設計
fontDialog1.ShowColor = true;
if (fontDialog1.ShowDialog() == DialogResult.OK)
{
richTextBox1.SelectionFont = fontDialog1.Font;
richTextBox1.SelectionColor = fontDialog1.Color;
}
19
簡易文書編輯器 (Simple Editor) (11/11)
 顏色(Color)的處理
a)

Color：設定或取得所選擇的色彩

AllowFullOpen：是否顯示「定義自訂色彩」按鈕 (預設為
True)

FullOpen：是否開啟就顯示自訂色彩區塊 (預設為False)
C#程式設計
b)
利用ColorDialog取得文字顏色的資訊 (p.10-34)
mColor_Click事件的處理：
colorDialog1.AllowFullOpen = true;
colorDialog1.FullOpen = true;
colorDialog1.Color = richTextBox1.ForeColor;
if (colorDialog1.ShowDialog() == DialogResult.OK)
richTextBox1.SelectionColor = colorDialog1.Color;
20
滑鼠事件的處理 (P.9-15) (1/4)
 GUI
圖片盒中，一開始顯示
為背景圖片。將Mouse
移入圖片盒時，隨機改
變圖形，移出時，變成
背景圖片。

在圖片盒中，按下
Mouse，可拖曳圖片盒
C#程式設計

1) 將圖片盒(pictureBox1)的size設為(100,100)，SizeMode設為
StretchImage，Image匯入背景圖片
2) 在imageList1的Images中匯入9張圖片，其ImageSize設為(100,100)
21
滑鼠事件的處理 (P.9-15) (2/4)

常見Mouse 事件
MouseEnter ：當Mouse 移入控制項 時，觸發此事件
b)
MouseLeave：當Mouse 離開控制項時，觸發此事件
c)
MouseUp：當滑鼠按鍵放開時，觸發此事件
d)
MouseDown：當滑鼠鍵按下時，觸發此事件
e)
MouseMove：當移動滑鼠時，觸發此事件
f)
MouseClick：當按一下滑鼠時，觸發此事件
C#程式設計
a)
=>觸發Click事件時，依序觸發MouseDown、Click和
MouseUp三個事件
22
滑鼠事件的處理 (P.9-15) (3/4)
 在表單載入時，建立Random 物件(宣告為實體成員)
rd = new Random();
 pictureBox1_MouseEnter 事件
pictureBox1.Image = imageList1.Images[id];
C#程式設計
int id = rd.Next(0, 8);
 pictureBox1_MouseLeave 事件
pictureBox1.Image = imageList1.Images[8];
 宣告成員變數 isMouseDown 用來判斷Mouse是否按下
bool isMouseDown = false; //起始值為false
 宣告整數成員變數px、py 用來記錄Mouse的座標
int px, py;
23
滑鼠事件的處理 (P.9-15) (4/4)
 pictureBox1_MouseDown 事件
當按下滑鼠左鍵時，將isMouseDown設為true，並記錄滑鼠的位置(相對於控制
項左上角)
 pictureBox1_MouseMove 事件
C#程式設計
if (e.Button == MouseButtons.Left) {
isMouseDown = true;
px = e.X; py = e.Y;
}
isMouseDown為真時，移動圖片盒 (計算移動向量，再移動pictureBox1的位置
，以保持滑鼠的相對位置不變)
if (isMouseDown) {
pictureBox1.Left += (e.X - px);
pictureBox1.Top += (e.Y - py);
}
 pictureBox1_MouseUp 事件
if (e.Button == MouseButtons.Left)
isMouseDown = false;
24
鍵盤事件的處理 (P.9-27) (1/10)
 鍵盤常見的事件
KeyDown：當控制項擁有焦點時，按下按鍵時所產生的事件
b)
KeyPress：當按下和放開ANSI字碼的按鍵時所產生的事件，可透
過 KeyPreeEventArgs 的KeyChar 取得字元 (P. 9-32)
c)
KeyUp：當控制項擁有焦點時，放開按鍵所產生的事件，可透過
KeyEventArgs 的 KeyCode 取得「按鍵碼」的整數值
C#程式設計
a)
 啟用表單的KeyEvent (P. 9-34)

將 KeyPreview 設為True (預設為false)
25
鍵盤事件的處理 (P.9-27) (2/10)
 GUI
使用鍵盤的左右方向鍵來移動 Label
控制項（接受器）

以表單的ClientSize物件來設定或取得
實際顯示區域的大小

加入Label控制項，將其AutoSize設為
False，BackColor設為ActiveCaption，
BorderStyle 設為Fixed3D， Size設為
(50, 20)

將表單的FormBorderStyle設為
FixedSingle (固定表單大小)，
MaximizeBox和Minimize設為False
C#程式設計

26
鍵盤事件的處理 (P.9-27) (3/10)
 表單載入時
a)
將表單工作區域大小設為(300, 330)
this.ClientSize = new Size (300, 330);
設定 Label 控制項（接受器）的起始位置
label1.Left = 125;
C#程式設計
b)
label1.Top = 300;
c)
宣告成員變數 curLeft，記錄接受器目前的左邊位置
curLeft = label1.Left;
d)
宣告成員變數 maxLeft，記錄接受器左邊的最大值
maxLeft = 300 - 50; //最小值是0
e)
啟用表單的鍵盤事件
this.KeyPreview = true;
27
鍵盤事件的處理 (P.9-27) (4/10)
處理表單的KeyUp事件，以調整接受器的位置
←：-30,
→：+30 (不可超出邊界)
case Keys.Left:
curLeft -= 30;
C#程式設計
switch (e.KeyCode) {
if (curLeft < 0) curLeft = 0;
break;
case Keys.Right:
curLeft += 30;
if (curLeft > maxLeft) curLeft = maxLeft;
break;
}
label1.Left = curLeft;
28
鍵盤事件的處理 (P.9-27) (5/10)
 在表單上加入時間和分數的Label控制項(Y為9、
Height 為16) ； 宣告成員變數 time 和 score 來記錄
C#程式設計
int score = 0;
double time = 30;
 將畫面分成8個通道，動態產生8個落下的Label 控
制項(成員變數)，以物件陣列來管理；並且宣告一
個 visible 陣列來記錄對應的Label物件是否可見(一
開始為不可見)
 每個通道寬36 pixels，邊界空出6個pixels
 每個控制項大小(30, 30) ，在通道中置中落下
29
鍵盤事件的處理 (P.9-27) (6/10)

宣告陣列 (成員變數)
bool[] visible;
Label[] lblObj;

visible = new bool[8];
lblObj = new Label[8];
for (int i = 0; i < 8; i++) {
visible[i] = false;
lblObj[i] = new Label();
lblObj[i].Size = new Size(30, 30);
lblObj[i].Left = 6 + i * 36 + 3;
lblObj[i].BackColor = Color.HotPink;
lblObj[i].BorderStyle = BorderStyle.Fixed3D;
lblObj[i].TextAlign = ContentAlignment.MiddleCenter;
lblObj[i].Visible = false;
this.Controls.Add(lblObj[i]);
}
C#程式設計
在表單載入時，動態配置控制項(物件)和陣列，並設定控制項的Size
、BackColor、BorderStyle、TextAlign、Visible等屬性。記得要將這些
動態產生的控制項加入表單的控制項陣列中
30
鍵盤事件的處理 (P.9-27) (7/10)
在表單載入時，建立兩個Random物件。一個用來決定那個通道的
label控制項要出現。另一個用來決定該Label控制項的數字(用來增
加分數和時間)

新增Timer控制項，每隔0.5秒處理一次(timer1_Tick事件)，讓每個通
道中可見的控制項往下掉，並偵測是否得分(Hit) 或錯過(Miss)。同
時，隨機選擇一個通道，若其控制項未出現，則打開該控制項，並
隨機產生其上的數字
C#程式設計

1) 檢查每一個已出現的控制項，判斷其狀態和分數
for(int i = 0; i < 8; i++)
if (visible[i]) {
calcScore(i) ; //傳入通道的編號i
}
31
鍵盤事件的處理 (P.9-27) (8/10)
2)
擇一出現某個控制項
3)
C#程式設計
int pos = rd1.Next(0, 8);
if (visible[pos] == false) {
visible[pos] = true;
lblObj[pos].Visible = true;
lblObj[pos].Top = 30;
lblObj[pos].Text = rd2.Next(1, 10).ToString();
}
調整時間和分數。若時間小於等於0，則表示遊戲結束
time -= 0.5;
if (time < 0) time = 0;
lblTime.Text = "時間: " + time.ToString("0.0");
lblScore.Text = "分數: " + score;
if (time <= 0) {
timer1.Enabled = false;
MessageBox.Show("Game Over!");
}
32
鍵盤事件的處理 (P.9-27) (9/10)
CalcScore(int idx)方法：依狀態(Hit、Miss或往下掉)，計算分數，同時
調整控制項位置和狀態
1)
idx：傳入通道的編號
2)
取得Label控制項：Label obj = lblObj[idx];
3)
計算Label 控制項的左、上、右、下座標值
int left = obj.Left;
C#程式設計

int top = obj.Top;
int right = left + 30;
int bottom = top + 30;
4)
計算接收器和落下的控制項，有所重疊(Hit)的邊界座標值
int leftB = label1.Left - 30;
int topB = label1.Top - 30;
int rightB = leftB + label1.Width + 60;
int bottomB = topB + label1.Height + 60;
33
鍵盤事件的處理 (P.9-27) (10/10)
5)
假如 Miss，則將控制項隱藏，並返回
6)
假如 Hit，則依控制項上的數字，調整分數和時間(五分之一)。同時隱藏
控制項，並返回
if (left >= leftB && right <= rightB &&
top >= topB) { // overlap and hit
int n = Convert.ToInt32(obj.Text);
score += n;
time += (n/5.0);
obj.Visible = false;
visible[idx] = false;
return;
}
7)
C#程式設計
if (bottom > bottomB) { // miss
obj.Visible = false;
visible[idx] = false;
return;
}
不是 Miss 和 Hit，則往下掉 30 pixels
obj.Top += 30;
34