闹钟实例

<Window x:Class="Microsoft.Samples.WinFX.AlarmClock.TraditionalClock"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Name="clockWindow"
    AllowsTransparency="true"
    Background="Transparent"
    WindowStyle="None"
    MouseLeftButtonDown="LeftButtonDown"
    >

    <Window.Resources>
        <Storyboard x:Key="clockHandStoryboard">
            <ParallelTimeline>
                <DoubleAnimation From="0" To="360" Duration="00:01:00" RepeatBehavior="Forever"
                                Storyboard.TargetProperty="Angle" Storyboard.TargetName="secondHandAngle"/>
                <DoubleAnimation From="0" To="360" Duration="12:00:00" RepeatBehavior="Forever"
                                Storyboard.TargetProperty="Angle" Storyboard.TargetName="hourHandAngle" />
                <DoubleAnimation From="0" To="360" Duration="01:00:00" RepeatBehavior="Forever" 
                                Storyboard.TargetProperty="Angle" Storyboard.TargetName="minuteHandAnimation" />
            </ParallelTimeline>
        </Storyboard>
    </Window.Resources>

    <Canvas Name="clockCanvas" Width="292" Height="493"  >
        <!--Starts up the clock hand animation when the canvas is first loaded-->
        <Canvas.Triggers>
            <EventTrigger RoutedEvent="Canvas.Loaded">
                <EventTrigger.Actions>
                    <BeginStoryboard Name ="clockHandStoryboard" Storyboard="{StaticResource clockHandStoryboard}" />
                </EventTrigger.Actions>
            </EventTrigger>
        </Canvas.Triggers>

    <!--Clock hands-->
    <Image Source="TradClock.png" Loaded="SetTime" />
    <Polygon Name="hourHand"
            Canvas.Top="214" Canvas.Left="173"
            Points="0,5 3,0 4,0 8,5 8,50 0,50">
      <Polygon.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
          <LinearGradientBrush.GradientStops>
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="1" Color="DarkGray" />
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
      </Polygon.Fill>
      <Polygon.RenderTransform>
        <RotateTransform x:Name="hourHandAngle" CenterX="4" CenterY="45" />
      </Polygon.RenderTransform>
    </Polygon>
    <Polygon Name="minuteHand"
            Canvas.Top="183" Canvas.Left="173"
            Points="0,5 1,0 2,0 4,5 4,80 0,80">
      <Polygon.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
          <LinearGradientBrush.GradientStops>
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="1" Color="DarkGray" />
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
      </Polygon.Fill>
      <Polygon.RenderTransform>
        <RotateTransform x:Name="minuteHandAnimation" CenterX="2" CenterY="75"/>
      </Polygon.RenderTransform>
    </Polygon>
    <Polygon Name="secondHand"
            Canvas.Top="170" Canvas.Left="175"
            Points="0,0 2,0 2,95 0,95" >
      <Polygon.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
          <LinearGradientBrush.GradientStops>
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="1" Color="DarkGray" />
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
      </Polygon.Fill>
      <Polygon.RenderTransform>
        <RotateTransform x:Name="secondHandAngle" CenterX="0" CenterY="90"/>
      </Polygon.RenderTransform>
    </Polygon>

        <!--Center circles-->
    <Ellipse Canvas.Top="248" Canvas.Left="168" Width="18" Height="20"
                Stroke="DarkGray">
      <Ellipse.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
          <LinearGradientBrush.GradientStops>
            <GradientStop Offset="0" Color="LightCoral"/>
            <GradientStop Offset="1" Color="Red"/>
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
      </Ellipse.Fill>
    </Ellipse>
        <Ellipse Canvas.Top="254" Canvas.Left="174" Width="6" Height="8"
                Fill="DarkGray" Stroke="Black"  />
    </Canvas>

</Window>

 

cs文件类

 

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Microsoft.Samples.WinFX.AlarmClock
{
    /// <summary>
    /// Interaction logic for TraditionalClock.xaml
    /// </summary>

    public partial class TraditionalClock : Window
    {
        public TraditionalClock()
        {
            InitializeComponent();
        }

        // Set the time to the current time - note that this must be triggered
        // AFTER the animations have actually been started - in this case, after
        // the Canvas has loaded
        private void SetTime(object sender, RoutedEventArgs e)
        {
            // Fetch the storyboard and advance time
            Storyboard clockHandStoryboard = (Storyboard)clockWindow.Resources["clockHandStoryboard"];
            clockHandStoryboard.Seek(clockCanvas, DateTime.Now.TimeOfDay, TimeSeekOrigin.BeginTime);   //使用当前时间来作为初始化动画的参数
        }

        private void LeftButtonDown(object sender, RoutedEventArgs e)
        {
            this.DragMove();
        }
    }
}