Start Expression Blend. (Click Start, point to All Programs, point to Microsoft Expression, and then click Microsoft Expression Blend 2.5.)

On the File menu, click New Project. The following dialog box is displayed.

In the Name box, type SilverlightClock.

In the Language list, click to choose C# or Visual Basic as your programming language.

Select Silverlight 3 Application and click OK.

At this point you have an empty project. If you press F5 to run the application, you will only see a blank Web page.

Select the Ellipse tool.

Drag and drop the ellipse on the canvas to create a circle approximately 330 pixels wide and high.

Change the circle properties. Click the Properties tab, give the circle a fill of black, and set the opacity to 30%.

The circle now has a fill of semi-transparent black, which will provide the shadow effect.

Change the name of the ellipse to shadowEllipse.

Draw the outer rim circle. The circle for the outer rim is the same size as the shadow circle. Therefore, you can create it by simply making a copy of the shadow circle. To do this, select the shadow circle, press CTRL+C to copy it, and CTRL+V to paste a copy. Rename this ellipse outerRimEllipse.

Now you will fill outerRimEllipse with a simple gradient. Creating a gradient in Expression Blend consists of several steps.

Create a simple gradient.

Move the right gradient stop to concentrate the gradient on the left side. Note: you may have to change the direction of the gradient so that it runs from left to right (see step 5 below).

Move outerRimEllipse slightly to the upper left to see the shadow. You will notice a sliver of shadowEllipse visible in the lower right, which creates a shadow effect.

Change the direction of the linear gradient so that it is going from the upper left to the lower right (instead of going from left to right over the circle).

The gradient direction is shown in the following illustration.

Create a copy of outerRimEllipse. To do this, select outerRimEllipse, press CTRL+C to copy it, and press CTRL+V to paste it. Name the new ellipse bevelEllipse.

Select bevelEllipse and resize it to approximately 290 pixels high and wide to make it slightly smaller than outerRimEllipse.

Position bevelEllipse so that it is in the center of outerRimEllipse.

Now you will fill BevelEllipse with a linear gradient.

Create the basic gradient. Because bevelEllipse is a copy of outerRimEllipse, it will already have a gradient applied to it.

Change the color of the left gradient stop to #FF2F2F32, and change the color of the right gradient stop to #FFE4E5F4.

Slide the right gradient stop back to the right-hand end of the gradient.

This gradient runs in the same direction as the gradient applied to outerRimEllipse. However, the bevelEllipse gradient goes from dark in the upper-left to light in the lower-right, which is the opposite of the gradient applied to outerRimEllipse. The illustration below shows the direction of the gradient.

Create a copy of bevelEllipse. To do this, select bevelEllipse, press CTRL+C to copy it, and press CTRL+V to paste it. Name the new ellipse faceEllipse.

Select faceEllipse and resize it to approximately 270 pixels high and wide to make it slightly smaller than bevelEllipse.

Position faceEllipse so that it is in the center of outerRimEllipse.

Change the fill of faceEllipse to black.

Notice that the addition of this circle makes the bevel visible.

Select the Ellipse tool, and drag the new ellipse on top of the clock face.

Change the name of the new ellipse to centerEllipse.

Set the height and width of centerEllipse to 30.

Set the stroke thickness to 8, and set the stroke to green.

Position the center circle in the middle of the clock face. To find the center of faceEllipse, select faceEllipse and look for its center point. Then select centerCircle and drag and drop or use the arrow keys to move the centerCircle over the center point of faceEllipse.

Select the Rectangle tool.

Create the second hand. The second hand is a thin, red line. Drag a line pointing to the 12 o’clock position. Call the line secondHand and give it a stroke thickness of 5, a height of 80, and a fill color of red.

Move the transform center point to the middle of the clock face: The transform center point is the point relative to which transforms are applied. Later, you will animate the clock hands around the center of the clock. Therefore, you need to move the center point of the line to the middle of the clock face. To access the center point of the line, drag the width of the rectangle until you see a white dot in the middle of the rectangle. Then drag the white dot to the middle of the center circle.

Create the minute hand by following steps 2 and 3 for the second hand.

• Make the line approximately the same length as secondHand and position it in the 12 o’clock position, on top of secondHand. Name the line minuteHand.

• Give minuteHand a stroke thickness of 8 (slightly thicker than secondHand) and a stroke color of green.

• Place the center point of minuteHand in the center of the clock face, following the instructions in step 3.

Create the hour hand by following the preceding steps for the second hand and the minute hand.

• Make the line about 2/3 as long as the other clock hands and position it in the 12 o’clock position, on top of the other clock hands. Name the line hourHand.

• Give hourHand a strokethickness of 10 (thicker than the other hands) and a stroke color of green.

• Place the center point of hourHand in the center of the clock face.

Later, you will add animations that rotate the hands around the clock. This will be done by animating the Angle property of the RotateTransform element that is applied to the clock hand. Because the animation will have to target the correct RotateTransform, you will have to name the RotateTransform elements applied to each of the clock hands. To do this, open the XAML editing view in Expression Blend.

The clock hands are created with Rectangle elements. Find the clock hand rectangles in the XAML. If there is already a RotateTransform applied to the path, give it a name using the syntax in the following code, and leave the rest of the code alone for now. Name the elements secondHandTransform, minuteHandTransform, and hourHandTransform, respectively. If a RotateTransform does not already exist, add one, as shown in the following code.

  <!-- Second Hand -->
<Rectangle x:Name="secondHand" ...>
    <Rectangle.RenderTransform>
        <RotateTransform x:Name="secondHandTransform"/>
    </Rectangle.RenderTransform>
</Rectangle>

Open the XAML file.

If you used Expression Blend in the previous task, open the XAML file of the project and click the XAML tab.

If you used Visual Studio or another editing program in the previous task, open your XAML page from that program.

Add the following code after the root UserControl element to add the clock hand animations.

<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>

This code defines a Storyboard that contains the animations that animate the hands of the clock. To start the Storyboard, use the Loaded event to call the Begin method on the Storyboard. To do this, first attach the Loaded event to the Grid that contains the clock graphics.

<Grid x:Name="LayoutRoot" Loaded="SetAndStartClock">

Then create an event handler that starts the Storyboard. You will have to open the code-behind file to add the following handler.

Private Sub SetAndStartClock(ByVal sender As Object, ByVal e As EventArgs)

    ' Start the storyboard.
    clockStoryboard.Begin()
End Sub

private void SetAndStartClock(object sender, EventArgs e)
{
    // Start the storyboard.
    clockStoryboard.Begin();
}

All of these animations in the Storyboard target the Angle property of the respective clock hand transform. The Duration property of each animation is set depending on the desired speed of the animation. For example, for the hour hand transform, the duration of the animation is set for 12 hours, which is the time it takes the hour hand to go completely around the clock. The RepeatBehavior of all of the animations are set to "Forever". Therefore, when the animation completes (the hand goes around the clock), it starts over again and repeats indefinitely.

Open the code-behind file:

• If you used Expression Blend to design the graphics, open the C# file from the Project panel.

  

• If you used Visual Studio or another editing program for your application, open your C# or VB page from that program.

Copy the following to the code-behind file to add the logic for setting the clock.

Private Sub SetAndStartClock(ByVal sender As Object, ByVal e As EventArgs)

    ' The current date and time.
    Dim currentDate As Date = DateTime.Now

    ' Find the appropriate angle (in degrees) for the hour hand
    ' based on the current time.
    Dim hourangle As Double = (((CType(currentDate.Hour, Single) / 12) * 360) + (currentDate.Minute / 2))

    ' The same as for the minute angle.
    Dim minangle As Double = ((CType(currentDate.Minute, Single) / 60) * 360)

    ' The same for the second angle.
    Dim secangle As Double = ((CType(currentDate.Second, Single) / 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()

End Sub

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();
}