Silverlight初试牛刀 微软下一代Web技术

ZDNet软件频道 时间:2008-07-09 作者: | 中国IT实验室 我要评论()
本文关键词:web SilverLight XML 软件
Silverlight是微软的下一代Web技术的原形,支持Windows/MasOS/Linux(Moonlight) 多种操作系统, 支持IE﹑FireFox等多种浏览器。

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

web

SilverLight

XML

软件


百度大联盟认证黄金会员Copyright© 1997- CNET Networks 版权所有。 ZDNet 是CNET Networks公司注册服务商标。
中华人民共和国电信与信息服务业务经营许可证编号:京ICP证010391号 京ICP备09041801号-159
京公网安备:1101082134