WPF模拟时钟制作

近日因为项目需求，所以才花了一个晚上的时间来学习和制作WPF模拟时钟。本想着参考网上的WPF模拟时钟控件，但多数过于简单。也有一些模拟时钟确实制作的非常精美，但使用了GDI+技术，而非我需要的WPF时钟控件。好了，下面给出我制作的WPF模拟时钟的运行截图吧：

色彩方面只是用了黑色，白色，蓝色等鲜明的颜色，看起来没有特别绚丽，当然，如果需要，可以设置成需要的绚丽的颜色等。

以下是该模拟时钟的XAML代码部分：

  1 <Window x:Class="AnalogClockProject.MainWindow"
  2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4         Title="MainWindow" Height="350" Width="525">
  5     <Canvas Width="240" Height="240">
  6         <TextBlock Name="dateTB" Foreground="Black" Text="2014年10月06日" FontFamily="12" Canvas.Left="76" Canvas.Top="52"></TextBlock>
  7         <TextBlock Name="weekDayTB" Foreground="Black" Text="" FontSize="12" Canvas.Left="103" Canvas.Top="67"></TextBlock>
  8         <!--<TextBlock Text="西安电子科技大学" FontSize="12" Foreground="DarkCyan" Canvas.Left="73" Canvas.Top="171"></TextBlock>-->
  9         <!--Center Point-->
 10         <!--<Ellipse Width="4" Height="4" Fill="Black" Canvas.Left="118" Canvas.Top="118"></Ellipse>-->
 11         <!--HourHand-->
 12         <Polygon Name="HourHand" Stroke="Black" StrokeThickness="0" Points="0, 0 4, -10 0, -85 -4, -10" Fill="Black"
 13                  Canvas.Left="120" Canvas.Top="130" Opacity="1">
 14             <Polygon.RenderTransform>
 15                 <RotateTransform x:Name="HoursAngle" CenterX="0" CenterY="-10" Angle="0"></RotateTransform>
 16             </Polygon.RenderTransform>
 17         </Polygon>
 18         <!--MinuteHand-->
 19         <Polygon Name="MinuteHand" Stroke="Black" StrokeThickness="0" Points="0, 0 2, -10 0, -100 -2, -10" Fill="DarkMagenta"
 20                  Canvas.Left="120" Canvas.Top="130" Opacity="1">
 21             <Polygon.RenderTransform>
 22                 <RotateTransform x:Name="MinutesAngle" CenterX="0" CenterY="-10" Angle="0"></RotateTransform>
 23             </Polygon.RenderTransform>
 24         </Polygon>
 25         <!--SecondHand-->
 26         <Rectangle Name="SecondHand" Opacity="1" Fill="Blue" Width="2" Height="106" Canvas.Left="119" Canvas.Top="20">
 27             <Rectangle.RenderTransform>
 28                 <RotateTransform x:Name="SecondsAngle" CenterX="1" CenterY="100" Angle="0"></RotateTransform>
 29             </Rectangle.RenderTransform>
 30         </Rectangle>
 31
 32         <!--第一圈-->
 33         <Ellipse Width="240" Height="240" StrokeThickness="2" Stroke="Black"></Ellipse>
 34         <!--第二圈-->
 35         <Ellipse Margin="4" Height="232" Width="232" StrokeThickness="1" Stroke="Black"/>
 36         <!--大刻度-->
 37         <Ellipse Width="4" Height="8" Fill="Black" Canvas.Left="118" Canvas.Top="10">
 38             <Ellipse.RenderTransform>
 39                 <RotateTransform CenterX="2" CenterY="110" Angle="0"></RotateTransform>
 40             </Ellipse.RenderTransform>
 41         </Ellipse>
 42         <TextBlock Text="12" FontSize="12" FontFamily="Console" Canvas.Left="113" Canvas.Top="20">
 43         </TextBlock>
 44
 45         <Ellipse Width="4" Height="8" Fill="Black" Canvas.Left="118" Canvas.Top="10">
 46             <Ellipse.RenderTransform>
 47                 <RotateTransform CenterX="2" CenterY="110" Angle="30"></RotateTransform>
 48             </Ellipse.RenderTransform>
 49         </Ellipse>
 50         <TextBlock Text="1" FontSize="12" FontFamily="Console" Canvas.Left="162" Canvas.Top="30">
 51         </TextBlock>
 52
 53         <Ellipse Width="4" Height="8" Fill="Black" Canvas.Left="118" Canvas.Top="10">
 54             <Ellipse.RenderTransform>
 55                 <RotateTransform CenterX="2" CenterY="110" Angle="60"></RotateTransform>
 56             </Ellipse.RenderTransform>
 57         </Ellipse>
 58         <TextBlock Text="2" FontSize="12" FontFamily="Console" Canvas.Left="199" Canvas.Top="65">
 59         </TextBlock>
 60
 61         <Ellipse Width="4" Height="8" Fill="Black" Canvas.Left="118" Canvas.Top="10">
 62             <Ellipse.RenderTransform>
 63                 <RotateTransform CenterX="2" CenterY="110" Angle="90"></RotateTransform>
 64             </Ellipse.RenderTransform>
 65         </Ellipse>
 66         <TextBlock Text="3" FontSize="12" FontFamily="Console" Canvas.Left="213" Canvas.Top="114">
 67         </TextBlock>
 68
 69         <Ellipse Width="4" Height="8" Fill="Black" Canvas.Left="118" Canvas.Top="10">
 70             <Ellipse.RenderTransform>
 71                 <RotateTransform CenterX="2" CenterY="110" Angle="120"></RotateTransform>
 72             </Ellipse.RenderTransform>
 73         </Ellipse>
 74         <TextBlock Text="4" FontSize="12" FontFamily="Console" Canvas.Left="199" Canvas.Top="162">
 75         </TextBlock>
 76
 77         <Ellipse Width="4" Height="8" Fill="Black" Canvas.Left="118" Canvas.Top="10">
 78             <Ellipse.RenderTransform>
 79                 <RotateTransform CenterX="2" CenterY="110" Angle="150"></RotateTransform>
 80             </Ellipse.RenderTransform>
 81         </Ellipse>
 82         <TextBlock Text="5" FontSize="12" FontFamily="Console" Canvas.Left="163" Canvas.Top="196">
 83         </TextBlock>
 84
 85         <Ellipse Width="4" Height="8" Fill="Black" Canvas.Left="118" Canvas.Top="10">
 86             <Ellipse.RenderTransform>
 87                 <RotateTransform CenterX="2" CenterY="110" Angle="180"></RotateTransform>
 88             </Ellipse.RenderTransform>
 89         </Ellipse>
 90         <TextBlock Text="6" FontSize="12" FontFamily="Console" Canvas.Left="117" Canvas.Top="206">
 91         </TextBlock>
 92
 93         <Ellipse Width="4" Height="8" Fill="Black" Canvas.Left="118" Canvas.Top="10">
 94             <Ellipse.RenderTransform>
 95                 <RotateTransform CenterX="2" CenterY="110" Angle="210"></RotateTransform>
 96             </Ellipse.RenderTransform>
 97         </Ellipse>
 98         <TextBlock Text="7" FontSize="12" FontFamily="Console" Canvas.Left="71" Canvas.Top="196">
 99         </TextBlock>
100
101         <Ellipse Width="4" Height="8" Fill="Black" Canvas.Left="118" Canvas.Top="10">
102             <Ellipse.RenderTransform>
103                 <RotateTransform CenterX="2" CenterY="110" Angle="240"></RotateTransform>
104             </Ellipse.RenderTransform>
105         </Ellipse>
106         <TextBlock Text="8" FontSize="12" FontFamily="Console" Canvas.Left="35" Canvas.Top="162">
107         </TextBlock>
108
109         <Ellipse Width="4" Height="8" Fill="Black" Canvas.Left="118" Canvas.Top="10">
110             <Ellipse.RenderTransform>
111                 <RotateTransform CenterX="2" CenterY="110" Angle="270"></RotateTransform>
112             </Ellipse.RenderTransform>
113         </Ellipse>
114         <TextBlock Text="9" FontSize="12" FontFamily="Console" Canvas.Left="22" Canvas.Top="113">
115         </TextBlock>
116
117         <Ellipse Width="4" Height="8" Fill="Black" Canvas.Left="118" Canvas.Top="10">
118             <Ellipse.RenderTransform>
119                 <RotateTransform CenterX="2" CenterY="110" Angle="300"></RotateTransform>
120             </Ellipse.RenderTransform>
121         </Ellipse>
122         <TextBlock Text="10" FontSize="12" FontFamily="Console" Canvas.Left="35" Canvas.Top="65">
123         </TextBlock>
124
125         <Ellipse Width="4" Height="8" Fill="Black" Canvas.Left="118" Canvas.Top="10">
126             <Ellipse.RenderTransform>
127                 <RotateTransform CenterX="2" CenterY="110" Angle="330"></RotateTransform>
128             </Ellipse.RenderTransform>
129         </Ellipse>
130         <TextBlock Text="11" FontSize="12" FontFamily="Console" Canvas.Left="70" Canvas.Top="30">
131         </TextBlock>
132         <!--小刻度-->
133         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
134             <Rectangle.RenderTransform>
135                 <RotateTransform CenterX="1" CenterY="108" Angle="6"></RotateTransform>
136             </Rectangle.RenderTransform>
137         </Rectangle>
138
139         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
140             <Rectangle.RenderTransform>
141                 <RotateTransform CenterX="1" CenterY="108" Angle="12"></RotateTransform>
142             </Rectangle.RenderTransform>
143         </Rectangle>
144
145         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
146             <Rectangle.RenderTransform>
147                 <RotateTransform CenterX="1" CenterY="108" Angle="18"></RotateTransform>
148             </Rectangle.RenderTransform>
149         </Rectangle>
150
151         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
152             <Rectangle.RenderTransform>
153                 <RotateTransform CenterX="1" CenterY="108" Angle="24"></RotateTransform>
154             </Rectangle.RenderTransform>
155         </Rectangle>
156
157         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
158             <Rectangle.RenderTransform>
159                 <RotateTransform CenterX="1" CenterY="108" Angle="36"></RotateTransform>
160             </Rectangle.RenderTransform>
161         </Rectangle>
162
163         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
164             <Rectangle.RenderTransform>
165                 <RotateTransform CenterX="1" CenterY="108" Angle="42"></RotateTransform>
166             </Rectangle.RenderTransform>
167         </Rectangle>
168
169         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
170             <Rectangle.RenderTransform>
171                 <RotateTransform CenterX="1" CenterY="108" Angle="48"></RotateTransform>
172             </Rectangle.RenderTransform>
173         </Rectangle>
174
175         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
176             <Rectangle.RenderTransform>
177                 <RotateTransform CenterX="1" CenterY="108" Angle="54"></RotateTransform>
178             </Rectangle.RenderTransform>
179         </Rectangle>
180
181         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
182             <Rectangle.RenderTransform>
183                 <RotateTransform CenterX="1" CenterY="108" Angle="66"></RotateTransform>
184             </Rectangle.RenderTransform>
185         </Rectangle>
186
187         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
188             <Rectangle.RenderTransform>
189                 <RotateTransform CenterX="1" CenterY="108" Angle="72"></RotateTransform>
190             </Rectangle.RenderTransform>
191         </Rectangle>
192
193         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
194             <Rectangle.RenderTransform>
195                 <RotateTransform CenterX="1" CenterY="108" Angle="78"></RotateTransform>
196             </Rectangle.RenderTransform>
197         </Rectangle>
198
199         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
200             <Rectangle.RenderTransform>
201                 <RotateTransform CenterX="1" CenterY="108" Angle="84"></RotateTransform>
202             </Rectangle.RenderTransform>
203         </Rectangle>
204
205         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
206             <Rectangle.RenderTransform>
207                 <RotateTransform CenterX="1" CenterY="108" Angle="96"></RotateTransform>
208             </Rectangle.RenderTransform>
209         </Rectangle>
210
211         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
212             <Rectangle.RenderTransform>
213                 <RotateTransform CenterX="1" CenterY="108" Angle="102"></RotateTransform>
214             </Rectangle.RenderTransform>
215         </Rectangle>
216
217         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
218             <Rectangle.RenderTransform>
219                 <RotateTransform CenterX="1" CenterY="108" Angle="108"></RotateTransform>
220             </Rectangle.RenderTransform>
221         </Rectangle>
222
223         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
224             <Rectangle.RenderTransform>
225                 <RotateTransform CenterX="1" CenterY="108" Angle="114"></RotateTransform>
226             </Rectangle.RenderTransform>
227         </Rectangle>
228
229         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
230             <Rectangle.RenderTransform>
231                 <RotateTransform CenterX="1" CenterY="108" Angle="126"></RotateTransform>
232             </Rectangle.RenderTransform>
233         </Rectangle>
234
235         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
236             <Rectangle.RenderTransform>
237                 <RotateTransform CenterX="1" CenterY="108" Angle="132"></RotateTransform>
238             </Rectangle.RenderTransform>
239         </Rectangle>
240
241         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
242             <Rectangle.RenderTransform>
243                 <RotateTransform CenterX="1" CenterY="108" Angle="138"></RotateTransform>
244             </Rectangle.RenderTransform>
245         </Rectangle>
246
247         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
248             <Rectangle.RenderTransform>
249                 <RotateTransform CenterX="1" CenterY="108" Angle="144"></RotateTransform>
250             </Rectangle.RenderTransform>
251         </Rectangle>
252
253         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
254             <Rectangle.RenderTransform>
255                 <RotateTransform CenterX="1" CenterY="108" Angle="156"></RotateTransform>
256             </Rectangle.RenderTransform>
257         </Rectangle>
258
259         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
260             <Rectangle.RenderTransform>
261                 <RotateTransform CenterX="1" CenterY="108" Angle="162"></RotateTransform>
262             </Rectangle.RenderTransform>
263         </Rectangle>
264
265         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
266             <Rectangle.RenderTransform>
267                 <RotateTransform CenterX="1" CenterY="108" Angle="168"></RotateTransform>
268             </Rectangle.RenderTransform>
269         </Rectangle>
270
271         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
272             <Rectangle.RenderTransform>
273                 <RotateTransform CenterX="1" CenterY="108" Angle="174"></RotateTransform>
274             </Rectangle.RenderTransform>
275         </Rectangle>
276
277         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
278             <Rectangle.RenderTransform>
279                 <RotateTransform CenterX="1" CenterY="108" Angle="186"></RotateTransform>
280             </Rectangle.RenderTransform>
281         </Rectangle>
282
283         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
284             <Rectangle.RenderTransform>
285                 <RotateTransform CenterX="1" CenterY="108" Angle="192"></RotateTransform>
286             </Rectangle.RenderTransform>
287         </Rectangle>
288
289         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
290             <Rectangle.RenderTransform>
291                 <RotateTransform CenterX="1" CenterY="108" Angle="198"></RotateTransform>
292             </Rectangle.RenderTransform>
293         </Rectangle>
294
295         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
296             <Rectangle.RenderTransform>
297                 <RotateTransform CenterX="1" CenterY="108" Angle="204"></RotateTransform>
298             </Rectangle.RenderTransform>
299         </Rectangle>
300
301         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
302             <Rectangle.RenderTransform>
303                 <RotateTransform CenterX="1" CenterY="108" Angle="216"></RotateTransform>
304             </Rectangle.RenderTransform>
305         </Rectangle>
306
307         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
308             <Rectangle.RenderTransform>
309                 <RotateTransform CenterX="1" CenterY="108" Angle="222"></RotateTransform>
310             </Rectangle.RenderTransform>
311         </Rectangle>
312
313         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
314             <Rectangle.RenderTransform>
315                 <RotateTransform CenterX="1" CenterY="108" Angle="228"></RotateTransform>
316             </Rectangle.RenderTransform>
317         </Rectangle>
318
319         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
320             <Rectangle.RenderTransform>
321                 <RotateTransform CenterX="1" CenterY="108" Angle="234"></RotateTransform>
322             </Rectangle.RenderTransform>
323         </Rectangle>
324
325         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
326             <Rectangle.RenderTransform>
327                 <RotateTransform CenterX="1" CenterY="108" Angle="246"></RotateTransform>
328             </Rectangle.RenderTransform>
329         </Rectangle>
330
331         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
332             <Rectangle.RenderTransform>
333                 <RotateTransform CenterX="1" CenterY="108" Angle="252"></RotateTransform>
334             </Rectangle.RenderTransform>
335         </Rectangle>
336
337         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
338             <Rectangle.RenderTransform>
339                 <RotateTransform CenterX="1" CenterY="108" Angle="258"></RotateTransform>
340             </Rectangle.RenderTransform>
341         </Rectangle>
342
343         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
344             <Rectangle.RenderTransform>
345                 <RotateTransform CenterX="1" CenterY="108" Angle="264"></RotateTransform>
346             </Rectangle.RenderTransform>
347         </Rectangle>
348
349         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
350             <Rectangle.RenderTransform>
351                 <RotateTransform CenterX="1" CenterY="108" Angle="276"></RotateTransform>
352             </Rectangle.RenderTransform>
353         </Rectangle>
354
355         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
356             <Rectangle.RenderTransform>
357                 <RotateTransform CenterX="1" CenterY="108" Angle="282"></RotateTransform>
358             </Rectangle.RenderTransform>
359         </Rectangle>
360
361         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
362             <Rectangle.RenderTransform>
363                 <RotateTransform CenterX="1" CenterY="108" Angle="288"></RotateTransform>
364             </Rectangle.RenderTransform>
365         </Rectangle>
366
367         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
368             <Rectangle.RenderTransform>
369                 <RotateTransform CenterX="1" CenterY="108" Angle="294"></RotateTransform>
370             </Rectangle.RenderTransform>
371         </Rectangle>
372
373         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
374             <Rectangle.RenderTransform>
375                 <RotateTransform CenterX="1" CenterY="108" Angle="306"></RotateTransform>
376             </Rectangle.RenderTransform>
377         </Rectangle>
378
379         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
380             <Rectangle.RenderTransform>
381                 <RotateTransform CenterX="1" CenterY="108" Angle="312"></RotateTransform>
382             </Rectangle.RenderTransform>
383         </Rectangle>
384
385         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
386             <Rectangle.RenderTransform>
387                 <RotateTransform CenterX="1" CenterY="108" Angle="318"></RotateTransform>
388             </Rectangle.RenderTransform>
389         </Rectangle>
390
391         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
392             <Rectangle.RenderTransform>
393                 <RotateTransform CenterX="1" CenterY="108" Angle="324"></RotateTransform>
394             </Rectangle.RenderTransform>
395         </Rectangle>
396
397         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
398             <Rectangle.RenderTransform>
399                 <RotateTransform CenterX="1" CenterY="108" Angle="336"></RotateTransform>
400             </Rectangle.RenderTransform>
401         </Rectangle>
402
403         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
404             <Rectangle.RenderTransform>
405                 <RotateTransform CenterX="1" CenterY="108" Angle="342"></RotateTransform>
406             </Rectangle.RenderTransform>
407         </Rectangle>
408
409         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
410             <Rectangle.RenderTransform>
411                 <RotateTransform CenterX="1" CenterY="108" Angle="348"></RotateTransform>
412             </Rectangle.RenderTransform>
413         </Rectangle>
414
415         <Rectangle Width="2" Height="4" Fill="Black" Canvas.Left="119" Canvas.Top="12">
416             <Rectangle.RenderTransform>
417                 <RotateTransform CenterX="1" CenterY="108" Angle="354"></RotateTransform>
418             </Rectangle.RenderTransform>
419         </Rectangle>
420         <!--<Canvas.Triggers>
421             <EventTrigger RoutedEvent="Canvas.Loaded">
422                 <BeginStoryboard>
423                     <Storyboard Name="ClockAnimation">
424                         <DoubleAnimation Name="SecondAnim"  RepeatBehavior="Forever"
425                                          Storyboard.TargetName="SecondsAngle"
426                                          Storyboard.TargetProperty="Angle"
427                                          To="360" Duration="00:01:00"></DoubleAnimation>
428                         <DoubleAnimation Name="MinuteAnim"  RepeatBehavior="Forever"
429                                          Storyboard.TargetName="MinutesAngle"
430                                          Storyboard.TargetProperty="Angle"
431                                          To="360" Duration="01:00:00"></DoubleAnimation>
432                         <DoubleAnimation Name="HourAnim"  RepeatBehavior="Forever"
433                                          Storyboard.TargetName="HoursAngle"
434                                          Storyboard.TargetProperty="Angle"
435                                          To="360" Duration="12:00:00"></DoubleAnimation>
436                     </Storyboard>
437                 </BeginStoryboard>
438             </EventTrigger>
439         </Canvas.Triggers>-->
440     </Canvas>
441 </Window>

下面是模拟时钟的时间更新的C#代码部分。本打算直接在XAML代码中添加Storyboard控制，但后来发现使用C#代码相对灵活些。

 1  /// <summary>
 2         /// 定时更新时钟
 3         /// </summary>
 4         public void ClkStartTimer()
 5         {
 6             timer.Interval = TimeSpan.FromSeconds(1);
 7             timer.IsEnabled = true;
 8             timer.Tick += timer_Tick;
 9             timer.Start();
10         }
11
12         void timer_Tick(object sender, EventArgs e)
13         {
14             //throw new NotImplementedException();
15             SetClockTime();
16         }
17
18         /// <summary>
19         /// 启动时调用该函数，设定钟表显示为当前计算机时间。
20         /// </summary>
21         public void SetClockTime()
22         {
23             //设置秒针位置：
24             SecondsAngle.Angle = DateTime.Now.Second * 6;
25             //设置分针的位置
26             MinutesAngle.Angle = DateTime.Now.Minute * 6 + (DateTime.Now.Second / 60.0) * 6;
27             //设置时针的位置
28             int hour = DateTime.Now.Hour;
29             if (hour >= 12)
30             {
31                 hour -= 12;
32             }
33             HoursAngle.Angle = hour * 30 + (DateTime.Now.Minute / 2.0);
34             if (DateTime.Now.ToShortTimeString() == "00:00")
35             {
36                 SetClockDate();
37             }
38
39         }
40
41         /// <summary>
42         /// 设置日期
43         /// </summary>
44         public void SetClockDate()
45         {
46             dateTB.Text = string.Format("{0}年{1}月{2}日", DateTime.Now.Year,
47                 DateTime.Now.Month, DateTime.Now.Day);
48             string dateStr = DateTime.Now.ToShortDateString();
49             string[] strArr = dateStr.Split(new char[] { ‘-‘ });
50             weekDayTB.Text = strArr[strArr.Length - 1];
51         }

至此，使用WPF技术创建的模拟时钟已经可以正常工作了。期间也学习参考了网络上一些大神的代码，在此不一一列举了。总之，希望这篇文章可以对有需要的人有所帮助！

版权声明：本文为博主原创文章，未经博主允许不得转载。

时间： 2024-10-24 14:13:37

WPF模拟时钟制作的相关文章

使用ivx制作模拟时钟的经验总结

之前的帖子里已经使用时间轴和轨迹实现了很多的效果,今天我们来做一个模拟时钟.主要思路是用一个作为表盘,三个矩形分别作为时针,分针和秒针,通过各自轨迹设置他们在同一时间轴下的转动圈数成一定比例关系. 1.表盘首先是添加椭圆组件,这里我们需要设置它的原点横纵坐标都是50%,这样椭圆组件的XY坐标就是它的中心店坐标,这个XY坐标在我们设置指针的时候也要用到.2.添加指针指针使用矩形来展示的,由于指针要绕着表盘的中心点旋转,所以我们要将矩形的坐标原点与椭圆的坐标原点设置在同一个位置.因此先设置矩形的原点

模拟时钟

1 #include <Windows.h> 2 #include <tchar.h> 3 #include <math.h> 4 typedef struct Time 5 { 6 int hour, min, sec; 7 }TimeStructure; 8 BOOLEAN InitWindowClass(HINSTANCE hInstance, int nCmdShow); 9 LRESULT CALLBACK WndProc(HWND, UINT, WPARAM

wpf 模拟3D效果(和手机浏览图片效果相似)（附源码）

原文 wpf 模拟3D效果(和手机浏览图片效果相似)(附源码) pf的3D是一个很有意思的东西,类似于ps的效果,类似于电影动画的效果,因为动画的效果,(对于3D基础的摄像机,光源,之类不介绍,对于依赖属性也不介绍.),个人认为,依赖属性这个东西,有百分之五十是为了3D而存在.(自己写的类似于demo的东西)先上图,无图无真相这是demo的整个效果图,可以用鼠标移动,触摸屏也可以手指滑动,图片会移动,然后移动结束,会有一个回弹的判断. <Window x:Class="_3Dshow.Wi

JS模拟时钟

<html> <head> <title>js模拟时钟</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body onLoad="setInterval(setTimeSpan,1000);"> <span style="fon

模拟时钟(AnalogClock)和数字时钟(DigitalClock)

Demo2\clock_demo\src\main\res\layout\activity_main.xml 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 and

纯js+html+css实现模拟时钟

前几天没事写的个模拟时钟,代码仅供小白参考,大神请自动绕过. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模拟时钟</title> 6 <style> 7 body { 8 margin: 0; 9 padding: 0; 10 } 11 12 #blockDial {

模拟时钟（AnalogClock）

显示一个带时钟和分针的表面 会随着时间的推移变化 常用属性: android:dial 可以为表面提供一个自定义的图片 下面我们直接看代码: 1.Activity //模拟时钟 public class AnalogClockActivity extends Activity { private TextView timeTextView; private Handler handler; protected void onCreate(Bundle savedInstanceState) {

WinForm学习 --简单的模拟时钟程序

今天学习GDI+,试着想写一个模拟时钟的小程序,原以为很简单实现:但其实还有些复杂,特别是利用三角函数的那部分,让我四处找资料恶补了一下高中数学才算弄清楚,现在就回顾一下这个程序吧. 程序的目的是要模拟出时钟的效果,那首先就是要画出这个时钟的样子.不考虑美观,一个时钟最简单的组成是一个圆形的表盘,三根直线代表的时针.分针和秒针. <img缺失> 看起来很简单吧,但要怎么样画呢?让我们一步一步来吧: 1.画表盘 Graphics g = this.CreateGraphics(); //创建一个

WIN32下的模拟时钟

#include <Windows.h> #include <math.h> #include <tchar.h> #include "resource.h" #define PI 3.1415926 BOOLEAN InitWindowClass(HINSTANCE hInstance, int nCmdShow); LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM); int WINAPI W