文档章节

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

NoMasp
 NoMasp
发布于 2015/09/08 21:48
字数 1432
阅读 66
收藏 0

这里写图片描述

这里写图片描述

我们先来看看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,是为了后面的演示效果而已,实际中可能用不到这么多按钮吧,哈哈。

     <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


版权声明:本文为 NoMasp柯于旺 原创文章,未经许可严禁转载!欢迎访问我的博客:http://blog.csdn.net/nomasp

本文转载自:http://blog.csdn.net/nomasp/article/details/46457923

NoMasp
粉丝 7
博文 334
码字总数 0
作品 0
镇江
程序员
私信 提问
nomasp 博客导读:Lisp/Emacs、Algorithm、Android

版权声明:转载请联系本人,感谢配合!本站地址:http://blog.csdn.net/nomasp https://blog.csdn.net/NoMasp/article/details/44966625 Profile Introduction to Blog 您能看到这篇博客导读...

nomasp
2015/09/17
0
0
网页中这 10 种字体的运用方式,不会让人觉得 Low

简评:字体特效非常多,有目的地选取合理的特效是让它们发挥效果的诀窍所在。好的字体排版是不需要辅助就能被识别的,否则这个设计是失败的。 本文转载自 UISDC,如需转载请联系他们。 对于设...

极光推送
2018/06/06
44
0
本周推荐7款CSS3实现的动态特效

大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页...

gbin1
2014/07/18
289
0
PIC16F883和TLC5615(DA)数模转化实验,呼吸灯

今天上课做了数模转换的实验。感觉很好玩,在这里写下。 器材:PIC16F883控制芯片、TLC5615、LED灯一个、电阻一个(1K)、PICkit2下载器 实验说明,本实验采用I/O模拟方法实现数模转换,转换...

0101
2012/07/06
555
0
WebComponent+WebGl的实时图像处理弹幕播放器

github -> github.com/dwqdaiwenqi… 融合了WebGl和Web Componet的实时图像处理弹幕播放器 特征 基于Web Components ,拥抱Web Components标准,内部使用的 omi 作为开发Web Components的开发...

戴戴戴
2019/02/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何从GitHub源安装gem?

我想从最新的GitHub源安装gem。 我该怎么做呢? #1楼 尝试使用specific_install gem,它允许您从其github存储库(如“edge”)或任意URL安装gem。 非常适用于在多台机器等上分配宝石和黑客攻...

技术盛宴
31分钟前
51
0
如何将来自其他分叉的未合并上游拉取请求应用于我的分叉?

我有一个分支的GitHub上的项目有一个新的pull请求,我想将其拉到作者尚未拉入的分支中。 有没有简单的方法可以将来自其他分叉的拉取请求应用于我的分叉? 这里还有我想念的东西吗? #1楼 就像...

javail
47分钟前
38
0
分页查询的入门打开方式(JavaWeb)

技术涵盖(JavaWeb、HTML、Ajax、JQuery、Bootstrap ) 接触这一部分知识的时候,我们经常会做一些小Demo来练手,不可避免的就需要接触到一定量的数据,我们常常需要将数据从数据库中回显到页...

BWH_Steven
今天
50
0
Kafka 基本原理

目录 简介 Kafka架构 Kafka存储策略 Kafka删除策略 Kafka broker Kafka Design The Producer The Consumer 复制(Replication) 日志压缩(Log Compaction) Distribution Zookeeper协调控制......

chen_chen_chen_
今天
58
0
将idea中的springboot项目部署到远程的docker容器

1、在idea中创建项目,如下图 2、配置docker maven plugin <!-- Docker maven plugin --><plugin> <groupId>com.spotify</groupId> <artifactId>docker-maven-plugin</artifact......

Lion华
今天
59
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部