《Silverlight入门实例》是Silverlight的基本步骤，实现的基本动画的创建布骤，与Javascript 交互等。在本实例中，如果您不太了解。我们用Blend2新建一个Silverlight项目（兼容1.0）,在菜单中选择：File->New Project。然后出现如图1.0所示界面，您可以选择一个保存路径，并选中“Silverlight 1.0 Site”。

图1.1

点击确定进入Blend中的设计环境，如果您还想改变布局可以到Window->Animation Workspace设置。结果如图1.2中所示。

图1.2

Blend会随Silverlight的模板创建5个文件：
Default.html HTML页面文件，由浏览器执行，所有的由他开始。
Default_html.js JavaScript脚本文件，此文件由Default.html引用。
Page.xaml Silverlight文件，显示动画和效果，由Silverlight插件编译执行。
Page.xaml.js JavaScript脚本文件，由Default.html引用，用于处理page.xaml中的事件。
Silverlight.js JavaScript脚本文件，由Default.html引用，负责生成Silverlight插件。

图1.3

现在Blend的环境以经为您解释的清楚了，如果还是不太清楚您可以打开Blend软件到处看看吧！下面进入开发了：
第一步我们先要设置画布大小，在绘制区的白色块就是Canvas画布了。单击选中，然后在画面切换中点击“Properties”到属性中，如图 1.2所示。点击layout展开布局面板，把Width设为800，并把Height设为260（您也可以在绘制区中自己鼠标调整）。然后打开在 Brushes(笔刷)面板点击“Gradient brush（渐变画笔）”，然后以图1.4中设置渐变颜色。

图1.4

现在画布以经设置好了，下一步我们要做的是一个文本移动的动画。在画布中画一个TextBlock控件。在此提示您如果没有您可以点击工具框的最下面点击按钮，在资源库中添加更多控件。在搜索中图入TextBlock。然后点击里面的TextBlock项就可以了。如图1.5所示：

图1.5

然后在画布中拖出一个TextBlock控件，并输入Welcome to WPFHOME.COM。然后在颜色面板中Solid Color Brush（单颜色），然后在面板中选择红色（我相信不用再让我截图了吧）。下面就是做我们的动画了，新建一个StoryBoard（故事板板），位置在 Objects and Timeline面板-> 。出现一个窗口，在Name(Key)中输入StoryBoard的名称“LoadStoryboard”，单击确定。在下面出现了TimeLine(时间轴)。如图：

图1.6

施动黄色时间针，到1.3秒的位置。然在绘制面板中的TextBlock控件移动x=208, y=135，旋转-359.686度，也可以通过properties(属性)->Transform(变换)->Translate（平 移）面板下的X和Y值，和properties(属性)->Transform(变换)->Rotate（旋转）板板中直接输入值,颜色面板 中设为黑色。好现在以经做完第一步的动画，然后把换色的时间针移动到2.3秒，把字体颜色设为#FF00FF11。Text面板下的大小设成13。如图 1.7所示

图1.7

在此LoadStoryboard动画以经制作好了，现在可以移动时间针看到动画效果了。
下面我们将实现一个按钮效果，控扭的事件由JavaScript控制，动画部分在此不再重复了。窗体上新建一个Rectangle（矩形），然后 在属性面板中调节渐变。然后命名为btn_bg。在Storyboard（故事面板）里新建动画。动画命名 为：“btn_Move_animation”,现在我们要实现一个鼠标经过时的动画效果，要让颜色改变。我们在矩形的渐变笔刷里第二个颜色块设为淡绿色 （适度调整）。然后我们再新建一个“btn_Out_animation”，现在我们要实现一个鼠标离开时的动画效果，要把颜色变回来。移动时间针到1秒 处，然后把矩形的渐变的第二个颜色块变回一开始的红色。
    OK，按钮的基本动画以经制作完成，下面要做的是把按钮背景与全并。在矩开（btn_bg）控件上面用TextBlock写入“Play”文字。按着 Shift键，然后把btn_bg和刚写的TextBlock选中，放开Shift。按Ctrl+G成组，原来也是把btn_bg和TextBlock作 为一个新Canvas（画布）的子控件。并把这个组的名称改为：“btn”。嘿嘿 ~，动画部分以经完成，下面介绍JavaScript了。
在资源文件中选中“Default.html”，右击菜单中选择“Edit in Visual Studio”。在silverlightControlHost的DIV控件下面加入以下代码（HTML这里不做介绍咯~）：
        <div align="center" style="width:800px">
        <input type="text" style="width:656px;" id="textAnimationText" value="Welcome to WPFHOME.COM"><input type="button" value="播动画" onclick="play_func()" />
        </div>
在Page.xaml.js文件中的onLoadHandle过程中加入：
        Silverlight.sl_c= control;
        Silverlight.sl_c.content.findName("btn").addEventListener("MouseLeftButtonDown",Silverlight.createDelegate({},play_func));
        Silverlight.sl_c.content.findName("btn").addEventListener("MouseEnter",Silverlight.createDelegate({},Btn_Over));
        Silverlight.sl_c.content.findName("btn").addEventListener("MouseLeave",Silverlight.createDelegate({},Btn_Out));
        play_func();
并在新加以下自定义函数：
        function Btn_Over(sender,args)
        {
            Silverlight.sl_c.content.findName("btn_Move_animation").Begin();
        }
        function Btn_Out(sender,args)
        {
            Silverlight.sl_c.content.findName("btn_Out_animation").Begin();
        }
        function play_func(sender,args)
        {
            Silverlight.sl_c.content.findName("textBlock").Text=document.getElementById('textAnimationText').value;
            Silverlight.sl_c.content.findName("LoadStoryboard").Begin();
        }

源码下载地址