Silverlight工具中內(nèi)置了很多種控件。開(kāi)發(fā)人員使用這些Silverlight控件可以輕松的完成界面圖形的操作，以及一些音頻視頻的相關(guān)操作。Silverlight的界面是通過(guò)控件套用控件來(lái)改變頁(yè)面的布局與實(shí)現(xiàn)體驗(yàn)者的視覺(jué)效果的。本文介紹Silverlight即時(shí)顯示JavaScript程序的狀態(tài)，詳細(xì)介紹JavaScript實(shí)現(xiàn)對(duì)Silverlight的控件訪問(wèn)、修改、刪除、創(chuàng)建。#t#

提示：對(duì)控件進(jìn)行操作，如果在控件的onLoad之前訪問(wèn)和操作都會(huì)出現(xiàn)異常！，是因?yàn)檎也坏綄?duì)象。

下面的Silverlight控件實(shí)例是JavaScript循環(huán)創(chuàng)建動(dòng)畫(huà)的效果，顯示內(nèi)容可以隨意改變?？丶母袷绞荴AML中定義的TextBlock（文本控件），包括Animation創(chuàng)建，添加，和刪除等功能。

變量說(shuō)明：

1. var txtFormat=new _textBlock(); 
   //字體格式對(duì)象  
2. var writeText="Welcom to WPF.COM!";
   //運(yùn)畫(huà)顯示內(nèi)容  
3. var CanvasLeft=0; 
   //隨環(huán)改變  
4. var CanvasTop=0; 
   //加載的XAML中的高度位置  
5. var charIndex=0; 
   //顯示的字符索引  
6. var split_width=15; 
   //每一個(gè)字符的寬度，可以對(duì)此智能改變  
7. var _silverlight_c; 
   //指定的Silverlight控件對(duì)象 

在Page.xaml.js文件中創(chuàng)建了_textBlock類，使用此類記錄textBlock中的格式，大小信息。

function _textBlock()  
{  
this.fontFamily="";  
this.width=0;  
this.height=0;  
this.textWrapping="Wrap";  
this.fontSize=0.0;  
}  
var txtFormat=new _textBlock(); 

Silverlight控件在onLoad事件中加載了XAML中的格式，并把樣式控件刪除，并且調(diào)用了顯示動(dòng)畫(huà)的方法(goAnimation)。

handleLoad: function(control, 
userContext, rootElement)   
{  
this.control = control;  
_silverlight_c=control;  
var tStyle=control.content.
findName("tStyle");  
for(var i in txtFormat)  
{  
txtFormat[i]=tStyle[i];  
}  
CanvasLeft=tStyle["Canvas.Left"];  
CanvasTop=tStyle["Canvas.Top"];  
control.content.root.children.
remove(tStyle);  
tStyle=null;  
goAnimation();  
}  

下面是goAnimation的代碼：

function goAnimation(){  
if(charIndex<writeText.length)  
{  
var this_char=writeText.substr(charIndex,1);  
if(this_char!=" ")  
{  
var t_control=_silverlight_c.content.
createFromXaml('<TextBlock xmlns:x="http://
schemas.microsoft.com/winfx/2006/xaml" 
Text="Hello" x:Name="t'+charIndex+'">
<TextBlock.RenderTransform><TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup></TextBlock.RenderTransform>
</TextBlock>');  
CanvasLeft+=split_width;  
for(var i in txtFormat){t_control[i]=txtFormat[i];}  
t_control["Canvas.Top"]=-20;  
t_control["Canvas.Left"]=CanvasLeft;  
t_control.foreground="#ffffffff";  
t_control.Text=this_char;  
_silverlight_c.content.root.children.add(t_control);  
var storyboard_str='<Storyboard xmlns:x="http://
schemas.microsoft.com/winfx/2006/xaml" 
x:Name="animation'+charIndex+'">';  
storyboard_str+='<DoubleAnimationUsingKeyFrames 
BeginTime="00:00:00" Storyboard.TargetName=
"t'+charIndex+'" Storyboard.TargetProperty=
"(UIElement.RenderTransform).(TransformGroup.
Children)[2].(RotateTransform.Angle)">';  
storyboard_str+='<SplineDoubleKeyFrame 
KeySpline="0.091,0.532,1,1" KeyTime="00:00:00.
6000000" Value="-360"/>';  
storyboard_str+="</DoubleAnimationUsingKeyFrames>";  
storyboard_str+='<DoubleAnimationUsingKeyFrames 
BeginTime="00:00:00" Storyboard.TargetName=
"t'+charIndex+'" Storyboard.TargetProperty="
(UIElement.RenderTransform).(TransformGroup.
Children)[3].(TranslateTransform.Y)">';  
storyboard_str+='<SplineDoubleKeyFrame 
KeySpline="0.091,0.532,1,1" KeyTime="00:00:00.
6000000" Value="'+CanvasTop+'"/>';  
storyboard_str+='</DoubleAnimationUsingKeyFrames>';  
storyboard_str+='<DoubleAnimationUsingKeyFrames 
BeginTime="00:00:00" Storyboard.TargetName=
"t'+charIndex+'" Storyboard.TargetProperty="
(UIElement.Opacity)">';  
storyboard_str+='<SplineDoubleKeyFrame 
KeyTime="00:00:00" Value="0.055"/>';  
storyboard_str+='<SplineDoubleKeyFrame 
KeyTime="00:00:00.6000000" Value="1"/>';  
storyboard_str+='</DoubleAnimationUsingKeyFrames>';  
storyboard_str+="</Storyboard>";   
var storyboard_control=_silverlight_c.
content.createFromXaml(storyboard_str);  
t_control.Resources.add(storyboard_control);  
storyboard_control.begin();  
}  
CanvasLeft+=split_width;  
charIndex++;  
setTimeout("goAnimation()",100);  
}  
} 

使用content.createFromXaml方法創(chuàng)建Silverlight中的對(duì)象。

使用content.findName 利用x:Name查找名稱對(duì)象

使用silverlight_control.children.add添加控件。

使用silverlight_control.Resources.add添加StoryBoard動(dòng)畫(huà)對(duì)象(Storyboard)。
storyboard_obj.Begin播放。

Silverlight控件的具體操作方法就為大家介紹到這里。