正文

WPF实现钟表效果

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0708

这篇文章主要为大家详细介绍了WPF实现钟表效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

和之前一样首先看一下wpf钟表效果图

WPF实现钟表效果

是不是很炫酷，上面的那个花都是带有动画效果的图片 。

接下来就是代码了。

首先看一下整个场景的布局搭建

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<window x:class="qqdemo1.datetimew"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    title="datetimew" height="700" width="800" loaded="window_loaded" name="datatime">
  <window.resources>
    <storyboard x:key="zhuanrote">
      <doubleanimation repeatbehavior="forever" from="0" to="360" duration="1:0:0" storyboard.targetname="fenimg" storyboard.targetproperty="rendertransform.angle"></doubleanimation>
      <doubleanimation repeatbehavior="forever" from="0" to="360" duration="0:1:0" storyboard.targetname="xiaoshiimg" storyboard.targetproperty="rendertransform.angle"></doubleanimation>
      <doubleanimation repeatbehavior="forever" from="0" to="360" duration="0:0:5" storyboard.targetname="zhimg" storyboard.targetproperty="rendertransform.angle"></doubleanimation>
      <doubleanimationusingkeyframes storyboard.targetname="huaimg" repeatbehavior="forever" storyboard.targetproperty="rendertransform.angle">
        <easingdoublekeyframe value="10" keytime="0:0:2"></easingdoublekeyframe>
        <easingdoublekeyframe value="30" keytime="0:0:4"></easingdoublekeyframe>
        <easingdoublekeyframe value="0" keytime="0:0:6"></easingdoublekeyframe>
        <easingdoublekeyframe value="-10" keytime="0:0:8"></easingdoublekeyframe>
        <easingdoublekeyframe value="-30" keytime="0:0:10"></easingdoublekeyframe>
      </doubleanimationusingkeyframes>
    </storyboard>
  </window.resources>
  <window.triggers>
    <eventtrigger routedevent="loaded">
      <beginstoryboard storyboard="{staticresource zhuanrote}"></beginstoryboard>
    </eventtrigger>
  </window.triggers>
  <canvas>
    <button width="40" height="20" margin="560,113" panel.zindex="1" background="#72532e" foreground="white" content="min" fontweight="semibold" click="button_click"></button>
    <button width="40" height="20" margin="610,113" panel.zindex="1" background="#72532e" foreground="white" content="tchu" fontweight="semibold" click="button_click_1"></button>
    <border width="529" height="330" margin="145,138" background="#fac178"></border>
    <label width="236" height="40" margin="480,150" name="time" fontsize="24" canvas.left="-66"></label>
    <image width="120" height="140" rendertransformorigin="0.5,0.5" name="huaimg" margin="510,200" source="/qqdemo1;component/timeimage/2224.png">
      <image.rendertransform>
        <rotatetransform></rotatetransform>
      </image.rendertransform>
    </image>
    <image width="90" name="fenimg" height="40" rendertransformorigin="0,0.8" margin="251,306" source="/qqdemo1;component/timeimage/wwww.png">
      <image.rendertransform>
        <rotatetransform></rotatetransform>
      </image.rendertransform>
    </image>
    <image name="xiaoshiimg" width="48" height="134" margin="300,242" rendertransformorigin="0.5,0.8" source="/qqdemo1;component/timeimage/www.png" canvas.top="-26">
      <image.rendertransform>
        <rotatetransform></rotatetransform>
      </image.rendertransform>
    </image>
    <image width="867" height="700" source="/qqdemo1;component/timeimage/3.png"></image>
    <image width="30" height="30" margin="300,160" source="timeimage/11.png"></image>
    <image width="30" height="30" margin="314,160" source="timeimage/12.png"></image>
    <image name="zhimg" rendertransformorigin="0.5,0.5" width="376" margin="0,0" height="356" source="timeimage/22230.png" canvas.left="-59" canvas.top="-44">
      <image.rendertransform>
        <rotatetransform></rotatetransform>
      </image.rendertransform>
    </image>
    <image width="30" height="30" margin="310,430" source="timeimage/16.png"></image>
    <image width="30" height="30" margin="430,305" source="timeimage/13.png"></image>
    <image width="30" height="30" margin="180,305" source="timeimage/19.png"></image>
    <image width="30" height="30" margin="390,200" source="timeimage/11.png" canvas.left="-10" canvas.top="-12"></image>
    <image width="30" height="30" margin="420,255" source="timeimage/12.png" canvas.left="-6" canvas.top="-14" imagefailed="image_imagefailed"></image>
    <image width="30" height="30" margin="380,190" source="timeimage/14.png" canvas.left="34" canvas.top="174"></image>
    <image width="30" height="30" margin="390,190" source="timeimage/15.png" canvas.left="-10" canvas.top="216"></image>
    <image width="30" height="30" margin="390,190" source="timeimage/17.png" canvas.left="-148" canvas.top="216"></image>
    <image width="30" height="30" margin="400,190" source="timeimage/18.png" canvas.left="-193" canvas.top="174"></image>
    <image width="30" height="30" margin="400,200" source="timeimage/10.png" canvas.left="-193" canvas.top="41"></image>
    <image width="30" height="30" margin="400,200" source="timeimage/11.png" canvas.left="-208" canvas.top="41"></image>
    <image width="30" height="30" margin="370,200" source="timeimage/11.png" canvas.left="-148" canvas.top="-12"></image>
    <image width="30" height="30" margin="320,160" source="timeimage/11.png" canvas.left="-84" canvas.top="28"></image>
  </canvas>
</window>

场景的搭建比较死板，没有用代码去创建整个场景，位置都是自己一个一个的慢慢的摆放的比较随意。

下面就是程序的代码了。

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
using system;
using system.collections.generic;
using system.linq;
using system.text;
using system.windows;
using system.windows.controls;
using system.windows.data;
using system.windows.documents;
using system.windows.input;
using system.windows.media;
using system.windows.media.imaging;
using system.windows.shapes;
using system.timers;
using system.windows.navigation;
using system.windows.threading;
 
namespace qqdemo1
{
  /// <summary>
  /// datetime.xaml 的交互逻辑
  /// </summary>
  public partial class datetimew : window
  {
    public datetimew()
    {
 
      dispatchertimer timer = new dispatchertimer(); //时间相当于timer
      timer.tick += new eventhandler(timer_tick);
      //timer.interval = timespan.fromseconds(0.1);
      timer.start();
      initializecomponent();
      this.datatime.windowstyle = system.windows.windowstyle.none;
      //this.datatime.windowstate = system.windows.windowstate.normal;
 
      this.datatime.allowstransparency = true;//透明
      this.background = brushes.transparent;//背景透明5
      this.datatime.windowstartuplocation = system.windows.windowstartuplocation.centerscreen;
      //this.time.content = ;
     // datetime d = new datetime();
 
     // this.xiaoshiimg.rendertransformorigin = new point(0.85,0.85);
 
 
 
 
 
    }
    void timer_tick(object sender, eventargs e)
    {
      this.time.content = datetime.now.tostring(); //tick 事件
    }
 
    private void window_loaded(object sender, routedeventargs e)
    {
 
    }
 
    private void image_imagefailed(object sender, exceptionroutedeventargs e)
    {
 
    }
 
    private void button_click(object sender, routedeventargs e)
    {
      this.windowstate = system.windows.windowstate.minimized;
    }
 
    private void button_click_1(object sender, routedeventargs e)
    {
 
      this.close();
    }
 
  }
}

这个动画的实现实在场景里面去实现的。下一节，会说到在代码里面如何去控制整个动画的实现！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持米米素材网。

原文链接：http://blog.csdn.net/mq_shouhug753951mq/article/details/48295279