练手WPF（一）——模拟时钟与数字时钟的制作（下）

继续数字时钟。上一篇写好了数字笔划专用的DigitLine类。现在是时候使用它了。下面对一些主要代码进行说明。

打开MainWindow.xaml.cs文件：

（1）添加字段变量

// 数字时钟字段定义
DigitLine[] digitLine = new DigitLine[];
DigitLine[] digitLineBack = new DigitLine[];

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

第一对类数组变量用于6个数字及其背景字样，第二对是冒号用的。

（2）在构造方法中进行变量初始化

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

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

（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[].Path0_9[], );
    Canvas.SetTop(digitLineBack[].Path0_9[], );
    digitCanvas.Children.Add(digitLineBack[].Path0_9[]);

    Canvas.SetLeft(digitLineBack[].Path0_9[], );
    Canvas.SetTop(digitLineBack[].Path0_9[], );
    digitCanvas.Children.Add(digitLineBack[].Path0_9[]);

    // 冒号
    Canvas.SetLeft(digitColonBack[].PathColon, );
    Canvas.SetTop(digitColonBack[].PathColon, );
    digitCanvas.Children.Add(digitColonBack[].PathColon);

    // 第二冒号
    Canvas.SetLeft(digitColonBack[].PathColon, );
    Canvas.SetTop(digitColonBack[].PathColon, );
    digitCanvas.Children.Add(digitColonBack[].PathColon);

    // 3、4位--分钟
    Canvas.SetLeft(digitLineBack[].Path0_9[], );
    Canvas.SetTop(digitLineBack[].Path0_9[], );
    digitCanvas.Children.Add(digitLineBack[].Path0_9[]);

    Canvas.SetLeft(digitLineBack[].Path0_9[], );
    Canvas.SetTop(digitLineBack[].Path0_9[], );
    digitCanvas.Children.Add(digitLineBack[].Path0_9[]);

    // 5、6位--秒钟
    Canvas.SetLeft(digitLineBack[].Path0_9[], );
    Canvas.SetTop(digitLineBack[].Path0_9[], );
    digitCanvas.Children.Add(digitLineBack[].Path0_9[]);

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

将画外框和背景底色功能添加到构造方法的最后部分：

// 画数字表背景矩形
DrawDigitRect(new Point(-, ), , , Brushes.Black);
DrawDigitRect(new Point(-, ), , , Brushes.Gray);

// 画数字底色
DrawDigitTimeBack(new SolidColorBrush(Color.FromArgb(, , , )));

（4）最重要的显示时间数字和冒号的方法：

/// <summary>
/// 显示数字时间
/// </summary>
private void DrawDigitTime()
{
    // 删除已在画图区的数字
    for (int i=; i<; i++)
    {
        for (int j=; j<; 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 / ;
    int hour2 = hour % ;
    Canvas.SetLeft(digitLine[].Path0_9[hour1], );
    Canvas.SetTop(digitLine[].Path0_9[hour1], );
    digitCanvas.Children.Add(digitLine[].Path0_9[hour1]);

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

    // 冒号闪烁
    if (CurrTime.Second %  == )
    {
        digitColon[].PathColon.Visibility = Visibility.Visible;
        digitColon[].PathColon.Visibility = Visibility.Visible;
    }
    else
    {
        digitColon[].PathColon.Visibility = Visibility.Hidden;
        digitColon[].PathColon.Visibility = Visibility.Hidden;
    }            

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

    Canvas.SetLeft(digitLine[].Path0_9[minu2], );
    Canvas.SetTop(digitLine[].Path0_9[minu2], );
    digitCanvas.Children.Add(digitLine[].Path0_9[minu2]);

    // 秒钟
    int second = CurrTime.Second;
    int sec1 = second / ;
    int sec2 = second % ;
    Canvas.SetLeft(digitLine[].Path0_9[sec1], );
    Canvas.SetTop(digitLine[].Path0_9[sec1], );
    digitCanvas.Children.Add(digitLine[].Path0_9[sec1]);

    Canvas.SetLeft(digitLine[].Path0_9[sec2], );
    Canvas.SetTop(digitLine[].Path0_9[sec2], );
    digitCanvas.Children.Add(digitLine[].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）大致如此，看看最后效果吧。

最后来一个合影 :)