演练：使用 Expression Blend 或代码创建 Silverlight 时钟

 

 

 

文件Page.xaml

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SilverlightClock.Page"
    Width="640" Height="480" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <UserControl.Resources>
        <Storyboard x:Name="clockStoryboard">

            <!-- This animation targets the hour hand transform -->
            <DoubleAnimation x:Name="hourAnimation"
         Storyboard.TargetName="hourHandTransform"
         Storyboard.TargetProperty="Angle"
         Duration="12:0:0" RepeatBehavior="Forever" To="360" />

            <!-- This animation targets the minute hand transform -->
            <DoubleAnimation x:Name="minuteAnimation"
         Storyboard.TargetName="minuteHandTransform" 
         Storyboard.TargetProperty="Angle"
         Duration="1:0:0" RepeatBehavior="Forever" To="360" />

            <!-- This animation targets the second hand transform  -->
            <DoubleAnimation x:Name="secondAnimation"
         Storyboard.TargetName="secondHandTransform" 
         Storyboard.TargetProperty="Angle"
         Duration="0:1:0" RepeatBehavior="Forever" To="360" />
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White" >

        <!-- Shadow Ellipse -->
        <Ellipse Margin="165,67,145,83" Fill="#FF000000" Width="330" 
     Height="330" Opacity="0.3"/>

        <!-- Outer Rim -->
        <Ellipse Height="330" Margin="156,58,154,92" Width="330" Stroke="#FF000000">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="0.84,0.87" StartPoint="0.164,0.129">
                    <GradientStop Color="#FFE4E5F4"/>
                    <GradientStop Color="#FFC0C0C0" Offset="0.254"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>


        <!-- Bevel -->
        <Ellipse Height="290" Margin="156,58,154,92" Width="290" Stroke="#FF000000">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="0.84,0.87" StartPoint="0.164,0.129">
                    <GradientStop Color="#FF2F2F32"/>
                    <GradientStop Color="#FFE4E5F4" Offset="0.987"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>

        <!-- Clock Face -->
        <Ellipse Height="270" Margin="176,78,174,112" Width="270" 
 Stroke="#FF000000" Fill="#FF000000"/>
        
        
        <!-- Central Clock Circle -->
        <Ellipse Margin="306,208,304,0" VerticalAlignment="Top" Fill="#FF000000" 
 Stroke="#FF008000" StrokeThickness="8" Height="30"/>

        <!-- Second Hand -->
        <Rectangle Height="80" Margin="318.25,117.75,316.75,0" VerticalAlignment="Top" 
 Fill="#FFFF0000" Stroke="#FF000000" Width="5" RenderTransformOrigin="0.5,1.312" >
            <Rectangle.RenderTransform>
                <RotateTransform x:Name="secondHandTransform"/>
            </Rectangle.RenderTransform>
        </Rectangle>

        <!-- Minute Hand -->
        <Rectangle x:Name="minuteHand" Height="80" Margin="316.75,117.75,315.25,0" 
 VerticalAlignment="Top" Fill="#FF008000" Stroke="#FF008000" Width="8" 
 RenderTransformOrigin="0.5,1.312" >
            <Rectangle.RenderTransform>
                <RotateTransform x:Name="minuteHandTransform"/>
            </Rectangle.RenderTransform>
        </Rectangle>

        <!-- Hour Hand -->
        <Rectangle x:Name="hourHand" Height="59" Margin="315.75,138.75,314.25,0" 
 VerticalAlignment="Top" Fill="#FF008000" Stroke="#FF008000" Width="10" 
 RenderTransformOrigin="0.525,1.428">
            <Rectangle.RenderTransform>
                <RotateTransform x:Name="hourHandTransform"/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>
</UserControl>

 

文件Page.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightClock
{
    public partial class Page : UserControl
    {
        public Page()
        {
            // Required to initialize variables
            InitializeComponent();

            Loaded += new RoutedEventHandler(SetAndStartClock);

        }

        
        private void SetAndStartClock(object sender, EventArgs e)
        {
            // The current date and time.
            System.DateTime currentDate = DateTime.Now;

            // Find the appropriate angle (in degrees) for the hour hand
            // based on the current time.
            double hourangle = (((float)currentDate.Hour) / 12) * 360 + currentDate.Minute / 2;


            // The same as for the minute angle.
            double minangle = (((float)currentDate.Minute) / 60) * 360;

            // The same for the second angle.
            double secangle = (((float)currentDate.Second) / 60) * 360;

            // Set the beginning of the animation (From property) to the angle 
            // corresponging to the current time.
            hourAnimation.From = hourangle;

            // Set the end of the animation (To property)to the angle 
            // corresponding to the current time PLUS 360 degrees. Thus, the
            // animation will end after the clock hand moves around the clock 
            // once. Note: The RepeatBehavior property of the animation is set
            // to "Forever" so the animation will begin again as soon as it completes.
            hourAnimation.To = hourangle + 360;

            // Same as with the hour animation.
            minuteAnimation.From = minangle;
            minuteAnimation.To = minangle + 360;

            // Same as with the hour animation.
            secondAnimation.From = secangle;
            secondAnimation.To = secangle + 360;

            // Start the storyboard.
            clockStoryboard.Begin();
        }
    }
}