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"。