WPF的时钟

最新推荐文章于 2024-06-12 17:20:19 发布
最新推荐文章于 2024-06-12 17:20:19 发布
阅读量560 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014277398/article/details/45372125
版权

先上图，WPF半透明风时钟，我的大爱啊~~羡慕

大神养成计划第一阶段开启~


 
<Window x:Class="Timely.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="MainWindow" Height="300" Width="450" WindowStyle="None" AllowsTransparency="True" Background="{x:Null}"
         MouseLeftButtonDown="Window_MouseLeftButtonDown">
         <Canvas Height="270" Width="430">
         <Border Height="270" Width="430" CornerRadius="15" Background="Yellow" Opacity="0.4" Canvas.Left="0" Canvas.Top="0"></Border>
         <Border Height="30" Width="430" Canvas.Top="0" CornerRadius="10" Background="Cyan" Opacity="0.5">
             <Label Height="25" Width="180" Content="TIMELY designed by wff"></Label>
         </Border>
         <Image Source="Image\close.png" Height="25" Width="25" Canvas.Left="397" Canvas.Top="1" MouseLeftButtonDown="Image_MouseLeftButtonDown"></Image>
         <Image Source="Image\77.png" x:Name="img_pp"  Height="60" Width="60" Canvas.Top="40" Canvas.Left="347">
             <Image.RenderTransform>
                 <TransformGroup>
                     <TranslateTransform></TranslateTransform>
                 </TransformGroup>
             </Image.RenderTransform>
         </Image>
         <Image Source="Image\background.png" Height="180" Width="190" Canvas.Left="12" Canvas.Top="52"></Image>
         <Image Source="Image\1.png" Height="20" Width="20" Canvas.Left="126" Canvas.Top="78"></Image>
         <Image Source="Image\2.png" Height="20" Width="20" Canvas.Left="152" Canvas.Top="97"></Image>
         <Image Source="Image\3.png" Height="20" Width="20" Canvas.Left="158" Canvas.Top="129"></Image>
         <Image Source="Image\4.png" Height="20" Width="20" Canvas.Left="151" Canvas.Top="164"></Image>
         <Image Source="Image\5.png" Height="20" Width="20" Canvas.Left="128" Canvas.Top="185"></Image>
         <Image Source="Image\6.png" Height="20" Width="20" Canvas.Left="96" Canvas.Top="195"></Image>
         <Image Source="Image\7.png" Height="20" Width="20" Canvas.Left="64" Canvas.Top="188"></Image>
         <Image Source="Image\8.png" Height="20" Width="20" Canvas.Left="42" Canvas.Top="164"></Image>
         <Image Source="Image\9.png" Height="20" Width="20" Canvas.Left="32" Canvas.Top="131"></Image>
         <Image Source="Image\1.png" Height="16" Width="20" Canvas.Left="37" Canvas.Top="99"></Image>
         <Image Source="Image\0.png" Height="16" Width="20" Canvas.Left="46" Canvas.Top="99"></Image>
         <Image Source="Image\1.png" Height="16" Width="20" Canvas.Left="63" Canvas.Top="76"></Image>
         <Image Source="Image\1.png" Height="16" Width="20" Canvas.Left="71" Canvas.Top="76"></Image>
         <Image Source="Image\1.png" Height="16" Width="20" Canvas.Left="92" Canvas.Top="68"></Image>
         <Image Source="Image\2.png" Height="16" Width="20" Canvas.Left="101" Canvas.Top="68"></Image>
 
 
         <Image Source="Image\hour.png" x:Name="img_hour" Height="80" Width="30" Canvas.Left="91" Canvas.Top="87" 
                RenderTransformOrigin="0.5,0.7">
             <Image.RenderTransform>
                 <TransformGroup>
                     <RotateTransform x:Name="TM_Hour"></RotateTransform>
                 </TransformGroup>
             </Image.RenderTransform>
         </Image>
         <Image Source="Image\minute.png" x:Name="img_minute" Height="80" Width="30" Canvas.Left="91" Canvas.Top="87" 
                RenderTransformOrigin="0.5,0.7">
             <Image.RenderTransform>
                 <TransformGroup>
                     <RotateTransform x:Name="TM_Minute"></RotateTransform>
                 </TransformGroup>
             </Image.RenderTransform>
         </Image>
         <Image Source="Image\second.png" x:Name="img_second"  Height="80" Width="30" Canvas.Left="91" Canvas.Top="87"
                RenderTransformOrigin="0.5,0.7">
             <Image.RenderTransform>
                 <TransformGroup>
                     <RotateTransform x:Name="TM_Second"></RotateTransform>
                 </TransformGroup>
             </Image.RenderTransform>
         </Image>
 
 </Canvas>
 </Window> 

 

布局代码如上，UI搞定
 

有一点需要注意<RotateTransform x:Name="TM_Second"></RotateTransform>我已经在代码中标红
 

在这里，我为旋转动画添加了一个名字，这样我就能在cs文件中访问到旋转动画的Angel属性，并为其赋值
 


 
 


 
 


 
 

接着是如何调用系统时间，然后确定时分秒的指针转动的角度
 


 
 

首先，我们要知道在wpf中也有类似于winfom中的timer类DispatcherTimer；
 

然后根据当前时间计算当前时针分针秒针的位置
 

接着，确定每秒中指针应该转动的角度
 


 
 

下面开始实现
 

cs文件中引入using System.Windows.Threading;
 
 

然后在mainwindow的初始化函数下边调用我们自己的初始化函数open（）{
 

    DispatcherTimer timer = new DispatcherTimer();
             timer.Interval = TimeSpan.FromMilliseconds(1);//每毫秒执行一次，这里我主要是想实现平滑的转动，而不是
 

                                                                                      //一般时钟的跳动；
             timer.Tick += new EventHandler(timer_Tick);//为timer绑定事件
             timer.Start();开启代码
 
 

}
 

接下来是绑定事件的代码void timer_Tick(object sender, EventArgs e)
         {
             int hour = DateTime.Now.Hour;//获取当前时间的小时数
             int minute = DateTime.Now.Minute;/获取当前时间的分钟数
             int second = DateTime.Now.Second;/获取当前时间的秒数
             int second2 = DateTime.Now.Millisecond;/获取当前时间的毫秒数
 


             TM_Second.Angle = second*6+second2 * 0.006;//秒针应该转动的角度
             TM_Minute.Angle = second/10+minute*6;//分针应该转动的角度
             TM_Hour.Angle = minute/2+hour * 30;//时针应该转动的角度
 }
 


 
 

ok，到这里就已经实现整个时钟的转动完成~
 

PS，学C#的wpf才一节课，实现时钟真心有难度，网上找了很多的资料，好像有什么数据绑定，但是看了表示完全看不懂。。。。于是灵机一转想到了可不可以用timer，然后去百度，竟然让我给找到了关于winfom和wpftimer的比较。。可惜当时是用手机找的，没有记下博客的地址，总之谢谢这位帅哥给我的灵感~
 


 
 

 

博客原创，转载请注明出处，谢谢~、
 

需要源码，请发邮件wff_1994@126.com索取~（害羞我这个小白都感觉已经很详细了~，应该不需要源码了吧）
 


                

        

        

    




    

      

        

            

              
                
                  聆风的老鼠
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
wpf自己画表盘_练手WPF（一）——模拟时钟与数字时钟的制作（上）

				
			

			

				

					weixin_35965051的博客
				

				

					12-24
					
					864
					
				

			

		

		

			
				
一、Visual Studio创建一个WPF项目。简单调整一下MainWindow.xaml文件。主要使用了两个Canvas控件，分别用于显示模拟和数字时钟，命名为AnalogCanvas、digitCanvas。代码如下：Title="Moon Clock"Height="600"Width="1280"WindowStartupLocation="CenterScreen">二、模拟时钟...

			
		

	



                

              
                



	

		

			

				
					
wpf-时钟

				
			

			

				

					weixin_45105458的博客
				

				

					01-06
					
					322
					
				

			

		

		

			
				
XAML


<Window x:Class="wpf动画.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  ...

			
		

	



                


  
              

                


	

		

			

				
					
WPF制作的小时钟

				
			

			

				

					weixin_34253539的博客
				

				

					02-02
					
					102
					
				

			

		

		

			
				
周末无事, 看到WEB QQ上的小时钟挺可爱的, 于是寻思着用WPF模仿着做一个.
先看下WEB QQ的图:

打开VS, 开始动工. 建立好项目后, 面对一个空荡荡的页面, 首先想下时钟是怎么构成的. 从图中看到, 时钟被一个黑色的圆环包围, 里面有12个代表小时的刻度线, 等比例的分布在圆环内侧. 中间有个小圆环, 是指针的中心. 3个小指针以圆的中心转动.
第一步, 画出外部的圆环:...

			
		

	





	

		

			

				
					
WPF 时钟示例

				
			

			

				

					韬光养晦
				

				

					03-16
					
					1028
					
				

			

		

		

			
				
WPF 时钟示例
一.首先添加一个自定义控件 Clock
导入两个引用：Microsoft.Expression.Controls.dll 和 Microsoft.Expression.Drawing.dll
Generic.xaml代码：
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/...

			
		

	



		

			
		



	

		

			

				
					
C#WPF时钟-自定义控件

					
最新发布

				
			

			

				

					小豹的博客
				

				

					06-12
					
					429
					
				

			

		

		

			
				
C#WPF-自定义控件

			
		

	





	

		

			

				
					
制作WPF时钟之2

					
热门推荐

				
			

			

				

					祝紫山（大可山人）博客[GDI+,WPF, .Net图形图像]
				

				

					12-12
					
					1万+
					
				

			

		

		

			
				
前段时间写了一篇“制作简单的WPF时钟”，今天再制作了一个更漂亮的WPF时钟，目前仅完成了设计部分，准备将它制作成一个无边框窗体式的时钟。效果图：  前次采用的是从Control控件继承，就是：public class Clock : Control，然后在Window中加入：标签的方式。这次准备采用另一种方式，就是：Storyboard，这是因为Storyboard也有定时完成某些指

			
		

	





	

		

			

				
					
wpf3D时钟

				
			

			

				

					01-20
				

			

		

		

			
				
wpf3D时钟

			
		

	





	

		

			

				
					
WPF 时钟效果

				
			

			

				

					☞机器猫ღ的博客
				

				

					05-28
					
					353
					
				

			

		

		

			
				
开发工具与关键技术：WPF

先用Visual Studio新建一个WPF窗口，随便命名，在解决方案资源管理器里新建一个images文件夹存放时钟图片；图片自己去百度找；
双击创建的xaml窗口，编辑设计器，
Xaml代码如下：
<Window x:Class="WpfApplication.Window6"
        xmlns="http://schemas.microsoft.c...

			
		

	





	

		

			

				
					
WPF实现时钟特效

				
			

			

				

					09-03
				

			

		

		

			
				
在本文中，我们将深入...总的来说，这个简单的WPF时钟示例展示了如何结合XAML和C#来创建动态UI，以及如何使用定时器来实现周期性更新。通过这种方式，开发者可以利用WPF的强大功能来创建更复杂、更吸引人的用户界面。

			
		

	





	

		

			

				
					
WPF 翻页时钟

				
			

			

				

					05-08
				

			

		

		

			
				
【WPF 翻页时钟】是一种使用Windows Presentation Foundation（WPF）框架设计的数字时钟，它的显示方式类似于传统的翻页式机械钟表，每过一分钟，时钟的数字就会翻转一次来更新时间。这个项目为开发者提供了一个学习...

			
		

	





	

		

			

				
					
wpf时钟动画

				
			

			

				

					12-22
				

			

		

		

			
				
通过以上步骤，你将能够创建一个美观且功能齐全的WPF时钟应用，其中包含平滑的动画效果。这个项目非常适合初学者，因为它涵盖了WPF的基本概念，如布局、图形绘制、动画和数据绑定，同时也是一个实用的实战项目。

			
		

	





	

		

			

				
					
WPF 时钟 Clock.UI.zip

				
			

			

				

					11-22
				

			

		

		

			
				
标签 "C# 时钟" 指出这个WPF时钟控件是用C#编程语言编写的。C#是.NET框架的主要开发语言，非常适合构建桌面应用程序，包括WPF应用。开发者可以利用C#的强大特性和.NET框架的丰富库来实现复杂的逻辑和交互。  压缩包...

			
		

	





	

		

			

				
					
WPF时钟小程序

				
			

			

				

					01-08
				

			

		

		

			
				
**WPF时钟小程序详解**  WPF（Windows Presentation Foundation）是.NET Framework的一部分，它提供了一个强大的框架，用于构建丰富的、互动的用户界面。这个时钟小程序是利用WPF的特性来实现的，它展示了如何在WPF...

			
		

	





	

		

			

				
					
SkiaSharp 之 WPF 自绘时钟（案例版）

				
			

			

				

					dotNET跨平台
				

				

					07-14
					
					492
					
				

			

		

		

			
				
SkiaSharp是一个跨平台2D图形API，用于.NET平台，基于Google's Skia Graphics库(skia.org网站). 它提供了一个全面的2D API，可以跨移动、服务器和桌面模型来渲染图像。该图形库可实现获取指定坐标像素值、绘制2d图形、绘制文字（必须有相应字库支持）、创建缩略图等，微软是大力支持的。可见此地址:https://docs.micro...

			
		

	





	

		

			

				
					
制作简单的WPF时钟

				
			

			

				

					祝紫山（大可山人）博客[GDI+,WPF, .Net图形图像]
				

				

					10-26
					
					1万+
					
				

			

		

		

			
				
在很早之前，我曾经写过一个GDI+的时钟，见“C#时钟控件 （C# Clock Control）” http://blog.csdn.net/johnsuna/archive/2006/02/13/597746.aspx及“使用C#编写LED样式时钟控件”（http://blog.csdn.net/johnsuna/archive/2006/02/14/598867.aspx），进入WPF时代了，

			
		

	





	

		

			

				
					
WPF做的简单Clock

				
			

			

				

					坤的专栏
				

				

					06-23
					
					1146
					
				

			

		

		

			
				
Clock.xaml:
<Window x:Class="WPFapp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title=

			
		

	





	

		

			

				
					
Wpf实现钟表效果

				
			

			

				

					守护明天的博客
				

				

					09-08
					
					1880
					
				

			

		

		

			
				
和之前一样首先看一下效果图 
是不是很炫酷，上面的那个花都是带有动画效果的图片 
接下来就是代码了 
首先看一下整个场景的布局搭建<Window x:Class="QQDemo1.DateTimew"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://sc

			
		

	





	

		

			

				
					
WPF中绘制一个钟表

				
			

			

				

					zls365365的博客
				

				

					02-28
					
					67
					
				

			

		

		

			
				
一个时钟的效果画一个人钟表也挺简单的，就是对度数是要计算的，用到的方法，也就画圆和画路径以及画文本几个方法。要在WPF中绘制一个钟表，您可以使用XAML和C#的组合来创建界面和实现逻辑。以下是一个简单示例：1. 创建一个新的WPF项目，并在MainWindow.xaml文件中添加以下代码：```xaml
<Window x:Class="ClockApp.MainWindow"
      ...

			
		

	





	

		

			

				
					
wpf时钟

				
			

			

				

					05-26
				

			

		

		

			
				
在 WPF 中实现时钟可以使用 System.Windows.Threading.DispatcherTimer 类。以下是一个简单的示例：

XAML 代码：

```xaml
<Window x:Class="WpfApp.ClockWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Clock" Height="150" Width="250">
    <Grid>
        <TextBlock x:Name="txtTime" FontSize="30" TextAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Window>
```

C# 代码：

```csharp
using System;
using System.Windows;

namespace WpfApp
{
    public partial class ClockWindow : Window
    {
        private readonly System.Windows.Threading.DispatcherTimer _timer;

        public ClockWindow()
        {
            InitializeComponent();

            // 创建一个计时器，并设置间隔为 1 秒
            _timer = new System.Windows.Threading.DispatcherTimer();
            _timer.Interval = TimeSpan.FromSeconds(1);

            // 注册 Tick 事件处理程序
            _timer.Tick += Timer_Tick;

            // 启动计时器
            _timer.Start();
        }

        private void Timer_Tick(object sender, EventArgs e)
        {
            // 更新文本块的内容为当前时间
            txtTime.Text = DateTime.Now.ToString("HH:mm:ss");
        }
    }
}
```

在构造函数中创建一个 `DispatcherTimer` 对象，并设置 `Interval` 属性为 `TimeSpan.FromSeconds(1)`，即每秒触发一次 `Tick` 事件。

然后注册 `Tick` 事件处理程序，在该处理程序中更新文本块的内容为当前时间。最后启动计时器。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值