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

我们先来看看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第一弹：窗口抖动+边框阴影效果+倒计时显示文字 ，也能够今明天再来看看第三篇~

没想到这篇博客被推荐了啦，内容这么少……绝不能让如此不堪的文章放在首页啦，所以就来加入一点东西咯——也就是前文中的第二个GIF（个人感觉还是蛮炫酷的）。

首先给窗口设置一下吧：

<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，是为了后面的演示效果而已。实际中可能用不到这么多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的限制而不得不将录制的帧数调低。所以就“卡顿”成了这样，有明显的“波涛”效果。

大家能够用源代码调试看看。





感谢您的訪问。希望对您有所帮助。 欢迎大家关注、收藏以及评论。

为使本文得到斧正和提问，转载请注明出处：

http://blog.csdn.net/nomasp