WPF在樣式定義和UI動畫上面相對于以前的技術有了不少的提升,下面給出WPF技術實現鐘表的效果:
1、Visual Studio新建一個WPF應用程序,命名為WpfClock,新建一個images文件夾,并準備一個鐘表的背景圖片和程序圖標素材。
2、編輯MainWindow.xaml文件,對UI進行定制,代碼如下(指針都是用Rectangle實現的,當然可以用圖片代替):
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.Navigation;using System.Windows.Shapes;namespace WpfClock{ using System.Threading; using System.Windows.Threading; /// <summary> /// MainWindow.xaml 的交互邏輯 /// </summary> public partial class MainWindow : Window { //計時器 System.Timers.Timer timer = new System.Timers.Timer(1000); public MainWindow() { InitializeComponent(); #region 初始化時間 secondPointer.Angle = DateTime.Now.Second * 6; minutePointer.Angle = DateTime.Now.Minute * 6; hourPointer.Angle = (DateTime.Now.Hour * 30) + (DateTime.Now.Minute * 0.5); this.labTime.Content = DateTime.Now.ToString("HH:mm:ss"); #endregion timer.Elapsed += new System.Timers.ElapsedEventHandler(timer_Elapsed); timer.Enabled = true; } private void Grid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { //進行拖放移動 this.DragMove(); } private void timer_Elapsed(object sender, System.Timers.ElapsedEventArgs e) { //UI異步更新 this.Dispatcher.Invoke(DispatcherPriority.Normal, (Action)(() => { //秒針轉動,秒針繞一圈360度,共60秒,所以1秒轉動6度 secondPointer.Angle = DateTime.Now.Second * 6; //分針轉動,分針繞一圈360度,共60分,所以1分轉動6度 minutePointer.Angle = DateTime.Now.Minute * 6; //時針轉動,時針繞一圈360度,共12時,所以1時轉動30度。 //另外同一個小時內,隨著分鐘數的變化(繞一圈60分鐘),時針也在緩慢變化(轉動30度,30/60=0.5) hourPointer.Angle = (DateTime.Now.Hour * 30)+ (DateTime.Now.Minute * 0.5); //更新時間值 this.labTime.Content = DateTime.Now.ToString("HH:mm:ss"); })); } }}
3、編輯MainWindow.xaml.CS文件,對后臺邏輯進行定制,代碼如下:
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.Navigation;using System.Windows.Shapes;namespace WpfClock{ using System.Threading; using System.Windows.Threading; /// <summary> /// MainWindow.xaml 的交互邏輯 /// </summary> public partial class MainWindow : Window { //計時器 System.Timers.Timer timer = new System.Timers.Timer(1000); public MainWindow() { InitializeComponent(); #region 初始化時間 secondPointer.Angle = DateTime.Now.Second * 6; minutePointer.Angle = DateTime.Now.Minute * 6; hourPointer.Angle = (DateTime.Now.Hour * 30) + (DateTime.Now.Minute * 0.5); this.labTime.Content = DateTime.Now.ToString("HH:mm:ss"); #endregion timer.Elapsed += new System.Timers.ElapsedEventHandler(timer_Elapsed); timer.Enabled = true; } private void Grid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { //進行拖放移動 this.DragMove(); } private void timer_Elapsed(object sender, System.Timers.ElapsedEventArgs e) { //UI異步更新 this.Dispatcher.Invoke(DispatcherPriority.Normal, (Action)(() => { //秒針轉動,秒針繞一圈360度,共60秒,所以1秒轉動6度 secondPointer.Angle = DateTime.Now.Second * 6; //分針轉動,分針繞一圈360度,共60分,所以1分轉動6度 minutePointer.Angle = DateTime.Now.Minute * 6; //時針轉動,時針繞一圈360度,共12時,所以1時轉動30度。 //另外同一個小時內,隨著分鐘數的變化(繞一圈60分鐘),時針也在緩慢變化(轉動30度,30/60=0.5) hourPointer.Angle = (DateTime.Now.Hour * 30)+ (DateTime.Now.Minute * 0.5); //更新時間值 this.labTime.Content = DateTime.Now.ToString("HH:mm:ss"); })); } }}
4、編譯運行,如果運氣不錯的話,應該能顯示如下效果:
總結
WPF可以用RotateTransform中的Angle進行旋轉,可以指定中心點(CenterX,CenterY)
<Rectangle.RenderTransform> <RotateTransform x:Name="hourPointer" CenterX="0" CenterY="70" Angle="90" /> </Rectangle.RenderTransform>
以上就是WPF技術實現時鐘的效果,小編的水平有限,如果有錯誤的地方請大家諒解,大家共同進步。
新聞熱點
疑難解答