使用JavaScript操作Silverlight UIElement速记

使用JavaScript操作Silverlight UIElement


最近在Silverlight做东西,所以谈谈如何操作UIElement经验.

我们使用的XAML是下面这个:

< Canvas
     xmlns ="http://schemas.microsoft.com/client/2007"
    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
    Width ="640"  Height ="480"
    Background ="White"
    x:Name ="Page"
     >
     < Rectangle  x:Name ="myRectangle"  Width ="496"   MouseEnter ="onMouseEnter"  Height ="216"   Stroke ="#FF000000"  Canvas.Left ="72"  Canvas.Top ="144" >
         </ Rectangle >
       
     < Rectangle  Width ="480"  Height ="184"  Fill ="#FFA53737"  Stroke ="#FF000000"  Canvas.Left ="80"  Canvas.Top ="160" />
     < Canvas  Width ="240"  Height ="380" >
         < Rectangle  x:Name ="myRectangle2"  Width ="600"   MouseEnter ="onMouseEnter"  Height ="216"   Stroke ="#FF000000"  Canvas.Left ="72"  Canvas.Top ="144" >
         </ Rectangle >

     </ Canvas >
</ Canvas >

一:如果我们想知道现在XAML中每一个对象的情况就用下面的方法:

function  getChildren(parent, index)
{
    // Enumerate the children of the Canvas object.
    for (i = 0; i < parent.children.count; i++)
    {
        var child = parent.children.getItem(i);

        // Display the index and type of the child object.
        alert(i + ": " + child.toString());
    }
}

上面是得到所有的子节点.

二:接下来就要谈模版为我们生成的Page.xaml.js文件里面的JScript

自动会生成一个方法:

function  handleLoad(control, userContext, rootElement)
     {
        this.control = control;
       
        // Sample event hookup:   
        rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
    }

里面control就是Silverlight plugIn Host;
你可以可以通过var plugin_1 = document.getElementById("slPlugin_1");和var slPlugin = sender.getHost();
两种方式找到它.

rootElement就是sender,sender是Object类是所有对象的一个实例.使用能通过sender来做很多事情.

三:UIElement对象中的属性与事件.
Properties
Canvas.Left, Canvas.Top, Canvas.ZIndex, Clip, Cursor, Height, IsHitTestVisible, Name, Opacity, OpacityMask, RenderTransform, RenderTransformOrigin, Resources, Tag, Triggers, Visibility, Width

Methods
AddEventListener, CaptureMouse, Equals, FindName, GetHost, GetParent, GetValue, ReleaseMouseCapture, RemoveEventListener, SetValue

Events
GotFocus, KeyDown, KeyUp, Loaded, LostFocus, MouseEnter, MouseLeave, MouseLeftButtonDown, MouseLeftButtonUp, MouseMove

我们不可能一一谈到,但归为几类后就可通用哦,现在先从属性开始:
先看怎样赋值:
//通常情况下

function  mySetValue(sender,value)
{
    var curElement=sender.findName("myRectangle");
    curElement.Height="20";
    //curElment.SetValue(Height,"20");
}
// Canvas.Left,这样的就一定要使用SetValue方法
function  mySetValue()
{
    var curElement=sender.findName("myRectangle");
    curElment.SetValue(Canvas.Left,"20");
}

就是要注意是值要与这个对象的属性的类型相互适应.

方法:

调用形式与JScript一样的,我们要看几个方法的使用.
(1)AddEventListener和RemoveEventListener
添加一个事件监听器.

function  onLoaded(sender, eventArgs)
{
    // Set the root Canvas object to a KeyDown event handler function.
    var token = sender.addEventListener("keyDown", onKeyDown);
}

function  onKeyDown(sender, keyEventArgs)
{
    // Determine whether the keystroke combination CTRL+V was detected.
    if ((keyEventArgs.key == 51) && (keyEventArgs.ctrl == true))
    {
        // Retrieve a reference to the plugin.
        var slPlugin = sender.getHost();

        // Display the current version of the plugin.
        alert("Silverlight version: " + slPlugin.settings.version);
    }
}

上面就分别是动态的添加一个键盘事件和清除键盘事件.

(2)GetParent方法

是得当前调用对象的父亲对象.

function  myGetParent(sender) {
var parent = sender.getParent();
var currElement=parent.children.getItem(0);
alert(currElement.toString());
}

事件:
(1)GoFocus(sender, eventArgs)与LostFocus(sender, eventArgs)

出发当前对象时得到(或失去)焦点;

< Canvas
   xmlns ="http://schemas.microsoft.com/client/2007"
  xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
  GotFocus ="onGotFocus"
  LostFocus ="onLostFocus" >

   < TextBlock  x:Name ="myTextBlock"   />

</ Canvas >

function  onGotFocus(sender, eventArgs)
{
    sender.findName("myTextBlock").Text = "got focus";
}

function  onLostFocus(sender, eventArgs)
{
    sender.findName("myTextBlock").Text = "lost focus";
}

四:怎样来为XAML中动态注入XAML对象  

在XAML中注入XAML的过程就是先将我们要注入XAML通过createFromXaml方法放入Silverlight plugin 的子对象content中.再将这个XAML的Root接点与整个页面上XAML的你所指定的节点相连接起来.

如下面:

var  textBlock;

function  onLoaded(sender, eventArgs)
{
    // Retrieve the id of the plugin.
    var plugin = sender.getHost();

    // Define and create a XAML fragment.
    var xamlFragment = '<TextBlock Canvas.Top="200" Opacity=".5" Text="Click for more info" />';
    textBlock = plugin.content.createFromXaml(xamlFragment);

    // Add the TextBlock to the root Canvas object.
    sender.children.add(textBlock);
}

//  Toggle the Opacity property for the TextBlock.
function  onToggle()
{
    if (textBlock.opacity)
    {
        textBlock.opacity = 0;
    }
    else
    {
        textBlock.opacity = 1;
    }
}

还可以插入

//  Insert an overlapping Rectangle object.
function  InsertItem(rootCanvas)
{
    var plugin = rootCanvas.getHost();

    var xamlFragment = '<Rectangle Fill="Black" Canvas.Top="0" Canvas.Left="0" Height="100" Width="100" />';
    var rectangle_4 = plugin.content.createFromXaml(xamlFragment);
    rootCanvas.children.insert(0, rectangle_4);
}

当然可以动态的添加那也可以动态的删除;

function  removeCaption(rootCanvas)
{
    // Retrieve the TextBlock object.
    var captionTextBlock = rootCanvas.findName("myCaption");

    if (captionTextBlock != null)
    {
        rootCanvas.children.remove(captionTextBlock);
}

也可以删除指定子节点对象.

//  Remove the first child object from the parent collection.
myCanvas.children.removeAt( 0 );

同时也可以删除所有子节点对象:

//  Remove all child objects from the parent collection.
myCanvas.children.clear();

六给XAML对象添加属性;

上面写这样多.就是为这个问题写的:

首先要通过sender找到对应的方法有三种:
第一种查找方法
使用findName()方法

var  currElement = sender.findName( " myRectangle " );

第二种查找方式
通过得到当前对象Parent对象.再通过getItem(index)方法指定里面的index.

var  parent  =  sender.getParent();
var  currElement = parent.children.getItem( 0 );
alert(currElement);

//第三种查找方法
直接通过父亲节点的子节点得到:

var  parent  =  sender.getParent();

之后就是你心里要知道你要添加的XAML是什么.实现就是下面

function  onMouseEnter(sender, eventArgs)
{
    // Set the Fill property of the Ellipse to the dynamically generated LinearGradientBrush.
    var plugin =sender.getHost();
    var addContent=createLinearGradientBrush(plugin);
    var currElement=sender.findName("myRectangle");
    currElement.Fill=addContent;
}
function  createLinearGradientBrush(plugin)
{
    // Define a XAML fragment.
    //var xamlFragment ='<Rectangle.Fill>';
       
      var  xamlFragment = '<LinearGradientBrush>';
        xamlFragment +=   '<GradientStop Color="Yellow" Offset="0.0" />';
        xamlFragment +=   '<GradientStop Color="Orange" Offset="0.5" />';
        xamlFragment +=   '<GradientStop Color="#FF000000" Offset="1.0" />';
        xamlFragment += '</LinearGradientBrush>';
       // xamlFragment +='</Rectangle.Fill>';
    // Create the XAML fragment and return it.
    return plugin.content.createFromXaml(xamlFragment);
}

-------------------Worksguo