Constructing Objects at Run Time

---

(1)Constructing Objects at Run Time in Silverlight

---

Silverlight的内容在你的页面上就像一个对象层次在树的结构中样.这是单个的.一个在这个结构中最顶上的对象是root object,也是Silverlight plug-in的Source指定相应的XAML中的root.这 个root对象通常是一个Canvas对象,因为Canvas能包括像extBlock或MediaElement等其他对象.

动态的为这个结构添加XAML内容,你首先使用CreateFromXaml方法创建XAML片段.这里的要点,XAML片段不能连接Silerlight对象层次.这个意思片段不能重新呈现,可以,你能修改在这个片段中的object属性.对象的方法不能被调用.

这个XAML就是你指定CreateFromXaml参数,必须是单个root(它必须被有很好的XML格式.).如果你试图使用有过个root或其他不是很好格式的XML样的字符串传入所调用的CreateFromXaml方法.这个CreateFromXaml方法调用将失败并且报出一个error.这个XML root不需要指定Silverlight xmlns,只要它最终添加内容时指定Silverlight
xmlns到它的root上.

注意:
为保证你的Silverlight应用程序遭受安全攻击,我们强烈推存不要为不信任的XAML使用CreateFromXAML方法.如不信任的XAML能包括不信任的XAML能包括伪装界面的网站,导致一个欺骗类型的安全威胁.还有XAML包括脚本事件引用.正在添加XAML进入树中是可能就会有不信任的脚本执行.始终要通过验证的来于你的Silverlight应用程序确认信任的source的XAML才能给CreateFromXAML方法使用.

下面图Showilverlight object hierarchy 和这个XAML fragment的关系.



当你在XAML片段中创建一个不连贯对象集合,你能添加它去激活Silverlight对象层次.这个片段既能添加子对象到支持子对象的父对象上也能设置一个对象属性值.当片段是在Silverlight对象层次结构之前,这个对象在XAML片段中就能被重新呈现.下面的图片是Silverlight object hierarchy 和这XAML片段在他们被连接是的情况

动态的添加XAML内容到Silverlight对象层次中必须的他条件:

1:必须已有XAML内容与Silvrlight plug-in相结合;你不能创建CreateFromXaml替换完成的内容数,---你必须必须完整的保护最初的root元素.如果你要替换这个树,你能设置Source,通过注意Source需要的是在URI中已经存在的文件.并且不能是字符串.可以你能像在using inline XAML中样使用Source来发布.并且使用DOM的document.write些一段XAML.看Using Inline XAML.

2:CreateFromXaml方法能被Silerlight plug-in调用 .

3:使用CreateFromXaml方法创建XAML内容只能对一个对象中操作.如果你要从同一XAML中创建对象添加到不同的应用程序区域中,你必须调用CreateFromXaml多次并且为返回值使用不同的变量.(如果这样做,小心命名冲突).

4:Silverlight object将包括新的XAML内容必须封装成一个对象,既是一个子节点也是一个属性值.

---

(2)Creating a Single XAML Object

---

下面是怎样添加一个TextBlock进入Canvas对象中

//  MouseLeftButtonUp event handler for the root Canvas object.
function  onMouseLeftButtonUp(sender, eventArgs)
{
    // Retrieve a reference to the plug-in.
    var plugin = sender.getHost();
   
    // Define a XAML fragment and create it.
    var xamlFragment = '<TextBlock Canvas.Top="200" Text="Click for more info" />';
    textBlock = plugin.content.createFromXaml(xamlFragment, false);

    // Add the XAML fragment as a child of the root Canvas object.
    sender.children.add(textBlock);
}

如果你要使用x:Name attribute值,你要在你的XAML内容中提供XML namescpace提供,如.在上面的事例中你要使用x:Name attribute 值,你将要向下面一样写:

 

//  Define a XAML fragment and create it.
     var  xamlFragment  =   ' <TextBlock xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  ' ;
       xamlFragment  +=   ' x:Name="myCanvas" Canvas.Top="200" Text="Click for more info" /> ' ;

    textBlock  =  plugin.content.createFromXaml(xamlFragment,  false );

---

(3)Creating a LinearGradient Brush Object

---

你还能创建XAML内容一个对象的属性值.在下面事例中怎样创建一个LinearGradientBrush并且为Ellipse对象它添加Fill属性.

//  MouseEnter event handler for the Ellipse object.
function  onMouseEnter(sender, eventArgs)
{
    // Set the Fill property of the Ellipse to the dynamically generated LinearGradientBrush.

    try
    {
    sender.fill = createLinearGradientBrush(sender.getHost());
    }
    catch(error)
    {
        alert(error.message);
    }
}

function  createLinearGradientBrush(plugin)
{
    // Define a XAML fragment.
    var xamlFragment = '<LinearGradientBrush>';
       xamlFragment +=   '<GradientStop Color="Yellow" Offset="0.0" />';
       xamlFragment +=   '<GradientStop Color="Orange" Offset="0.5" />';
       xamlFragment +=   '<GradientStop Color="Red" Offset="1.0" />';
       xamlFragment += '</LinearGradientBrush>';

    // Create the XAML fragment and return it.
    return plugin.content.createFromXaml(xamlFragment, false);
}

在上面的事例中,如果你还可以为更多对象动态的创建LinearGradientBrush,你还能为每一个对象调用createLinearGradientBrush函数,如下面:

function  initFill(objectArray)
{
    // Set the Fill property for each item in the object array.
    for (i = 0; i < objectArray.length; i++)
    {
        objectArray[i].fill = createLinearGradientBrush();
    }
}

---

(4)Defining Events in XAML Fragments

---

XAML片段能为内容中定义事件.下面事例Show的是为Rectangle对象中定义MouseEnter和MouseLeave事件.在case中,当鼠标进入Rectangle时边界会增加.并当鼠标离开时边界回减小.

function  onLoaded(sender, eventArgs)
{
    // Retrieve a reference to the plug-in.
    var plugin = sender.getHost();

    // Define a XAML fragment.
    var xamlFragment = '<Rectangle Width="100" Height="40" Fill="OldLace" ';
       xamlFragment += 'StrokeThickness="1" Stroke="Black" ';
       xamlFragment += 'MouseEnter="onMouseEnter" MouseLeave="onMouseLeave" />';

    // Create the XAML fragment.
    var rectangle = plugin.content.createFromXaml(xamlFragment, false);

    // Add the XAML fragment as a child of the root Canvas object.
    sender.children.add(rectangle);
}

function  onMouseEnter(sender, eventArgs)
{
    // Increase the stroke on entering.
    sender.StrokeThickness = 2;
}

function  onMouseLeave(sender, eventArgs)
{
    // Decrease the stroke on leaving.
    sender.StrokeThickness = 1;
}

---

(5)Creating a Tree of XAML Objects

---

还允许你创建完整的XAML对象树.还有在你需要时删除这个树.不是删除对象分配.能够动态的添加和删除内容.让你的应用程序能拥有像工具提示样,当你鼠标经过页面某一部分就会显示.

在下面JavaScript事例显示的是怎样一个自定义的工具提示,这个工具提示由Canvas, Rectangle,和TextBlock对象分层次结构组成.当鼠标进入这个Canvas对象边界时就会出现工具提示.离开时就结束提示.

//  Define global variables.
var  plugin, toolTip, mainCanvas;

//  Set global variables for the plug-in and main Canvas objects.
function  onLoaded(sender, eventArgs)
{
    plugin = sender.getHost();
    mainCanvas = sender;
}

function  onMouseEnter(sender, args)  {
    // Determine whether the tooltip is created.
    if (toolTip == null) {

        // Define the XAML fragment for the tooltip.
        var xamlFragment = '<Canvas Width="150" Height="30" Background="#FFFFE1">';
           xamlFragment +=   '<Rectangle Width="150" Height="30" Stroke="Black" />';
           xamlFragment +=   '<TextBlock Text="Hello, World" Canvas.Left="10" Canvas.Top="5" />';
           xamlFragment += '</Canvas>';

        // Create the XAML fragment for the tooltip.
        toolTip = plugin.content.createFromXaml(xamlFragment, false);

        // Position the tooltip at a relative x/y coordinate value.
        var cursorPosition = args.getPosition(sender);
        toolTip["Canvas.Left"] = cursorPosition.x + 30;
        toolTip["Canvas.Top"] = cursorPosition.y + 40;
    }

    // Add the tooltip to the Canvas object.
    mainCanvas.children.add(toolTip);
}

function  onMouseLeave(sender, args)
{
    // Determine whether the tooltip is created.
    if (toolTip != null)
    {
        // Remove the tooltip from the Canvas object.
        mainCanvas.children.remove(toolTip);
    }
}

上面的事例你能追加修改的XAML片段的属性到Silverlight对象层次中.可以你在任意对象中调用方法.注意修改Canvas.Left和Canvas.Top的属性.这些属性呈现对象的位置都要先找回父元素的位置.在这个case中,父元素是Canvas对虾感,并且子元素就是为Canvas对象做提示的.

//  Position the tooltip at a relative x/y coordinate value.
var  cursorPosition  =  args.getPosition(sender);
toolTip[ " Canvas.Left " ]  =  cursorPosition.x  +   30 ;
toolTip[ " Canvas.Top " ]  =  cursorPosition.y  +   40 ;