Silverlight工具中內置了很多種控件。開發人員使用這些Silverlight控件可以輕松的完成界面圖形的操作，以及一些音頻視頻的相關操作。Silverlight的界面是通過控件套用控件來改變頁面的布局與實現體驗者的視覺效果的。本文介紹Silverlight即時顯示JavaScript程序的狀態，詳細介紹JavaScript實現對Silverlight的控件訪問、修改、刪除、創建。#t#

提示：對控件進行操作，如果在控件的onLoad之前訪問和操作都會出現異常！，是因為找不到對象。

下面的Silverlight控件實例是JavaScript循環創建動畫的效果，顯示內容可以隨意改變。控件的格式是XAML中定義的TextBlock（文本控件），包括Animation創建，添加，和刪除等功能。

變量說明：

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

在Page.xaml.js文件中創建了_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中的格式，并把樣式控件刪除，并且調用了顯示動畫的方法(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方法創建Silverlight中的對象。

使用content.findName 利用x:Name查找名稱對象

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

使用silverlight_control.Resources.add添加StoryBoard動畫對象(Storyboard)。
storyboard_obj.Begin播放。

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