Learning windows phone7 development together (V. An example of a clock)

Express blend is an important tool for developing the Silverlight UI. Here is an example of a small clock transplanted from Silverlight. It can be seen that this tool is equally important on phone7 and can improve development efficiency.

1. In the blend tool, you can use ellipse to draw the dial and use gradient color in the property to produce a stereoscopic effect. You can also use the gradient tool to adjust the gradient.

2. Use ellipse to draw the table needle axis and set the circle strokethickness to change the line width.

3. Use the rectangle tool to draw three table needles and set the positions.

4. Add animation Effects

<Storyboard X: Name = "clockstoryboard">

 

<! -- This animation targets the hour hand transform -->

<Doubleanimation X: Name = "houranimation"

Storyboard. targetname = "hourhandtransform"

Storyboard. targetproperty = "angle"

Duration = "" repeatbehavior = "forever" to = "360"/>

 

<! -- This animation targets the minute hand transform -->

<Doubleanimation X: Name = "minuteanimation"

Storyboard. targetname = "minutehandtransform"

Storyboard. targetproperty = "angle"

Duration = "" repeatbehavior = "forever" to = "360"/>

 

<! -- This animation targets the second hand transform -->

<Doubleanimation X: Name = "secondanimation"

Storyboard. targetname = "secondhandtransform"

Storyboard. targetproperty = "angle"

Duration = "" repeatbehavior = "forever" to = "360"/>

</Storyboard>

 

Run the command and you can see that the table needle is leaving.

5. Control the table needle Action Statement

Void mainpage_loaded (Object sender, routedeventargs 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,

// 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 be 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;

 

This. clockstoryboard. Begin ();

}

 

Source code:

/Files/randylee/myclock.rar