Silverlight入门实例(图文实例+Silverlight源码下载)

 Silverlight入门实例(图文实例+Silverlight源码下载)

  《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秒处,然后把矩形的渐变的第二个颜色块变回一开始的红色。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值