WPF实现钟表效果

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

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

接下来就是代码了。

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

<Window x:Class="QQDemo1.DateTimew"
    xmlns="http://www.easck.com/winfx/2006/xaml/presentation"
    xmlns:x="http://www.easck.com/winfx/2006/xaml"
  <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>
								 
 1/2    1 2 下一页 尾页