sliverlight.docx

　　包含Siverlight控件的HTML页面页可以包含通常的HTML元素来构成一个web页面。

当你双击SolutionExplorer中的Testpage.html，VS2008将会在一个分离视图里展示页面，这是VS2008的新特性。

使用分离视图，你可以在浏览HTML代码时同时预览它在浏览器中的效果。

如图3.

图3

　　TestPage.html.js

　　这个文件包含了一个Javascript函数，装载Silverlight控件到web页上。

它也引用了一个包含Silverlight程序的用户界面定义的XAML文件。

以下是引用片段：

　　//JScriptsourcecode

　　//containscallstosilverlight.js,examplebelowloadsPage.xaml

　　functioncreateSilverlight（）

　　{

　　Silverlight.createObjectEx（{

　　source:

"Page.xaml",

　　parentElement:

document.getElementById（"SilverlightControlHost"）,

　　id:

"SilverlightControl",

　　properties:

{

　　width:

"100%",

　　height:

"100%",

　　version:

"1.1",

　　enableHtmlAccess:

"true"

　　},

　　events:

{}

　　}）;

　　//GivethekeyboardfocustotheSilverlightcontrolbydefault

　　document.body.onload=function（）{

　　varsilverlightControl=document.getElementById（'SilverlightControl'）;

　　if（silverlightControl）

　　silverlightControl.focus（）;

　　}

　　}

TOP

发送短消息

查看公共资料

查找该会员全部帖子

∙UID:

111860

∙精华:

0

∙威望:

38

∙金钱:

469元

∙来自:

∙注册:

2005-08-05

状态:

离线

wyhjianhw

wyhjianhw

∙组别:

金牌会员

∙性别:

保密

∙积分:

2333

∙帖子:

2295

2008-10-0516:

56|只看楼主树型|收藏|小中大2#

每个HTML页面应该有一个相应的Javascript（.js）文件来装载一个相关的XAML文件中的Silverlight控件。

　　Page.xaml

　　这个文件包含了你的Silverlight应用程序的用户界面。

下面列出了VS2008创建的缺省内容

以下是引用片段：

    xmlns="

    xmlns

="

    x:

Name="parentCanvas"

    Loaded="Page_Loaded"

    x:

Class="OurFirstSilverlightProject.Page;assembly=ClientBin/

OurFirstSilverlightProject.dll"

    Width="640"

    Height="480"

    Background="White"

    >

　　注意这里x:

Class属性。

它指定了目前类名为OurFirstSilverlightProject.Page（OurFirstSilverlightProject是工程的缺省根命名空间而Page是类名），它对应的程序集在ClientBin/OurFirstSilverlightProject.dll.。

　　VS2008提供了支持XAML内容的IntelliSense，当你手写XAML时是一个很不错的辅助。

　　Page.xaml.vb

　　这个文件包含了Silverlight应用程序的被管理的代码。

缺省的VS产生的类名是Page。

以下是引用片段：

　　PartialPublicClassPage

　　InheritsCanvas

　　PublicSubPage_Loaded（ByValoAsObject,ByValeAsEventArgs）

　　'Requiredtoinitializevariables

　　InitializeComponent（）

　　EndSub

　　EndClass

　　Page.xaml.vb文件是你写你的被管理的代码的地方。

当准备部署Silverlight应用程序时，只有被编译过的程序集需要被部署。

不需要部署源代码。

　　Silverlight.js

　　这是微软提供的创建所有的必要的部分用来确保目标浏览器可以运行Silverlight程序。

通过将此文件包含在你的应用程序中，目标Web浏览器将会在未安装Silverlight运行时的情况下要求安装必须的运行时（每个Silverlight程序必须包含这个文件）。

在使用许可的规定下，你不得修改这个文件。

在运行多个Silverlight程序的Web服务器上，你可以只放置一个该文件的拷贝，并且将所有包含Silverlight内容的页面指向这个页面。

　　使用XAML创建用户界面

　　VS2008具备支持XAML内容的IntelliSense。

这使得界面开发更有效率了，但是当前这里所用的VS2008版本没有一个XAML内容的查看器。

这就是说，每次开发时必须运行一遍来查看其内容。

　　好消息是你可以使用微软的另外一个工具——ExpressionBlend来创建XAML界面。

微软ExpressionBlend是一个专业级的设计工具，用来为Windows程序设计专业级的用户界面。

最新的Blend版本，ExpressionBlend2AugustPreview，允许你创建基于Silverlight的程序。

　　使用ExpressionBlend2打开Page.xml，右击选择OpeninExpressionBlend…图4所示

图4

　　ExpressionBlend2将会启动，你可以看到一个类似VS的界面。

图5.

图5

　　现在我们为这个页面增加一写控件。

首先，创建一个圆角按钮，如图6所示。

有了这个按钮，你可以在上面增加一些文字描述信息。

图6

首先，点击Canvas控件（如图7）并且将其增加到页面上。

Canvas将会作为容器来包含所有组成这个按钮的控件。

图7

　　为了创建按钮的边框，增加一个Rectangle控件到页面上，覆盖你刚才增加的canvas。

图8

图8

　　为了创建四个圆形边角，点击DirectionSelection图标并且选择你刚增加的Rectangle控件。

如图9所示，设置Rectangle的属性如下：

　　•RadiusX-8

　　•RadiusY-8

　　•StrokeThickness-3

图9

　　另外，你也可以设置背景为黄色，如图9所示。

　　为了显示按钮中的文字，你需要增加一个TextBlock控件到canvas上，如图10.同时，设置字体为ComicSansMS。

图10

为了使得按钮显示当前时间，你需要每秒刷新一下时间。

增加一个Timeline到你的XAML文件中。

点击Objects和Timeline组中的>箭头，按照+按钮的指示。

图11所示。

图11

　　你会被要求命名新的Timeline。

使用缺省的名称Timeline1点击OK。

　　你的XAML文件现在看起来像图12所示。

保存XAML文件。

图12

　　当你转回到VS2008时，它会询问你是否重新载入Page.xml因为它在编辑器以外被修改了。

当你重新载入之后，XAML内容如下：

以下是引用片段：

    xmlns="

    xmlns

="

    x:

Name="parentCanvas"

    Loaded="Page_Loaded"

    x:

Class="OurFirstSilverlightProject.Page;assembly=ClientBin/

OurFirstSilverlightProject.dll"

    Width="640"

    Height="480"

    Background="White"

    >

Name="Timeline1"/>

       Stroke="#FF000000"StrokeThickness="3"RadiusX="8" 

       RadiusY="8"/>

       Canvas.Top="11"Text="TextBlock"TextWrapping="Wrap" 

       F/>

图13

TOP

发送短消息

查看公共资料

查找该会员全部帖子

∙UID:

111860

∙精华:

0

∙威望:

38

∙金钱:

469元

∙来自:

∙注册:

2005-08-05

状态:

离线

wyhjianhw

wyhjianhw

∙组别:

金牌会员

∙性别:

保密

∙积分:

2333

∙帖子:

2295

2008-10-0516:

57|只看楼主树型|收藏|小中大3#

为了使得canvas对象可以通过编程访问，增加x:

Name属性，并设置位btnTime，像这样：

以下是引用片段：

Name="btnTime"Width="189"Height="44" 

     Canvas.Left="8"Canvas.Top="8">

　　注意在ExpressionBlend2中，你可以切换Design和XAML视图（如图13）。

不幸的是，目前XAML视图中不支持IntelliSense。

　　使用VB构建程序逻辑

　　在用户界面完成以后，现在做些有用的代码——比如，在按钮中显示当前时间。

　　在SolutionExplorse中双击Page.xaml.vb文件，在代码编辑器中载入它。

　　在Page_Loaded（）小段中，增加如下行：

以下是引用片段：

　　PartialPublicClassPage

　　InheritsCanvas

　　PublicSubPage_Loaded（ByValoAsObject,ByValeAsEventArgs）

　　'Requiredtoinitializevariables

　　InitializeComponent（）

　　Me.Timeline1.Duration=NewDuration（NewTimeSpan（0,0,1））

　　Me.Timeline1.Begin（）

　　EndSub

　　在代码中，Timeline1每秒触发一个事件（Completed事件），通过Duration对象设置。

Timeline对象和Windows程序员熟悉的Timer控件很类似。

Begin（）方法开始倒计时，一秒后Completed事件触发。

　　下一步是在Completed事件完成后干什么，你可以在代码编辑器里选择Timeline1对象，然后选择Completed事件，如图14.

图14

　　编写如下Completed事件代码：

以下是引用片段：

　　PrivateSubTimeline1_Completed（_

　　ByValsenderAsObject,_

　　ByValeAsSystem.EventArgs）_

　　HandlesTimeline1.Completed

　　DimtextBlkAsTextBlock=Me.btnTime.Children

（1）

　　textBlk.Text=Now.ToString

　　Me.Timeline1.Begin（）

　　EndSub

　　EndClass

　　基本的，你通过获取嵌入在canvas（btnTime）中的TextBlock控件来设置当前时间及其Text属性。

Canvas有两个孩子：

　　•Children（0）:

Rectanglecontrol

　　•Children

（1）:

TextBlockcontrol

　　在显示时间后，你呼叫Begin（）方法来开始重新倒计时。

　　好，完成了!

在VS2008中按下F5，你将看到IE中显示当前的Silverlight程序。

如果你在Firefox浏览器中调用，效果也是一样的。

如图15.按钮每秒更新一次时间。

图15

　　变化

　　现在你有第一个Silverlight程序运行着了，试着做一些动画吧。

作为例子，让我们来修改它，使其旋转和更新时间。

使用相同的工程，在ExpressionBlend2中增加一个新的Timeline到XAML文件中。

在增加了新的Timeline之后，你的XAML代码看起来是这样的：

以下是引用片段：

PartialPublicClassPage

  I