#眉標=Silverlight
#副標=Silverlight開發技術（6）
#大標=ASP.NET AJAX與Silverlight的完美整合
#作者=文／圖	董大偉



==<反灰>===========
ScriptManager.RegisterStartupScript (Me.Page, GetType(String), key值,要動態產生的JavaScript, True)
==<end>==============




　　
　　
==程式1<box>==============
<Canvas
	xmlns="http://schemas.microsoft.com/client/2007"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Width="640" Height="480"
	Background="Yellow"
	Name="Page">
</Canvas>
==<end>==============
　　
　　



==程式2<box>==============
0000:    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
0001:        Dim xaml As String = "<Rectangle  Width='207'  Height='33'  Fill='Red' Stroke='Black' Canvas.Left='124' Canvas.Top='72' /> "
0002:        Dim Js As String = ""
0003:        'Strings.Chr(34) →『"』
0004:        '底下的程式碼組出JavaScript語法
0005:        '將需要動態顯示的Xaml Code填入xamlCode變數
0006:        Js += "var xamlCode = " & Strings.Chr(34) & xaml & Strings.Chr(34) & ";"
0007:        '利用xamlCode建立Xaml物件
0008:        Js += "var XamlElement = document.getElementById('Xaml1').content.createFromXaml(xamlCode);"
0009:        '將Xaml物件加入Root Canvas
0010:        Js += "document.getElementById('Xaml1').content.root.children.add(XamlElement);"
0011:        '把上面這串JavaScript以非同步方式動態Render到前端
0012:        ScriptManager.RegisterStartupScript(Me.Page, GetType(String), "", Js, True)
0013:    End Sub
0014:End Class
==<end>==============
　　




==<反灰>===========
var xamlCode = "<Rectangle  Width='207'  Height='33'  Fill='Red' Stroke='Black' Canvas.Left='124' Canvas.Top='72' />";
var XamlElement = document.getElementById('Xaml1').content.createFromXaml(xamlCode);"
document.getElementById('Xaml1').content.root.children.add(XamlElement);
==<end>==============



　　
==程式3<box>==============
//動態建立 Xaml
function CreateXaml(SilverlightObject, xaml, CanvasName)
{
   //抓取host
    var theHost = document.getElementById(SilverlightObject);
    if (theHost==null) {alert('找不到 SilverlightObject ['+SilverlightObject+']');return;}
   //建立Xaml指令碼 
    var xamlElement=theHost.content.createFromXaml(xaml);
    if (xamlElement==null) {alert('無法建立 xaml ['+xaml+']');return;}
   //抓取Canvas 
    if (CanvasName=='') 
    {
       //如果傳入的資料是空白，則抓取Root 
        var Canvas1 = theHost.content.root;
    }
    else
    {
       //否則抓取指定的Canvas 
        var Canvas1 = theHost.content.findName(CanvasName);
    }
   //如果實在找不到Canvas 
    if (Canvas1==null) {alert('找不到 Canvas ['+CanvasName+']');return;}
  //動態在Canvas上加入Xaml
    Canvas1.children.add(xamlElement);
}
==<end>==============
　　



==<反灰>===========
CreateXaml('Xaml1',
           '<Rectangle Width="227" Height="37" Fill="#FFFF0000" 
             Stroke="#FF000000" Canvas.Left="48" Canvas.Top="132" Name="R1"/>',
           'Page');
==<end>==============
　　




==程式4		<box>==============
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        '取得Xaml1控制項的ID
        Dim SilverlightObject As String = Me.Xaml1.ClientID
        '抓取頁面上的TextBox內容(Xaml碼)
        Dim xaml As String = Me.TextBox1.Text
        '設定這段Xaml碼要加入哪一個Canvas
        Dim CanvasName As String = "Page"
        '把Enter符號消去
        xaml = xaml.Replace(Strings.Chr(13) + Strings.Chr(10), "")
        '呼叫DoAsnycJavaScript以同步方式執行JavaScript
        DoAsnycJavaScript("CreateXaml('" & SilverlightObject & "',' " & xaml & "','" & CanvasName & "');")
    End Sub
    '非同步方式執行JavaScript
    Sub DoAsnycJavaScript(ByVal js As String)
        Dim key As String
        '建立為一Key值
        key = New System.Guid().ToString & Rnd() & Now.Ticks
        '非同步方式執行JavaScript
        ScriptManager.RegisterStartupScript(Me.Page, GetType(String), key, js, True)
    End Sub
==<end>==============
　　
　　


　　


==程式5		<box>==============
//修改屬性
function SetValue(SilverlightObject, ElementName, Propery, Value)
{
    //修改屬性
    var theHost = document.getElementById(SilverlightObject);
    if (theHost==null) {alert('找不到 theHost ['+SilverlightObject+']');return;}   
    var Element = theHost.content.findName(ElementName);
    if (Element==null) {alert('找不到 ElementName ['+ElementName+']');return;}  
    Element.setValue(Propery,Value);
}
==<end>==============
　　
　　
　　
　　
==程式6		<box>==============
<Canvas
	xmlns="http://schemas.microsoft.com/client/2007"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Width="640" Height="480"
	Background="Yellow"
	Name="Page"
	>
  <Ellipse Width="133" Height="45" Stroke="#FF000000" Canvas.Left="136" Canvas.Top="52" RenderTransformOrigin="0.5,0.5">
    <Ellipse.Fill>
      <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
        <GradientStop Color="#FFFFFFFF" Offset="0.005"/>
        <GradientStop Color="#FF00F6FF" Offset="1"/>
      </LinearGradientBrush>
    </Ellipse.Fill>
    <Ellipse.RenderTransform>
      <TransformGroup>
        <ScaleTransform ScaleX="1" ScaleY="1"/>
        <SkewTransform AngleX="0" AngleY="0"/>
        <RotateTransform Name="Ellipse_RotateTransformAngle" Angle="0"/>
        <TranslateTransform X="0" Y="0"/>
      </TransformGroup>
    </Ellipse.RenderTransform>
  </Ellipse>
</Canvas>
==<end>==============
　　
　　

　　
==程式7		<box>==============
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        '取得Xaml1控制項的ID
        Dim SilverlightObject As String = Me.Xaml1.ClientID
        '要修改的物件
        Dim ElementName As String = "Ellipse_RotateTransformAngle"
        '要修改的屬性名稱
        Dim PropertyName As String = "Angle"
        '屬性值
        Dim value As Single
        '抓取TextBox屬性值
        Single.TryParse(Me.TextBox1.Text, value)
        '呼叫DoAsnycJavaScript以同步方式執行JavaScript
        DoAsnycJavaScript("SetValue('" & SilverlightObject & "','" & ElementName & "','" & PropertyName & "','" & value & "');")
    End Sub
==<end>==============
　　
　　



==程式8		<box>==============
<Canvas
	xmlns="http://schemas.microsoft.com/client/2007"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Width="640" Height="480"
	Name="Page"
	>
(…略…)
  <Path RenderTransformOrigin="0,0" Width="51.338" Height="13.92" Stretch="Fill" Canvas.Left="33.348" Canvas.Top="28.691" Data="(…略…)">
    <Path.RenderTransform>
      <TransformGroup>
        <ScaleTransform ScaleX="1" ScaleY="1"/>
        <SkewTransform AngleX="0" AngleY="0"/>
        <RotateTransform Angle="0"/>
        <TranslateTransform X="0" Y="0"/>
      </TransformGroup>
    </Path.RenderTransform>
    <Path.Fill>
      <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
        <GradientStop Color="#FF000000" Offset="0"/>
        <GradientStop Color="#FFFF0000" Offset="1"/>
      </LinearGradientBrush>
    </Path.Fill>
  </Path>
</Canvas>
==<end>==============
　　
　　



==程式9		<box>==============
<Canvas
	xmlns="http://schemas.microsoft.com/client/2007"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Width="640" Height="480"
	Name="Page"
	>
  <Canvas.Resources>
    <Storyboard x:Name="Timeline1">
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        <SplineDoubleKeyFrame KeyTime="00:00:10" Value="9"/>
      </DoubleAnimationUsingKeyFrames>
     (…略…)
    </Storyboard>
  </Canvas.Resources>
  <Canvas.Background>
   (…略…)
  </Canvas.Background>
  <Path RenderTransformOrigin="0,0" Width="51.338" Height="13.92" Stretch="Fill" Canvas.Left="33.348" Canvas.Top="28.691" Data="(…略…)" x:Name="path">
   (…略…)
    </Canvas>
==<end>==============
　　
　　
　　

　
　　
==程式10		<box>==============
　　
//動態播放動畫
function PlayAnimation(SilverlightObject, StoryboardName, TargetName)
{
    var theHost = document.getElementById(SilverlightObject);
    if (theHost==null) {alert('找不到 theHost ['+SilverlightObject+']');return;}    
    var Storyboard = theHost.content.findName(StoryboardName);
    if (Storyboard==null) {alert('找不到 Storyboard ['+StoryboardName+']');return;}     
    //設定動畫播放對象
    if (TargetName!='') Storyboard.setValue("Storyboard.TargetName",TargetName);
    //播放動畫   
    Storyboard.Begin();
}

//重設(停止)動畫
function ResetAnimation(SilverlightObject, StoryboardName)
{
    var theHost = document.getElementById(SilverlightObject);
    if (theHost==null) {alert('找不到 theHost ['+SilverlightObject+']');return;}    
    var Storyboard = theHost.content.findName(StoryboardName);
   if (Storyboard==null) {alert('找不到 Storyboard ['+StoryboardName+']');return;}      
    //停止動畫   
    Storyboard.Stop();
}
==<end>==============
　　


　　
==程式11		<box>==============
　　
    '按下Button後撥放動畫
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        '取得Xaml1控制項的ID
        Dim SilverlightObject As String = Me.Xaml1.ClientID
        '要修改的屬性名稱
        Dim StoryBoardName As String = "Timeline1"
        '呼叫DoAsnycJavaScript以同步方式執行JavaScript
        DoAsnycJavaScript("PlayAnimation('" & SilverlightObject & "','" & StoryBoardName & "','');")
    End Sub
    '按下Button後停止動畫撥放
    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        '取得Xaml1控制項的ID
        Dim SilverlightObject As String = Me.Xaml1.ClientID
        '要修改的屬性名稱
        Dim StoryBoardName As String = "Timeline1"
        '呼叫DoAsnycJavaScript以同步方式執行JavaScript
        DoAsnycJavaScript("ResetAnimation('" & SilverlightObject & "','" & StoryBoardName & "');")
    End Sub
==<end>==============