章立民研究室

一般來說，在 Windows XP 畫面的右下角會提示使用者目前的時間與日期，如果用點兩下右下角的時間或是日期文字後，會出現如圖表 1 所示之「日期和時間 內容」對話方塊。請注意對話方塊右方的小時鐘，時針、分針與秒針會隨著時間的流逝而改變位置，就好像真的時鐘一樣。現在，利用一些邏輯的推演與 .Net Framework 精巧的繪圖類別，也能夠輕易做出類似的效果，以下是我們的說明。 

 

圖表1 

程式範例

 

圖表2 

圖表 2 所示者是程式範例的執行結果，在表單的 Load 事件處理常式中，計算繪製時鐘的半徑以及座標位置，當使用者調整時鐘所屬之表單大小時，表單會以雙重緩衝的控制模式，自動重繪時鐘的內容。之所以設定雙重緩衝，是為了減少表單重繪時所造成的畫面閃動，程式碼如下所列： 

private void Blog_DemoForm007_Load(object sender, EventArgs e)
{
 // 判斷表單的框線樣式是否為可調整的框線。
 DoShowFrame = (this.FormBorderStyle == FormBorderStyle.Sizable);
 
 DemoClock = new Clock(this);
 
 // 取回矩型的寬度與高度座標。
 ClientOffset = CalcClientLocation();
 
 // 計算時鐘半徑與座標。
 CalcCircleSize();
 
 // 指定表單樣式位元，當控制項重新調整大小時，會重新繪製。
 this.SetStyle(ControlStyles.ResizeRedraw, true);
 
 // 指定表單樣式位元，控制項會忽略視窗訊息WM_ERASEBKGND 以降低重繪閃動，
 // 控制項會自己繪製，作業系統不必執行，
 // 並且繪製已在緩衝區執行，繪製完成後將結果輸出至螢幕，
 // 設定雙重緩衝能避免控制項重繪時所造成的重繪閃動。
 this.SetStyle(ControlStyles.AllPaintingInWmPaint |
   ControlStyles.UserPaint | ControlStyles.DoubleBuffer, true);
}

使用者除了能夠改變表單的大小，還可以讓時鐘外圍的表單框架消失，如此一來小時鐘的外型就跟一般傳統的時鐘沒有什麼兩樣，如圖表 3 所示： 

 

圖表3 

也許您會問，在沒有表單外框的情況下，能不能夠用滑鼠拖拉的方式將小時鐘移動到想要的位置上？答案是肯定的。請在表單的 MouseDown、MouseUp 與 MouseMove 事件處理常式撰寫如下所示之程式碼：

 

private void Blog_DemoForm007_MouseDown(object sender, MouseEventArgs e)
{
 // 使用者按下滑鼠左鍵。
 if (e.Button == MouseButtons.Left)
 {
  IsMouseDown = true;
  MouseOffset.X = e.X;
  MouseOffset.Y = e.Y;
 }
}

private void Blog_DemoForm007_MouseUp(object sender, MouseEventArgs e)
{
 IsMouseDown = false;
}

private void Blog_DemoForm007_MouseMove(object sender, MouseEventArgs e)
{
 // 移動表單位置。
 if (IsMouseDown)
 {
  this.Location = new Point(
    this.Location.X + e.X - MouseOffset.X,
  this.Location.Y + e.Y - MouseOffset.Y);
 }
}

不久之後，我們還會完成一個更完整的小時鐘範例，加入更多更豐富的功能，例如：倒數計時、改變時鐘的顏色與漸層效果、顯示文字時鐘、以及時鐘功能設定檔等等，今天就先聊到這裡，下次再見。