C#學習筆記 鬧鐘程式 準備篇 (滑鼠事件)
剛完成關機程式後, 也曾想過寫鬧鐘程式, 或將鬧鐘的功能加入關機程式中, 但意願不高, 除了當時想研究資料庫外, 或許也因鬧鐘程式和關機程式有很多程式碼都滿雷同的關係.
但和巴友源千鶴聊過後發現, 也許可以利用這個鬧鐘程式, 來開始寫第一個自製視窗的程式.
所謂的自製視窗, Custom Windows, 就是將原來常見的Windows視窗, 變更為自己製作的視窗. 這樣說明可能有點難了解, 簡單的來說就如下面兩個程式圖片, 兩者都是鬧鐘程式, 圖一的執行介面為Windows視窗, 圖二就是剛剛提到的自製視窗的程式.
圖一 (Windows視窗)"Google搜尋"
![]()
圖二(自製視窗)"Google搜尋"
![]()
![]()
一開始我其實完全沒有頭緒要如何自製使用者視窗, Google一段時間後, 找到了這篇文章Creating Custom Windows, 閱後獲益良多. 建議對自製視窗有興趣的同好, 入門前不知道怎麼開始的話, 可以照著說明做一次看看.
鬧鐘程式準備篇(滑鼠事件)是落葉在開始寫鬧鐘程式之前找資料的筆記, 其中也包含測試的小程式(本篇的滑鼠事件).
還是一句老話, 説明極可能亂七八糟. . . 一個非寫程式出身的孩子留. . .![]()
想像程式
網路上有很多Clock或者是Alarm的圖形可以參考, 落葉比較偏愛電子式的時鐘(如下圖). 會選擇這類型的, 因為這樣式對美工功力相當差的我, 做出來後的成品, 比較不會太難看. . .
(電子式時鐘)"Google搜尋"
![]()
時鐘的顯示
目前暫定為現在日期, 時間, AM和PM, 再加上顯示設定後的響鈴時間, 可能會和上圖有點像. 這個部份打算自己用PhotoShop來做, 盡可能不在網路上撿資源(拿人家的圖)為原則. 另外也希望能做到精緻, 實用不複雜的介面. 功能鍵暫定為關閉程式, 設定時間, 自訂鬧鈴.
由於使用者在自製視窗的操作上, 很多都和滑鼠習習相關, 所以決定先學習如何控製滑鼠事件.
順便一提落葉手上唯一的一本工具書是當初要自學C#時購買的, 由博碩文化出品的Visual C# 2008從零開始.
滑鼠事件測試程式目的說明及程式碼
![]()
這個測試程式的主要目的, 是測試當滑鼠移動或點擊該圖形時, 該圖片產生變化. 程式中共有4個小測試 , 如下述. . .
Test 1目的
當滑鼠經過該圖形, 顏色變更為紅色.
![]()
Test 1程式碼
首先拖曳工具箱的元件ImageList到視窗裡頭.
![]()
在Form Load加入程式碼, 將兩圖檔加入到ImageList裡頭.
//如果該圖檔存在 binDebug資料來之內, 則不用指定路徑, 直接將檔名鍵入即可.
//圖檔一(藍球)將存在於imageList1.Images[0].
//藍球
imageList1.Images.Add(Image.FromFile("Circles_Small_Blue.gif"));
//紅球
imageList1.Images.Add(Image.FromFile("Circles_Small_Red.gif"));
接著拖曳工具箱的通用控制項PictureBox到視窗裡頭. ![]()
在Form Load加入程式碼, 設定PictureBox的顯示圖檔為圖檔一(藍球).
picSmall1.Image = imageList1.Images[0];
點擊新增的PictureBox一下, 並選擇其屬性 > 事件.![]()
在事件裡頭有很多關於滑鼠的事件可供選擇, 這個測試程式中有使用的滑鼠事件如下述. . .
- MouseEnter (當滑鼠進入)
- MouseLeave (當滑鼠離開)
- MouseMove (當滑鼠移動)
- MouseDown (當滑鼠點擊不放)
- MouseUp (當滑鼠放開)
在欄位點擊MouseEnter和MouseLeave 2下![]()
//當滑鼠進入後, PictureBox的圖檔顯示ImageList.Images[1](紅球).
private voidpicSmall1_MouseEnter(object sender, EventArgs e)
{
picSmall1.Image =imageList1.Images[1];
}
//當滑鼠離開後, PictureBox的圖檔顯示ImageList.Images[0](藍球).
private void picSmall1_MouseLeave(object sender, EventArgs e)
{
picSmall1.Image =imageList1.Images[0];
}
Test 2目的像跑馬燈由左向右從藍球變成紅球, 這裡藍球變紅球的變化是使用Timer來計算每0.5秒變換一次.![]()
Timer設定可以參考落葉的文章電腦定時關機程式 準備篇.
Test 2 程式碼(Timer)
//計算次數用
int count = 0;
private void timer1_Tick(object sender, EventArgs e)
{
count += 1;
//int轉成string給switch
string forCase;
forCase = count.ToString();
switch (forCase)
{
case "1":
//case 1時 第一個球變紅色上一個球變回藍色, case 2~6以此類推
picSmallFlash1.Image =imageList1.Images[1];
picSmallFlash6.Image =imageList1.Images[0];
break;
case "6":
picSmallFlash6.Image =imageList1.Images[1];
picSmallFlash5.Image = imageList1.Images[0];
//跑完一輪後, 計數器歸0, 從case 1開始
count = 0;
break;
}
}
Test 3目的
- 當滑鼠進入時, 滑鼠(Cursor)變更為Hand.
- 滑鼠移動時球放大.
- 使用者可以自由移動藍球, 滑鼠離開時, 藍球停留原地.
Test 3 主要程式碼
- 當滑鼠進入時, 滑鼠(Cursor)變更為Hand.
選擇該項PictureBox, 並在屬性Cursor選擇Hand.
![]()
如此一來, 當滑鼠經過時就會是Hand了, 也等同用圖像說明該圖可以被移動.
![]()
- 移動時將球放大的圖像, 我並沒有另外畫一個較大的紅球或藍球而是利用SizeMode. 我原來的圖比PictureBox來的小一點, 所以我只要在MouseDown時利用Zoom放大圖像即可. SizeMode可以如下設定. . .
//MouseDown 放大picSmallMovable.SizeMode = PictureBoxSizeMode.Zoom;
//MouseUp 復原picSmallMovable.SizeMode = PictureBoxSizeMode.Normal;
- 使用者移動藍球的做法我是參考工具書的寫法, 如下說明. . .
//dragging 是利用來決定滑鼠是否有拖曳的動作
bool dragging = false;
//記錄滑鼠拖曳前的座標
int x_down, y_down;
private voidpicSmallMovable_MouseDown(object sender, MouseEventArgs e)
{
//開始拖曳時設定true
dragging = true;
//記錄拖曳前座標
x_down = e.X;
y_down = e.Y;
}
private voidpicSmallMovable_MouseMove(object sender, MouseEventArgs e)
{
//MouseMove時dragging = true來移動圖像
if (dragging)
{
//現在圖像座標= 現在滑鼠現在位置減去原來位置
picSmallMovable.Top += (e.Y -y_down);
picSmallMovable.Left += (e.X -x_down);
}
}
private voidpicSmallMovable_MouseUp(object sender, MouseEventArgs e)
{
//滑鼠離開時dragging設定false
dragging = false;
}
Test 4目的移動圖像到某特定位置後, 產生變化. 本例是當左邊的藍球移動到右邊藍球時會變大紅球.![]()
接著原來左邊的球不見![]()
Test 4 主要程式碼(MouseUp)
private voidpicInterfere1_MouseUp(object sender, MouseEventArgs e)
{
//判斷圖像座標使用
bool x, y;
dragging = false;
//右邊藍球的位置範圍, 實際座標為230, 29, 捉一個範圍值+-6
y = picInterfere1.Top < 35&& picInterfere1.Top > 23;
x = picInterfere1.Left < 236&& picInterfere1.Left > 224;
//如果滿足條件執行
if (y && x)
{
//左邊藍球設定看不見
picInterfere1.Visible = false;
//右邊藍球變成紅色, 並變大.
picInterfere2.Image =imageList1.Images[1];
picInterfere2.SizeMode = PictureBoxSizeMode.StretchImage;
}
//如果不滿足條件執行
else
{
//左邊藍球回到原位
picInterfere1.Top = 29;
picInterfere1.Left = 29;
}
接下來的計劃. . .
- 畫Ditital Number (Visio & PhotoShop)
- 測試程式 計時器 (C#)
- 畫桌面小鬧鐘 (PhotoShop)
- 畫鬧鐘按鈕 (PhotoShop)
- 鬧鐘主程式 (C#)
後記這次寫Test 4時遇到一個還滿重要的問題未解決, 就是當滑鼠點擊某圖像時, 如何讓該圖像的layer變成最上面那層?
小屋關於鬧鐘程式文章連結![]()
LINE