Silverlight是微软的下一代Web技术的原形,支持Windows/MasOS/Linux(Moonlight) 多种操作系统, 支持IE﹑FireFox等多种浏览器。
Silverlight与Ajax有本质上的区别,通过Silverlight可以带给我们在互联网上有更好的交互体验及更多的视觉效果。本篇文章将教您如何快速的使用Visual Studio 2008开发Silverlight2应用程序。
建立项目：
安装Microsoft Visual Studio 2008 Beta2（下一代开发工具）﹑Silverlight 2 Beta 1﹑Expression Blend 2 August Preview后
打开VS2008 点击菜单栏File'New'Projec
Silverlight应用不能够独立运行，之后弹出的对话框中可供我们选择创建一个ASP.NET Web Site或者Web Application Project用来托管Silverlight应用程序。
这里我们选择创建一个Web Application Project，
编辑XAML文件
项目中有一个名为Page.xaml的文件会自动在Visual Studio中打开。通过在Page.xaml文件的<Canvas>标签后输入下面这个语句，
<Canvas …>
<TextBlockx:Name="MyMessage"Text="Hello World"FontSize="56"/>
</Canvas> |
按Ctrl+F5运行这段代码的结果：
用.NET语言加入事件处理
对应每一个xmal文件，都会有一个.NET语言相对应的代码文件，由于此处用的是Visual C#，因此对应于Page.xmal，可以在Solution Explorer的目录树下，找到Page.xmal对应Page.xmal.cs文件。
在继承于Canvas的Page类中，通过以下代码可以实现鼠标左键点击"Hello World"，使文字变成"I was pushed!"。
public void Page_Loaded(object o, EventArgs e)
{
// Required to initialize variables
InitializeComponent();
MyMessage.MouseLeftButtonDown += new MouseEventHandler(MyMessage_MouseLeftButtonDown);
}
void MyMessage_MouseLeftButtonDown(object sender, MouseEventArgs arg)
{
MyMessage.Text = "I was pushed!";
} |
调试代码
在Visual Studio中调试Silverlight应用程序和调试其他应用一样简单。例如在"MyMessage.Text = "I was pushed!";这一行首单击鼠标左键设置断点，然后选择菜单栏中Debut'Start Debugging，或者按F5键，即可进行调试。
当程序运行到断点处会自动暂停。此时可以查看断点处各个参数或属性的值，也可以通过Immediate Window，在调试模式下对代码做临时的修改以察看其效果。如在Immediate Window中输入以下代码，按回车键后，对已暂停的应用程序继续进行调试，则浏览器中的字体透明度会被调整为20%:
MyMessage.Opacity = .2;
在Microsoft Expression Blend中编辑动画效果
通过结合使用Microsoft Expression Blend，可以对UI、动画或交互性内容进行更有效的设计开发。且Microsoft Visual Studio Orcas与Microsoft Expression Blend可以协调工作。鼠标右键单击Page.xmal，在弹出菜单中选择Open in Expression Blend
设置背景颜色
在设计界面右侧Properties标签'Brushes中选择Solid Color Brush，用鼠标点选调色板，则可以更改应用程序的背景颜色；选择Gradient Brushes，则可以将背景颜色设置为渐变色。
" 添加动画效果
下面实现 "Hello World"旋转效果：
o 点击设计界面左侧Objects and Timeline中的箭头符号，并在弹出的对话框中点击"加号"（Create New Timeline）。
o 在弹出的Create Storyboard对话框中将时间轴的名字取为"Timeline1"，并选中Create as a Resource选项（这样我们稍候就可以用代码对该时间轴进行进一步操作），点击"OK"。
o 点击MyMessage这个TextBlock对象，并在Timeline面板中点击"加号"，即为MyMessage这个TextBlock在时间轴初始位置增加一个关键帧。
o 点击时间轴的0.5秒处，并添加关键帧。
o 将"Hello World"移动到设计界面的右下方，然后将鼠标置于字符串的左下方，使之成为一个折角双箭头。
o 拖动鼠标左键，使"Hello World"按顺时针方向旋转90度。
o 点击时间轴1秒处的位置，并添加关键帧，
o 继续逆时针旋转字符串，并使之旋转回原来的位置
单击时间轴上方的Play按钮查看动画效果
当项目在Microsoft Expression Blend中把修改结果保存之后，Page.xaml.cs中的代码自动更新如下：
public void Page_Loaded(object o, EventArgs e)
{
InitializeComponent();
Timeline1.Completed += new EventHandler(Timeline1_Completed);
MyMessage.MouseLeftButtonDown += new MouseEventHandler(MyMessage_MouseLeftButtonDown);
}
void Timeline1_Completed(object sender, EventArgs arg)
{
MyMessage.Text = "The End!";
}
void MyMessage_MouseLeftButtonDown(object sender, MouseEventArgs arg)
{
Timeline1.Begin();
}
|
按Ctrl+F5键则可看到其最终效果：当鼠标左键单击"Hello World"时，字符会移动旋转，并在结束后变成"The End"。
