Silverlgith 進階 ---《一》

 

5 Asp.net 與Silverlithg 編程

5.1 javascript 讀取設定silverlight 對象屬性值

5.1.1 以JavaScript抓取Page中的Silverlight Control

var theHost = document.getElementById("Xaml1");

5.1.2 抓取Silverlight Control中的xaml元素

var theHost = document.getElementById("Xaml1");

var xamlElement = theHost.content.findName(xamlElementName);

5.1.3動態清空Canvas

var theHost = document.getElementById("Xaml1");

//抓取Canvas1物件

var Canvas1 = theHost.content.findName(“Canvas1”);

//清空Canvas

Canvas1.children.clear();

5.1.4 以JavaScript動態建立Silverlight元素

   //抓取Silverlight Control

   var theHost = document.getElementById("Xaml1");

 //動態建立 Xaml元素

   var Element = theHost.content.createFromXaml(xamlCode);

   //抓取Canvas1物件

   var Canvas1 = theHost.content.findName(“Canvas1”);

 //在指定的Canvas上動態建立Xaml

 Canvas1.children.add(Element);

實例:

Xaml文件

<Canvas

        xmlns="http://schemas.microsoft.com/client/2007"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        x:Name="parentCanvas"

        Loaded="Page_Loaded"

        x:Class="LeftMenu.ASPJavascript;assembly=ClientBin/LeftMenu.dll"

        Width="640"

        Height="480"

        Background="White"

        >

           <Canvas.Resources>

                     <Storyboardx:Name="Timeline1">

                                <DoubleAnimationUsingKeyFramesBeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">

                                           <SplineDoubleKeyFrameKeyTime="00:00:00"Value="-1"/>

                                           <SplineDoubleKeyFrameKeyTime="00:00:01"Value="196"/>

                                DoubleAnimationUsingKeyFrames>

                                <DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

                                           <SplineDoubleKeyFrameKeyTime="00:00:00"Value="0"/>

                                           <SplineDoubleKeyFrameKeyTime="00:00:01"Value="-151"/>

                                DoubleAnimationUsingKeyFrames>

                     Storyboard>

           Canvas.Resources>

           <Rectangle   Canvas.Left="0"Canvas.Top="0"Width="444.184"Height="181.42"RenderTransformOrigin="0.5,0.5"x:Name="Re2"RadiusX="0"RadiusY="0">

                     <Rectangle.Fill>

                                <ImageBrushx:Name="ImageBrush001"ImageSource="05.jpg">ImageBrush>

                     Rectangle.Fill>

           Rectangle>

           <Imagex:Name="ImageBrush0023" Source="01.jpg"Canvas.Left="10"Canvas.Top="100"RenderTransformOrigin="0.5,0.5">

                     <Image.RenderTransform>

                                <TransformGroup>

                                           <ScaleTransformScaleX="1"ScaleY="1"/>

                                           <SkewTransformAngleX="0"AngleY="0"/>

                                           <RotateTransformAngle="0"/>

                                           <TranslateTransformX="0"Y="0"/>

                                TransformGroup>

                     Image.RenderTransform>

Image>

           <Ellipsex:Name="ell01"Width="50"Height="30"Canvas.Left="10"Canvas.Top="50" Fill="Red">Ellipse>

Canvas>

Html 文件

DOCTYPEHTMLPUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

           <head>

                     <title>title>

           head>

           <body>

           body>

html>DOCTYPEhtmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>Silverlight Brush title>

    <scripttype="text/javascript" src="Silverlight.js">script>

    <scripttype="text/javascript" language=javascript>

    // JScript source code

        //contains calls to silverlight.js, example below loads Page.xaml

        function createSilverlight()

        {

                   Silverlight.createObjectEx({

                             source: "ASPJavascript.xaml",

                             parentElement: document.getElementById("SilverlightControlHost"),

                             id: "SilverlightControl",

                             properties: {

                                        width: "100%",

                                        height: "100%",

                                        version: "1.1",

                                        enableHtmlAccess: "true"

                             },

                             events: {}

                   });

                

                   // Give the keyboard focus to the Silverlight control by default

            document.body.onload = function() {

              var silverlightControl = document.getElementById('SilverlightControl');

              if (silverlightControl)

              silverlightControl.focus();

            }

        }

        function fnclick()

        {

            var theHost = document.getElementById("SilverlightControl");

            var xamlElement = theHost.content.findName("ImageBrush001");

            if(xamlElement != null)

            {

                xamlElement.imageSource = "02.jpg";

                var xamlElement0 = theHost.content.findName("ImageBrush0023");

                xamlElement0.Source = "02.jpg";

            }

            var xamlElement0 = theHost.content.findName("ImageBrush0023");

            if(xamlElement0 != null)

            {

                xamlElement0.Source = "02.jpg";

            }            

        }

        

        function funClear()

        {

             //抓取Silverlight Control

            var theHost = document.getElementById("SilverlightControl");

            //抓取Canvas1物件

            var Canvas1 = theHost.content.findName("parentCanvas");

            //清空Canvas

            Canvas1.children.clear();

        }

        function funAdd()

        {

               //抓取Silverlight Control

               var theHost = document.getElementById("SilverlightControl");

              //動態建立 Xaml元素

              var xamlCode = "" ;

               var Element = theHost.content.createFromXaml(xamlCode);

               //抓取Canvas1物件

               var Canvas1 = theHost.content.findName("parentCanvas");

              //在指定的Canvas上動態建立Xaml

              Canvas1.children.add(Element);

        }    

        function funStoryboard()

        {

            var theHost = document.getElementById("SilverlightControl");

            //抓取Canvas1物件

            var Storyboard = theHost.content.findName("Timeline1");

            Storyboard.setValue("Storyboard.TargetName","ImageBrush0023") ;

            //播放動畫  

            Storyboard.Begin();

        }                

            script>

            <styletype="text/css">

                .silverlightHost { width: 640px; height: 480px; }

            style>

        head>

<body>

    <divid="SilverlightControlHost" class="silverlightHost" >

        <scripttype="text/javascript">

            createSilverlight();

        script>

    div>

    <inputtype="button" onclick="fnclick()" value="下一張圖片" />

     <inputtype="button" onclick="funClear()" value="清除" />

     <inputtype="button" onclick="funAdd()" value="添加" />    

      <inputtype="button" onclick="funStoryboard()" value="開始動畫" />     

body>

html>

示例 delmo

5.1.5利用ASP.NET動態改變xaml元素

Xaml元素的屬性

屬性:Width, Height, Canvas.Top, Canvas.Left, Cursor, angle, Color ,…族繁不及備載

用法:

Element.Width=Width;
 改變Silverlight元素的寬度

Element.setValue(Propery,Value);

 改變Silverlight特定屬性的值

動態修改Xaml元素的屬性(JavaScript)

                      x:Name="R1" Width="222"

            Height="23" Canvas.Left="137" Canvas.Top="40">

          

                    

                               

                               

                    

          

           //抓取頁面上的Silverlight Control

           var theHost = document.getElementById("Xaml1");

           //Silverlight Content中找到R1

           var Rectangle1 = theHost.content.findName("R1");

           //改變矩形物件的寬度

           Rectangle1.Width=30;

5.2 Silverlight的事件機制

5.2.1 Xaml元素的事件

事件:KeyDown, KeyUp, MouseMove, MouseEnter, MouseLeave, MouseLeftButtonDown, MouseLeftButtonUp

參數: sender, mouseEventArgs, keyEventArgs

用法:
mouseEventArgs.getPosition(null).x 滑鼠絕對座標
mouseEventArgs.getPosition(null).y 滑鼠絕對座標
keyEventArgs.key    被按下的按鍵碼
keyEventArgs.ctrl   ctrl鍵是否被按下
keyEventArgs.shift shift鍵是否被按下

5.2.2 Silverlight事件的動態委派

5.2.3 透過JavaScript針對特定物件播放動畫

//JavaScript播放Silverlight動畫
function PlayAnimation(SilverlightObject, StoryboardName, TargetName)

{

    var theHost = document.getElementById(SilverlightObject);

    //取得Storyboard

    var Storyboard = theHost.content.findName(StoryboardName);

    //設定動畫作用對象
          Storyboard.setValue("Storyboard.TargetName",TargetName);

    //播放動畫  

    Storyboard.Begin();

}

5.3web serveice ajax 應用

5.3.1 步驟如下

 1添加 web serveice 服務類WebService.cs

如例子:

WebService.cs

using System;

using System.Web;

using System.Collections;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Threading;

using System.Xml;

using System.IO;

using System.Data;

using System.Data.SqlClient;

using System.Web.Script.Services;

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[ScriptService()]

publicclassSilverlightWebService : System.Web.Services.WebService

{

    public SilverlightWebService()

    {

    }

    [WebMethod]

    publicstring GetCommand()

    {

        string connectionString = "Data Source=steven""sql2005;Initial Catalog=MyComix;uid=sa;pwd=123456";

        SqlConnection conn = newSqlConnection(connectionString);

        SqlCommand cmd = newSqlCommand(" select * from TR_User where User_PKID=2 ");

        cmd.Connection = conn;

        string command = string.Empty;

        try

        {

           conn.Open();

           SqlDataReader myReader = cmd.ExecuteReader();

           while ( myReader.Read() )

           {

               command = myReader["User_PKID"].ToString() + ":" + myReader["User_Code"].ToString()

                   + ":" + myReader["User_PWD"].ToString() + ":" + myReader["User_Name"].ToString()

                   + ":" + myReader["Email"].ToString() + ":" + myReader["Phone"].ToString() + ":" + myReader["Status"].ToString();

           }

        }

        catch (Exception ex)

        {

           return"exception thrown" + ex.Message;

        }

        finally

        {

           conn.Close();

        }

        return command;

    }

}

2 WebService.asmx

<%@ WebServiceClass="SilverlightWebService" CodeBehind="~/App_Code/SilverlightWebService.cs"

   Language="C#" %>

3 UserEdit.xaml

<Canvasxmlns="http://schemas.microsoft.com/client/2007"

       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"       

        x:Name="UserEdit"       

        Width="640"

        Height="480"

        Background="White"

        >

           <CanvasCanvas.Left="10" Canvas.Top="50" >

                     <TextBlock Text="User_Code:" Canvas.Left="10" >TextBlock>

                     <TextBlockx:Name="User_Code" Canvas.Left="120" >TextBlock>                  

           Canvas>

           <CanvasCanvas.Left="10" Canvas.Top="75">

                     <TextBlock Text="User_PWD:" Canvas.Left="10" >TextBlock>

                     <TextBlockx:Name="User_PWD" Canvas.Left="120" >TextBlock>                  

           Canvas>

           <CanvasCanvas.Left="10" Canvas.Top="100">

                     <TextBlock Text="User_Name:" Canvas.Left="10" >TextBlock>

                     <TextBlockx:Name="User_Name" Canvas.Left="120" >TextBlock>                 

           Canvas>

           <CanvasCanvas.Left="10" Canvas.Top="125">

                     <TextBlock Text="Email:" Canvas.Left="10" >TextBlock>

                     <TextBlockx:Name="Email" Canvas.Left="120" >TextBlock>                 

           Canvas>

           <CanvasCanvas.Left="10" Canvas.Top="150">

                     <TextBlock Text="Phone:" Canvas.Left="10" >TextBlock>

                     <TextBlockx:Name="Phone" Canvas.Left="120" >TextBlock>                

           Canvas>

           <CanvasCanvas.Left="10" Canvas.Top="175">

                     <TextBlock Text="Status:" Canvas.Left="10" >TextBlock>

                     <TextBlockx:Name="Status" Canvas.Left="120" >TextBlock>                

           Canvas>

           <CanvasCanvas.Left="10" Canvas.Top="175" Cursor="Hand">

                     <EllipseHeight="30" Width="70" Fill="Black">Ellipse>

                     <TextBlock Text="Send" Canvas.Top="5" Canvas.Left="20" Foreground="White" FontSize="14" >TextBlock>

           Canvas>           

Canvas>

4 Default.aspx

<%@ PageLanguage="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

DOCTYPEhtmlPUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headid="DefaultHeadSection" runat="server">

    <title>Silverlight and Web Servicestitle>

head>

<bodyonload="Go();">

<formid="theForm" runat="server">

        <asp:ScriptManagerID="ScriptManager1" runat="server">

            <Services>

            <asp:ServiceReferencePath="WebService.asmx" />

            Services>

        asp:ScriptManager>

form>

           <divid="SilverlightControlHost">

               <scripttype="text/javascript" src="js/silverlight.js">script>

               <scripttype="text/javascript" src="js/scene.xaml.js">script>

               <scripttype="text/javascript">

               function createSilverlight()

        {

                   Silverlight.createObjectEx({

                             source: "UserEdit.xaml",

                             parentElement: document.getElementById("SilverlightControlHost"),

                             id: "SilverlightControl",

                             properties: {

                                        width: "100%",

                                        height: "100%",

                                        version: "1.1"

                             },

                             events: {}

                   });

        }

        function pageLoaded()

        {

                   var control = document.getElementById('SilverlightControl');

                   if (control != null)

                             control.focus();

        }

               script>          

           <scripttype="text/javascript">

        createSilverlight();

           script>

           <scripttype="text/javascript">

        var currentMax = 0;

        function Go()

        {

           SilverlightWebService.GetCommand(onGetCommandComplete, onGetCommandTimeOut);

        }

        function onGetCommandComplete(result)

        {

            // split result

           var control = document.getElementById("theSilverlightControl");

            var resultSegmentsArray = result.split(":");

            var theHost = document.getElementById("SilverlightControl");

            theHost.content.findName("User_Code").Text = resultSegmentsArray[1];

            theHost.content.findName("User_PWD").Text = resultSegmentsArray[2];

            theHost.content.findName("User_Name").Text = resultSegmentsArray[3];

            theHost.content.findName("Email").Text = resultSegmentsArray[4];

            theHost.content.findName("Phone").Text = resultSegmentsArray[5];

            theHost.content.findName("Status").Text = resultSegmentsArray[6];

        }

        function onGetCommandTimeOut(result)

        {

            alert("GetCommandTimeOut! " + result);

        }

   script>

           div>

body>

html>

转载于:https://www.cnblogs.com/brakehuang/archive/2007/09/28/908855.html

你可能感兴趣的:(Silverlgith 進階 ---《一》)