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" >
<!-- saved from url=(0014)about:internet -->
<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 = "<TextBlock Text='hello world' FontSize='20'></TextBlock>" ;
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>
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)
<Rectangle MouseLeftButtonDown="RecMouseLeftButtonDown" Stroke="#FF000000"
x:Name="R1" Width="222"
Height="23" Canvas.Left="137" Canvas.Top="40">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
//抓取頁面上的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.3與web 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 Services</title>
</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>
