Silverlight动态控件(实例讲解+免费下载 Javascript)

Silverlight的界面是通过控件套用控件来改变页面的布局与实现体验者的视觉效果的。本文介绍Silverlight即时显示JavaScript程序的状态，由灵为详细介绍JavaScript实现对Silverlight的控件访问、修改、删除、创建。
实现效果如下：

提示：对控件进行操作，如果在控件的onLoad之前访问和操作都会出现异常！，是因为找不到对象。
下面的实例是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();

在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播放。


今日您是第次访问设为主页添加改藏