WPF实现钟表效果
时间:2019-04-13
本文章向大家介绍WPF实现钟表效果,主要包括WPF实现钟表效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
和之前一样首先看一下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(); } } }
这个动画的实现实在场景里面去实现的。下一节,会说到在代码里面如何去控制整个动画的实现!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Mac环境变量设置(以ADB为例)
- Linux 基础之定时任务
- Git库迁移步骤(从服务器A迁移至服务器B)
- springboot源码解析(四)
- 第2天:网易2018年校园招聘NLP算法工程师笔试试卷分析(二)
- Windows下Scoop安装、配置与使用
- Flutter免费iOS真机调试 AndroidStudio iPhone真机运行教程
- Flutter GridView 网格控件
- Flutter ListView 下拉刷新,上拉加载更多
- Flutter问题:import 'package:english_words/english_words.dart'失败
- 第17天:NLP实战(一)——爬取语料及其简单分析
- 搞懂 Redis 缓存穿透、击穿、雪崩
- win10_opencv4.2_cuda11_vs2019 编译
- (Demo分享)利用JavaScript(JS)做一个可输入分钟的倒计时钟功能
- Flutter ListView 列表控件