WPF在样式定义和UI动画上面相对于以前的技术有了不少的提升，为了更好的对UI动画有一个清晰的感受。下面给出一个示例程序，即用WPF技术实现钟表的效果，其中包含秒针、分针和时针，它们都是由WPF动画进行驱动。
1 项目结构
首先，在Visual Studio IDE中新建一个WPF应用程序，命名为WpfClock，在项目中新建一个images文件夹，并准备一个钟表的背景图片和程序图标素材。程序结构如下图所示：
2 程序实现
MainWindow.xaml是UI主界面，它由App.xaml负责启动。这里首先需要编辑MainWindow.xaml文件，对UI进行定制，核心代码如下(指针都是用Rectangle实现的，当然可以用图片代替)：
<Windowx:Class="WpfClock.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="MainWindow"Margin="2"Height="327"Width="311"AllowsTransparency="True"WindowStyle="None"Background="Transparent"WindowStartupLocation="CenterScreen"Icon="images/clock.ico"ResizeMode="NoResize"Topmost="False"Opacity="1"><GridWidth="300"Height="300"MouseLeftButtonDown="Grid_MouseLeftButtonDown"><ImageSource="images/backGround.png"></Image><LabelName="lab商标"Foreground="White"Margin="0,0,0,211"HorizontalAlignment="Center"VerticalAlignment="Bottom"Height="Auto"Width="Auto"FontSize="13">JackMoon</Label><LabelName="lab创建时间"Foreground="White"Margin="0,91,0,0"HorizontalAlignment="Center"VerticalAlignment="Top"Height="Auto"Width="Auto">1987</Label><!-- 秒针定义 --><RectangleMargin="150,0,149,150"Name="rectangleSecond"Stroke="White"Height="120"VerticalAlignment="Bottom"Width="1"><Rectangle.RenderTransform><RotateTransformx:Name="secondPointer"CenterX="0"CenterY="120"Angle="0"/></Rectangle.RenderTransform></Rectangle><!-- --><!-- 分钟定义 --><RectangleMargin="150,49,149,151"Name="rectangleMinute"Stroke="LightGreen"Width="1"><Rectangle.RenderTransform><RotateTransformx:Name="minutePointer"CenterX="0"CenterY="100"Angle="45"/></Rectangle.RenderTransform></Rectangle><!-- --><!-- 时针定义 --><RectangleMargin="150,80,149,150"Name="rectangleHour"Stroke="LightYellow"Width="1"><Rectangle.RenderTransform><RotateTransformx:Name="hourPointer"CenterX="0"CenterY="70"Angle="90"/></Rectangle.RenderTransform></Rectangle><!----><LabelContent="08:08:08"FontSize="16"Foreground="White"Height="Auto"HorizontalAlignment="Center"Margin="114,0,113,86"Name="labTime"VerticalAlignment="Bottom"Width="Auto"/></Grid></Window>
其中对于主界面中的窗口用如下属性进行设置，其中的WindowStyle="None"表示去除默认的窗口样式，而 Background="Transparent"则表示窗口背景色为透明色，这样就可以用图片来显示钟表的底盘。而 WindowStartupLocation设置为"CenterScreen"表示居中显示。Icon="images/clock.ico"表示程序的图标。WPF可以用RotateTransform中的Angle进行旋转，可以指定中心点（CenterX,CenterY)。钟表的分钟、时针和秒针都是用Rectangle来实现的，其中对针的宽度，颜色等进行了定义，同时用RotateTransform对Rectangle对象进行旋转。而各个针的旋转频率需要按照实际的时间进行动态操作。这里就需要用后台代码进行实现。下面给出后台文件的核心代码：
usingSystem; usingSystem.Collections.Generic; usingSystem.Linq; usingSystem.Text; usingSystem.Windows; usingSystem.Windows.Controls; usingSystem.Windows.Data; usingSystem.Windows.Documents; usingSystem.Windows.Input; usingSystem.Windows.Media; usingSystem.Windows.Media.Imaging; usingSystem.Windows.Navigation; usingSystem.Windows.Shapes; namespaceWpfClock{ usingSystem.Threading; usingSystem.Windows.Threading; /// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>publicpartialclassMainWindow : Window { //计时器System.Timers.Timertimer=newSystem.Timers.Timer(1000); publicMainWindow() { 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"); #endregiontimer.Elapsed+=newSystem.Timers.ElapsedEventHandler(timer_Elapsed); timer.Enabled=true; } privatevoidGrid_MouseLeftButtonDown(objectsender, MouseButtonEventArgse) { //进行拖放移动this.DragMove(); } privatevoidtimer_Elapsed(objectsender, System.Timers.ElapsedEventArgse) { //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"); })); } } }
首先用System.Timers.Timer timer = new System.Timers.Timer(1000)定义了一个时间间隔为1秒的计时器，在WPF中更新UI元素，需要使用this.Dispatcher.Invoke进行异步更新，秒针转动,秒针绕一圈360度，共60秒，所以1秒转动6度，即secondPointer.Angle = DateTime.Now.Second * 6。同理，分针转动,分针绕一圈360度，共60分，所以1分转动6度，即minutePointer.Angle = DateTime.Now.Minute * 6。
3 效果
编译运行，示例结果如下：
