Silverlight控件相关操作技巧讲解-51CTO.COM

Silverlight工具中内置了很多种控件。开发人员使用这些Silverlight控件可以轻松的完成界面图形的操作，以及一些音频视频的相关操作。Silverlight的界面是通过控件套用控件来改变页面的布局与实现体验者的视觉效果的。本文介绍Silverlight即时显示JavaScript程序的状态，详细介绍JavaScript实现对Silverlight的控件访问、修改、删除、创建。#t#

提示：对控件进行操作，如果在控件的onLoad之前访问和操作都会出现异常！，是因为找不到对象。

下面的Silverlight控件实例是JavaScript循环创建动画的效果，显示内容可以随意改变。控件的格式是XAML中定义的TextBlock（文本控件），包括Animation创建，添加，和删除等功能。

变量说明：

var txtFormat=new _textBlock();
//字体格式对象
var writeText="Welcom to WPF.COM!";
//运画显示内容
var CanvasLeft=0;
//随环改变
var CanvasTop=0;
//加载的XAML中的高度位置
var charIndex=0;
//显示的字符索引
var split_width=15;
//每一个字符的宽度，可以对此智能改变
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控件的具体操作方法就为大家介绍到这里。