練手WPF（一）——模擬時鍾與數字時鍾的制作（下）

繼續數字時鍾。上一篇寫好了數字筆划專用的DigitLine類。現在是時候使用它了。下面對一些主要代碼進行說明。

打開MainWindow.xaml.cs文件：

（1）添加字段變量

// 數字時鍾字段定義
DigitLine[] digitLine = new DigitLine[6];
DigitLine[] digitLineBack = new DigitLine[6];

DigitLine[] digitColon = new DigitLine[2];
DigitLine[] digitColonBack = new DigitLine[2];

第一對類數組變量用於6個數字及其背景字樣，第二對是冒號用的。

（2）在構造方法中進行變量初始化

// 初始化數字
for (int i=0; i<6; i++)
{
    digitLine[i] = new DigitLine(Brushes.Black);
    digitLineBack[i] = new DigitLine(new SolidColorBrush(Color.FromArgb(255, 120, 120, 120)));
}

// 初始化冒號
for (int i=0; i<2; i++)
{
    digitColon[i] = new DigitLine(Brushes.Black);
    digitColonBack[i] = new DigitLine(new SolidColorBrush(Color.FromArgb(255, 120, 120, 120)));
}

（3）開始設置顯示元素

這個方法用於顯示數字表外邊框：

/// <summary>
/// 顯示數字表矩形外框
/// </summary>
/// <param name="pos"></param>
/// <param name="width"></param>
/// <param name="height"></param>
/// <param name="color"></param>
private void DrawDigitRect(Point pos, double width, double height, Brush color)
{
    Rectangle rect = new Rectangle();
    rect.Width = width;
    rect.Height = height;
    rect.Fill = color;
    Canvas.SetLeft(rect, pos.X);
    Canvas.SetTop(rect, pos.Y);
    digitCanvas.Children.Add(rect);

}

 

顯示數字和冒號的背景，數字的話時只要畫6個8就可以了，這個很容易理解，看一下真實的電子表就清楚了。

/// <summary>
/// 顯示背景數字（底色）
/// </summary>
/// <param name="brush"></param>
private void DrawDigitTimeBack(Brush brush)
{
    // 第1、2位--小時
    Canvas.SetLeft(digitLineBack[0].Path0_9[8], 40);
    Canvas.SetTop(digitLineBack[0].Path0_9[8], 80);
    digitCanvas.Children.Add(digitLineBack[0].Path0_9[8]);

    Canvas.SetLeft(digitLineBack[1].Path0_9[8], 120);
    Canvas.SetTop(digitLineBack[1].Path0_9[8], 80);
    digitCanvas.Children.Add(digitLineBack[1].Path0_9[8]);

    // 冒號
    Canvas.SetLeft(digitColonBack[0].PathColon, 190);
    Canvas.SetTop(digitColonBack[0].PathColon, 100);
    digitCanvas.Children.Add(digitColonBack[0].PathColon);

    // 第二冒號
    Canvas.SetLeft(digitColonBack[1].PathColon, 370);
    Canvas.SetTop(digitColonBack[1].PathColon, 100);
    digitCanvas.Children.Add(digitColonBack[1].PathColon);

    // 3、4位--分鍾
    Canvas.SetLeft(digitLineBack[2].Path0_9[8], 220);
    Canvas.SetTop(digitLineBack[2].Path0_9[8], 80);
    digitCanvas.Children.Add(digitLineBack[2].Path0_9[8]);

    Canvas.SetLeft(digitLineBack[3].Path0_9[8], 300);
    Canvas.SetTop(digitLineBack[3].Path0_9[8], 80);
    digitCanvas.Children.Add(digitLineBack[3].Path0_9[8]);

    // 5、6位--秒鍾
    Canvas.SetLeft(digitLineBack[4].Path0_9[8], 400);
    Canvas.SetTop(digitLineBack[4].Path0_9[8], 80);
    digitCanvas.Children.Add(digitLineBack[4].Path0_9[8]);

    Canvas.SetLeft(digitLineBack[5].Path0_9[8], 480);
    Canvas.SetTop(digitLineBack[5].Path0_9[8], 80);
    digitCanvas.Children.Add(digitLineBack[5].Path0_9[8]);
}

 

將畫外框和背景底色功能添加到構造方法的最后部分：

// 畫數字表背景矩形
DrawDigitRect(new Point(-24, 36), 616, 196, Brushes.Black);
DrawDigitRect(new Point(-16, 44), 600, 180, Brushes.Gray);

// 畫數字底色
DrawDigitTimeBack(new SolidColorBrush(Color.FromArgb(255, 120, 120, 120)));

 

（4）最重要的顯示時間數字和冒號的方法：

/// <summary>
/// 顯示數字時間
/// </summary>
private void DrawDigitTime()
{
    // 刪除已在畫圖區的數字
    for (int i=0; i<6; i++)
    {
        for (int j=0; j<10; j++)
        {
            if (digitCanvas.Children.Contains(digitLine[i].Path0_9[j]))
            {
                digitCanvas.Children.Remove(digitLine[i].Path0_9[j]);
            }
        }
    }

    // 小時
    int hour = CurrTime.Hour;
    int hour1 = hour / 10;
    int hour2 = hour % 10;
    Canvas.SetLeft(digitLine[0].Path0_9[hour1], 40);
    Canvas.SetTop(digitLine[0].Path0_9[hour1], 80);
    digitCanvas.Children.Add(digitLine[0].Path0_9[hour1]);

    Canvas.SetLeft(digitLine[1].Path0_9[hour2], 120);
    Canvas.SetTop(digitLine[1].Path0_9[hour2], 80);
    digitCanvas.Children.Add(digitLine[1].Path0_9[hour2]);

    // 冒號閃爍
    if (CurrTime.Second % 2 == 0)
    {
        digitColon[0].PathColon.Visibility = Visibility.Visible;
        digitColon[1].PathColon.Visibility = Visibility.Visible;
    }
    else
    {
        digitColon[0].PathColon.Visibility = Visibility.Hidden;
        digitColon[1].PathColon.Visibility = Visibility.Hidden;
    }            

    // 分鍾
    int minute = CurrTime.Minute;
    int minu1 = minute / 10;
    int minu2 = minute % 10;
    Canvas.SetLeft(digitLine[2].Path0_9[minu1], 220);
    Canvas.SetTop(digitLine[2].Path0_9[minu1], 80);
    digitCanvas.Children.Add(digitLine[2].Path0_9[minu1]);

    Canvas.SetLeft(digitLine[3].Path0_9[minu2], 300);
    Canvas.SetTop(digitLine[3].Path0_9[minu2], 80);
    digitCanvas.Children.Add(digitLine[3].Path0_9[minu2]);
    
    // 秒鍾
    int second = CurrTime.Second;
    int sec1 = second / 10;
    int sec2 = second % 10;
    Canvas.SetLeft(digitLine[4].Path0_9[sec1], 400);
    Canvas.SetTop(digitLine[4].Path0_9[sec1], 80);
    digitCanvas.Children.Add(digitLine[4].Path0_9[sec1]);

    Canvas.SetLeft(digitLine[5].Path0_9[sec2], 480);
    Canvas.SetTop(digitLine[5].Path0_9[sec2], 80);
    digitCanvas.Children.Add(digitLine[5].Path0_9[sec2]);
}

根據當前時間，顯示相應數字，很容易懂。

 

（5）更新時間

將上面的DrawDigitTime()方法調用添加到（上）篇的計時器事件方法中即可。現在該方法如下：

/// <summary>
/// 計時器事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Timer_Tick(object sender, EventArgs e)
{
    // 更新當前時間
    CurrTime = DateTime.Now;

    // 更新數字時鍾數字
    DrawDigitTime();

    // 更新圓盤時針
    Update();
}

（6）大致如此，看看最后效果吧。

最后來一個合影 :)