大家一起来SilverLight吧！

我的Silverlight银光闪耀之旅就从第一个sample开始。
1.0beta 的第一个例子就是clock示例，这个示例使用了xaml的动画面板，至于动画面板的一些属性字段，大家有不明白的可以参看我的博客左侧的silverlight msdn链接来查看。
xaml主要代码：

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

很容易看出它在动画面板里当事件 Canvas.Loaded 触发的时候，执行了一些动画，里面定义了三个动画，也就是时针，分针，秒针。三个分别指定了重要的From、To、Duration属性，以及循环模式为一直循环。这样，大家可以想像一下只要在这个xaml触发了Canvas.Loaded 事件的时候，那么这三个指针动画就会按照规定的动画时间内一直循环，循环一次的时间由各自周期指定。那不就是一个钟表吗？
但是现在还是有一个问题，就是你怎么知道客户端的时间，你在最开始加载的时候，确保时针分针秒针都是指向的客户端时间吗？在这个示例中，用了javascript来指定当前客户端的时间。
就是如下这段代码：

 1 // 时钟对象
 2 function  Clock()  { }
 3 // 时钟的加载事件：
 4 Clock.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 of 
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}

这段代码是构造了一个Clock对象，然后向它的原型附加了一个方法，handleLoad，这个方法就是在对xaml刚在客户端加载的时候，对三个动画针的初始化。我们再来看看它的实现细节。
代码的第7、8、9行，就是获取xaml中的对象的引用，这个不就是类似于js在获取页面控件引用的 getElementById方法吗？简直太熟悉了！（当然也类似js与flash的交互）
然后，对它的sl控件的属性进行赋值，例如：hourAnimation.from = angle.toString();
这个也是很简单的呀，和把input的value 赋值不是一样的吗？input  的  tag里面的属性和访问方式一模一样。一个tag就可以理解为一个对象，tag里面的字段就是对象的属性，对其的操作就是操作对象的属性。

怎么样，很简单吧？如果觉得好玩，大家就跟着一起来学习silverlight吧！
  

转载于:https://www.cnblogs.com/silverlighter/archive/2007/06/16/785992.html