WPF实现钟表效果

更新时间：2020年6月25日 11:16 点击：1711

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

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

接下来就是代码了。

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

<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>

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

下面就是程序的代码了。

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();
    }

  }
}

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

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

[!--infotagslink--]

上一篇: C# WinForm程序设计简单计算器

下一篇: C#开发简易winform计算器程序

c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)
这篇文章主要介绍了c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)，帮助大家更好的理解和学习使用c#，感兴趣的朋友可以了解下...2021-03-03
WPF实现类似360安全卫士界面的程序源码分享
最近在网上看到了新版的360安全卫士，感觉界面还不错，于是用WPF制作了一个，时间有限，一些具体的控件没有制作，用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25
WPF仿三星手机充电界面实现代码
这篇文章主要为大家详细介绍了WPF仿三星手机充电界面实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25
C# WPF 通过委托实现多窗口间的传值的方法
这篇文章主要介绍了C# WPF 通过委托实现多窗口间的传值的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
WPF TextBox实现按字节长度限制输入功能
这篇文章主要为大家详细介绍了WPF TextBox实现按字节长度限制输入功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25
C#中WPF使用多线程调用窗体组件的方法
这篇文章主要介绍了C#中WPF使用多线程调用窗体组件的方法,涉及C#中多线程的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
WPF InkCanvas绘制矩形和椭圆
这篇文章主要为大家详细介绍了WPF InkCanvas绘制矩形和椭圆，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25
WPF基础教程之形状画刷与变换详解
这篇文章主要给大家介绍了关于WPF基础教程之形状画刷与变换的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
WPF如何自定义TabControl控件样式示例详解
这篇文章主要给大家介绍了关于WPF如何自定义TabControl控件样式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。...2020-06-25
WPF水珠效果按钮组的实现教程
下面小编就为大家分享一篇WPF水珠效果按钮组的实现教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-09-22
解析WPF实现音频文件循环顺序播放的解决方法
本篇文章是对WPF实现音频文件循环顺序播放的方法进行了详细的分析介绍，需要的朋友参考下...2021-09-22
在Winform和WPF中注册全局快捷键实现思路及代码
如果注册快捷键，RegisterHotKey中的fsModifiers参数为0，即None选项，一些安全软件会警报，可能因为这样就可以全局监听键盘而造成安全问题,感兴趣的你可以参考下本文...2020-06-25
WPF实现转圈进度条效果
这篇文章主要为大家详细介绍了WPF实现转圈进度条效果，如何设计自定义的绕圈进度条，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-22
WPF中自定义GridLengthAnimation
这篇文章主要为大家详细介绍了WPF中自定义GridLengthAnimation的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-22
WPF/Silverlight实现图片局部放大的方法分析
这篇文章主要介绍了WPF/Silverlight实现图片局部放大的方法,结合实例形式分析了WPF/Silverlight针对图片属性操作相关实现技巧,需要的朋友可以参考下...2020-06-25
WPF MVVM制作发送短信小按钮
这篇文章主要为大家详细介绍了WPF MVVM发送短信小按钮的制作方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25
WPF中窗体最大化问题的解决方法
这篇文章主要给大家介绍了关于WPF中窗体最大化问题的解决方法，文中通过示例代码介绍的非常详细，对大家学习或者使用wpf具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
C# WPF 父控件通过使用可视化树找到子控件的示例代码
这篇文章主要介绍了C# WPF 父控件通过使用可视化树找到子控件的示例代码,需要的朋友可以参考下...2020-06-25
WPF如何绘制光滑连续贝塞尔曲线示例代码
贝塞尔曲线，又称贝兹曲线或贝济埃曲线，一般的矢量图形软件通过它来精确画出曲线，下面这篇文章主要给大家介绍了关于WPF如何绘制光滑连续贝塞尔曲线的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。...2020-06-25
WPF的ListView控件自定义布局用法实例
这篇文章主要介绍了WPF的ListView控件自定义布局的方法,结合实例形式分析了WPF中ListView控件的布局方法,需要的朋友可以参考下...2020-06-25

WPF实现钟表效果

相关文章

阁下可能感兴趣的内容

推荐阅读