好玩的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
好玩的WPF第二弹:电子表字体显示时间+多彩呼吸灯特效button的更多相关文章
- 好玩的WPF第一弹:窗口抖动+边框阴影效果+倒计时显示文字
原文:好玩的WPF第一弹:窗口抖动+边框阴影效果+倒计时显示文字 版权声明:转载请联系本人,感谢配合!本站地址:http://blog.csdn.net/nomasp https://blog.csd ...
- WPF 呼吸灯特效
原文:WPF 呼吸灯特效 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u014117094/article/details/46738621 pa ...
- 好玩的WPF第四弹:用Viewport2DVisual3D实现3D旋转效果
原文:好玩的WPF第四弹:用Viewport2DVisual3D实现3D旋转效果 版权声明:转载请联系本人,感谢配合!本站地址:http://blog.csdn.net/nomasp https:// ...
- 好玩的WPF第三弹:颤抖吧,地球!消失吧,地球!
原文:好玩的WPF第三弹:颤抖吧,地球!消失吧,地球! 版权声明:转载请联系本人,感谢配合!本站地址:http://blog.csdn.net/nomasp https://blog.csdn.net ...
- WPF中使用第三方字体选择器
原文:WPF中使用第三方字体选择器 起因 到WPF的字体可以设置的东西变得非常的多,而却没有提供专用的字体选择对话框,甚至于WinFrom的FontDialog也是不能直接用来设置WPF中的字体.解决 ...
- 关于『HTML』:第二弹
关于『HTML』:第二弹 建议缩放90%食用 第二弹! 它来了! 它来了! 我竟然没有拖更,对了,你们昨天用草稿纸了么 开始正文之前提一个问题:大家知道"%%%"是什么意思吗?就这 ...
- 浅谈Hybrid技术的设计与实现第二弹
前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 接上文:浅谈Hybrid技术的设计与实现(阅读本文前,建议阅读这个先) ...
- 青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 10(排行榜界面&界面管理)
继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...
- layer 弹框不显示内容
// layer的弹框不显示信息 可能是背景颜色和字体颜色冲突 改下字体颜色即可 layer.msg('<p style="color:black">用户名不能为空&l ...
随机推荐
- 【css基础】垂直外边距的合并
近期在重温<CSS权威指南>,还是想把基础再打坚固点,如今对垂直外边距的合并问题进行简单总结. 1. 两个块级元素的外边距都大于0时,取那个最大值作为两个块级元素的垂直边距 请看以下一个小 ...
- ZOJ 3542 2011大连现场赛D题(简单模拟)
Hexadecimal View Time Limit: 2 Seconds Memory Limit: 65536 KB Hexadecimal is very important an ...
- 猎豹移动(金山网络)2015校园招聘(c++project师)
1.已知类MyString的原型为: class MyString { public: MyString(const char *str=NULL);//普通构造函数 MyString(const M ...
- Map实现之HashMap(结构及原理)(转)
java.util包中的集合类包含 Java 中某些最常用的类.最常用的集合类是 List 和 Map.List 的具体实现包括 ArrayList 和 Vector,它们是可变大小的列表,比较适合构 ...
- Servlet:通过初始参数实现权限访问某个文件、页面
目录结构 src 目录下com.xieyuan包MyServlet.java文件(Servlet文件) package com.xieyuan; import java.awt.Color; impo ...
- Application.mk中APP_ABI 的含义
我们在编写JNI代码时有一个可选的文件Application.mk ,这个文件你可以不创建,但是有时候是有必要写一个这样的文件的. Application.mk文件用于描述应用程序本身的一些属性信息, ...
- 从头来之【图解针对虚拟机iOS开发环境搭建】 (转)
1.下载Mac OSX10.9. 点击下载 2.下载VMware Workstation 10,点击下载,网页中包含序列号.安装VM. 3.VM10-MacOS补丁.用于创建苹果虚拟机. 安装VM就不 ...
- Java EE (13) -- 常用的基础结构模式
• Replication • Load balance • Failover • Off-load shared resources • Forward cache • R ...
- JS验证身份证的合法性
//验证身份证的合法性 function IdentityCodeValid(code) { var city={11:"北京",12:"天津",13:&quo ...
- hdu2222Keywords Search (特里)
Problem Description In the modern time, Search engine came into the life of everybody like Google, B ...