好玩的WPF第二弹：电子表字体显示时间+多彩呼吸灯特效按钮

我们先来看看Quartz MS字体动态显示系统时间的效果，难度相较于上一篇也要简单许多。

首先是定义一个TextBlock如下。

<Grid>
     <TextBlock Name="tBlockTime" HorizontalAlignment="Center"
         VerticalAlignment="Center" FontSize="68" Foreground="Green"/>
</Grid>

后台代码如下：

private DispatcherTimer dispatcherTimer;

public MainWindow()
{
     InitializeComponent();

     dispatcherTimer = new System.Windows.Threading.DispatcherTimer();
     // 当间隔时间过去时发生的事件
     dispatcherTimer.Tick += new EventHandler(ShowCurrentTime);
     dispatcherTimer.Interval = new TimeSpan(0, 0, 0, 1);
     dispatcherTimer.Start();
}

public void ShowCurrentTime(object sender, EventArgs e)
{
      //获得星期
      //this.tBlockTime.Text = DateTime.Now.ToString("dddd", new System.Globalization.CultureInfo("zh-cn"));
      //this.tBlockTime.Text += "\n";

      //获得年月日
      //this.tBlockTime.Text = DateTime.Now.ToString("yyyy:MM:dd");   //yyyy年MM月dd日
      //this.tBlockTime.Text += "\n";

      //获得时分秒
      this.tBlockTime.Text = DateTime.Now.ToString("HH:mm:ss");
}

注意在这个时间的设置时，第一步显示的时间是”=”，随后都是”+=”。比如说要先显示星期，再显示时分秒，就是这样的：

//获得星期
this.tBlockTime.Text = DateTime.Now.ToString("dddd", new System.Globalization.CultureInfo("zh-cn"));
this.tBlockTime.Text += "\n";

//获得时分秒
this.tBlockTime.Text += DateTime.Now.ToString("HH:mm:ss");

然后还需要字体，然而字体并不可能是写出来的……我们都需要需要引用资源。

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Width="500" Height="200"
        WindowStyle="None"
        AllowsTransparency="True"
        Background="Black">

    <Window.Resources>
        <Style x:Key="QuartzMSFont">
            <Setter Property="TextElement.FontFamily" Value="Resources/#Quartz MS"/>
        </Style>
    </Window.Resources>

    <Grid>
        <TextBlock Name="tBlockTime" Style="{DynamicResource QuartzMSFont}"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" FontSize="68" Foreground="Green"/>
    </Grid>

</Window>

这里我只是给大家一个启发，如果系统自带的字体已经不能满足你的艺术感，你完全可以另外找字体。甚至也可以创造字体，近来谷歌苹果都在做这个。

我已经把字体放到项目中了，需要源码/字体的童鞋直接留邮箱……

这一篇内容不多，也算不上精彩，但童鞋们可以看看上一篇：好玩的WPF第一弹：窗口抖动+边框阴影效果+倒计时显示文字 ，也可以今明天再来看看第三篇~

首先给窗体设置一下吧：

<Window x:Class="WPFButton.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     Title="MainWindow"
        Width="600" Height="400"
        WindowStyle="None"
        AllowsTransparency="True"
        Background="Wheat">

这段代码中的属性在前一篇中都有介绍，大家可以看看。

我定义了这么多的Button，是为了后面的演示效果而已，实际中可能用不到这么多按钮吧，哈哈。

     <Grid>
        <Button Content="Yellow"
                Style="{StaticResource ResourcesButtonStyle}"
                Background="Yellow" Margin="90,37,450,323"/>

        <Button Content="Purple"
                Style="{StaticResource ResourcesButtonStyle}"
                Background="Purple" Margin="450,230,90,130" />

        <Button Content="Green"
                Style="{StaticResource ResourcesButtonStyle}"
                Background="Green" Margin="90,130,450,230" />

        <Button Content="DarkCyan"
                Style="{StaticResource ResourcesButtonStyle}"
                Background="DarkCyan" Margin="450,37,90,323" />

        <Button Content="Black"
                Style="{StaticResource ResourcesButtonStyle}"
                Background="Black" Margin="90,230,450,130"  />

        <Button Content="OrangeRed"
                Style="{StaticResource ResourcesButtonStyle}"
                Background="OrangeRed" Margin="450,136,90,224"/>

        <Button Content="Violet"
                Style="{StaticResource ResourcesButtonStyle}"
                Background="Violet" Margin="270,37,270,323" />

        <Button Content="CornflowerBlue"
                Style="{StaticResource ResourcesButtonStyle}"
                Background="CornflowerBlue" Margin="270,230,270,130"  />

        <Button Content="Lime"
                Style="{StaticResource ResourcesButtonStyle}"
                Background="Lime" Margin="270,136,270,224"/>

        <Button Content="Azure"
            Style="{StaticResource ResourcesButtonStyle}"
            Background="Azure" Margin="90,323,450,37"  />

        <Button Content="Turquoise"
            Style="{StaticResource ResourcesButtonStyle}"
            Background="Turquoise" Margin="270,323,270,37"  />

        <Button Content="Tomato"
            Style="{StaticResource ResourcesButtonStyle}"
            Background="Tomato" Margin="450,323,90,37" />
    </Grid>

这里面用了资源，不要着急，后面会慢慢道来~

如果不用资源它是长这样的：

好吧，废话不多说，上资源。

 <Window.Resources>
        <Style x:Key="ResourcesButtonStyle" TargetType="{x:Type FrameworkElement}" >
            <Setter Property="Width" Value="60"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect x:Name="OSE" BlurRadius="10"
                                      Color="Lime" Direction="0"
                                      Opacity="1"
                                      RenderingBias="Performance"
                                      ShadowDepth="0" >
                        <Storyboard.TargetProperty>
                            BlurRadius
                        </Storyboard.TargetProperty>
                    </DropShadowEffect>
                </Setter.Value>
            </Setter>
      </Style>
</Window.Resources>    

C#比较好学的一点就是这些属性呀什么的都可以通过名字来猜出来意思，即便猜不出来也可以通过不断的尝试来发现这些属性是做什么的。

属性RenderingBias可以设置侧重于性能还是质量，就像电脑上的显卡设置里那样。

其他那些属性强烈推荐大家不断的修改数值观察最终调试出来程序的反应，这也算是小小的实验了。

上面的资源是静态，还需要加上Storyboard动画，动画嘛，可以以各种属性为参照，这里我以BlurRadius和Color。前者可以间接做出呼吸灯效果（不过后面我将其数值最大设置成了100，要是哪个呼吸灯像这样那就算是喘气了），后者可以更换“呼吸”的色彩。

<Style.Triggers>
   <EventTrigger RoutedEvent="GotFocus">
       <BeginStoryboard>
           <Storyboard>
               <DoubleAnimation
                  Storyboard.TargetProperty="(FrameworkElement.Effect).(DropShadowEffect.BlurRadius)"
                  From="0" To="100"
                  BeginTime="00:00:00" Duration="00:00:01"
                  AutoReverse="True"  RepeatBehavior="Forever"/>

              <ColorAnimationUsingKeyFrames
                  Storyboard.TargetProperty="(FrameworkElement.Effect).(DropShadowEffect.Color)"
                  RepeatBehavior="Forever" AutoReverse="True">
                  <EasingColorKeyFrame KeyTime="0" Value="Yellow"/>
                  <EasingColorKeyFrame KeyTime="0:0:0.4" Value="Purple"/>
                  <EasingColorKeyFrame KeyTime="0:0:0.8" Value="Green"/>
                  <EasingColorKeyFrame KeyTime="0:0:1.2" Value="DarkCyan"/>
                  <EasingColorKeyFrame KeyTime="0:0:1.6" Value="Black"/>
                  <EasingColorKeyFrame KeyTime="0:0:2.0" Value="OrangeRed"/>
                  <EasingColorKeyFrame KeyTime="0:0:2.4" Value="Violet"/>
                  <EasingColorKeyFrame KeyTime="0:0:2.8" Value="CornflowerBlue"/>
                  <EasingColorKeyFrame KeyTime="0:0:3.2" Value="Lime"/>
                  <EasingColorKeyFrame KeyTime="0:0:3.6" Value="Azure"/>
                  <EasingColorKeyFrame KeyTime="0:0:4.0" Value="Turquoise"/>
                  <EasingColorKeyFrame KeyTime="0:0:4.4" Value="Tomato"/>
              </ColorAnimationUsingKeyFrames>
          </Storyboard>
      </BeginStoryboard>
  </EventTrigger>
</Style.Triggers>

BeginTime是起始时间，KeyTime类似于Flash里的关键帧的时间。

前面是BlurRadius的变化，可以用From=”0” To=”100” ；而后面是Color，则需要用Value。

由于CSDN博客上最多只能上传2M的图片，所以这些GIF都很短啦。大家应该多动手尝试呢。我再来贴两张GIF吧～

真实的程序中可不是这样的哦！因为录制GIF的时候为了考虑2M的限制而不得不将录制的帧数调低，所以就“卡顿”成了这样，有明显的“波涛”效果。大家可以用源码调试看看。