Come to SilverLight!

My Silverlight silver shine journey begins with the first sample.
The first example of 1.0 beta is the clock example. This example uses the xaml animation panel. For some attribute fields of the animation panel, if you do not understand, refer to the silverlight msdn link on the left of my blog to view it.
Main Code of xaml:

<EventTrigger RoutedEvent = "Canvas. Loaded">
<EventTrigger. Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation x: Name = "hourAnimation" Storyboard. targetName = "hourHandTransform" Storyboard. targetProperty = "Angle" From = "180" To = "540" Duration = "" RepeatBehavior = "Forever"/>
<DoubleAnimation x: Name = "minuteAnimation" Storyboard. targetName = "minuteHandTransform" Storyboard. targetProperty = "Angle" From = "180" To = "540" Duration = "" RepeatBehavior = "Forever"/>
<DoubleAnimation x: Name = "secondAnimation" Storyboard. targetName = "secondHandTransform" Storyboard. targetProperty = "Angle" From = "180" To = "540" Duration = "" RepeatBehavior = "Forever"/>
<DoubleAnimation Storyboard. TargetName = "parentCanvas" Storyboard. TargetProperty = "Opacity" From = "0" To = "0.7" Duration = ""/>
</Storyboard>
</BeginStoryboard>
</EventTrigger. Actions>
</EventTrigger>
</Canvas. Triggers>

It is easy to see that when the event Canvas. Loaded is triggered in the animation panel, some animations are executed, which define three animations, namely, the hour hand, the minute hand, and the second hand. The three attributes are From, To, and Duration respectively, and the cycle mode is always loop. In this way, you can imagine that the Canvas is triggered in this xaml. during the Loaded event, the three pointer animations will keep repeating according to the specified animation time, and the cycle time is specified by the respective cycle. Isn't that a clock?
But now there is still a problem: how do you know the time of the client? When you first load the client, do you ensure that the second-hand timer points to the client time? In this example, javascript is used to specify the time of the current client.
Is the following code: 1 // clock object
2 function Clock (){}
3 // loading events of the clock:
4Clock. prototype. handleLoad = function (control, userContext, rootElement ){
5 var now = new Date ();
6
7 var hourAnimation = control. content. findName ("hourAnimation ");
8 var minuteAnimation = control. content. findName ("minuteAnimation ");
9 var secondAnimation = control. content. findName ("secondAnimation ");
10
11 if (hourAnimation ){
12 var hours = now. getHours ();
13
14 // We need to include minutes as well. Because each hour consists
15 // 30 degrees, each additional minute adds half a degree to the angle
16 // of the hour hand
17
18 var angle = (hours/12) * 360 + now. getMinutes ()/2;
19 angle ++ = 180;
20
21 hourAnimation. from = angle. toString ();
22 hourAnimation. to = (angle + 360). toString ();
23}
24
25 if (minuteAnimation ){
26 var minutes = now. getMinutes ();
27 var angle = (minutes/60) * 360;
28 angle ++ = 180;
29
30 minuteAnimation. from = angle. toString ();
31 minuteAnimation. to = (angle + 360). toString ();
32}
33
34 if (secondAnimation ){
35 var seconds = now. getSeconds ();
36 var angle = (seconds/60) * 360;
37 angle ++ = 180;
38
39 secondAnimation. from = angle. toString ();
40 secondAnimation. to = (angle + 360). toString ();
41}
42}

This code constructs a Clock object and attaches a method to its prototype, handleLoad. This method is used when loading the xaml on the client, initialize the three animation clips. Let's take a look at its implementation details.
Lines 7th, 8, and 9 of the Code are used to obtain the reference of objects in the xaml. Isn't this similar to the getElementById method referenced by the page control referenced by js? So familiar! (Of course, similar to the interaction between js and flash)
Then, assign values to the properties of its sl control, for example, hourAnimation. from = angle. toString ();
This is also very simple. Isn't it the same as assigning the value of input? The attributes in the input tag are the same as the access method. A tag can be understood as an object. The fields in the tag are the attributes of the object, and the operations on the tag are the attributes of the operation object.

How are you doing? If you think it is fun, let's study silverlight together!