Silverlight入门教程-wdq1103-ChinaUnix博客

直面挑戰

首页　| 　博文目录　| 　关于我

wdq1103

博客访问： 143923
博文数量： 48
博客积分： 2510
博客等级：少校
技术积分： 630
用户组：普通用户
注册时间： 2007-09-03 20:57

文章分类

全部博文（48）

ASP.NET AJX（4）
.NET（2）
未分配的博文（42）

文章存档

2010年（4）

2009年（23）

2008年（21）

我的朋友

最近访客

推荐博文

Silverlight入门教程

分类：

2008-07-29 08:56:16

阅读(555) | 评论(0) | 转发(0) |

上一篇：asp.net跳转页面的三种方法比较

下一篇：DIV边框代码

给主人留下些什么吧！~~

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6

(一).概述
(二). 代码示例
1).基础知识示例
  1. 对象的定位
  2. 使用SilverLight插件
  3. SilverLight元素的鼠标事件
  4. SilverLight元素的键盘事件
  5. 方法createFromXaml使用示例
  6. 访问和修改Silverlight元素以及属性
  7. Silverlight中的字体使用
  8. 全屏支持功能
  9. Silverlight Downloader 对象使用
  10.定时器功能
  11.错误处理支持
  12.把xaml段内置在aspx或html页面中
2).制作图形示例
  13.基本图形形状示例
  14.画刷对象的使用
  15.视频刷对象的使用
  16.Path元素使用
  17.变换效果(Transform)
3).多媒体功能
  18.在线电影播放
4).制作动画效果示例
  19.一个动画示例
  20.动画的交互控制
  21.动画关键帧示例

Silverlight是一个跨浏览器的、跨操作系统平台的插件，为Web带来下一代媒体体验和丰富的交互式应用程序体验. 使用JS实现Ajax技术可以使网站具有很好的用户体验, 但它也会使网站过于庞大和臃肿. 业余时间学习了一下微软的Silverlight官方教程, 在学习时顺便根据学习示例整理了一个教程. 此教程包括一些精简的小例子, 主要针对开发使用场景展开示例, 在实际开发中也可以作为查找手册使用. 运行环境为VS 2005, 这些示例比较简单很容易看懂, 因此示例没有太多注释.

二). 代码示例

基础知识示例

对象的定位

通过呈现几个Silverlight元素来示例对象之间的定位, 以及在一个页面中创建装载多个Silverlight对象.

I. 页面代码(Default.aspx)

<title>Silverlight 对象的定位title>

head>

<body>

createSilverlight1();

script>

div>

<hr>

createSilverlight2();

script>

div>

<hr>

createSilverlight3();

script>

div>

<hr>

createSilverlight4();

script>

div>

<hr>

createSilverlight5();

script>

div>

form>

body>

html>

II. 页面对应的JS文件代码(Default.aspx.js)

//创建对象

function createSilverlight1()

{

Silverlight.createObjectEx({

source: "Page1.xaml",

parentElement: document.getElementById("SilverlightControlHost1"),

id: "SilverlightControl1",

properties: {

width: "350",

height: "350",

version: "1.0",

background: "white",

isWindowless: "true",

enableHtmlAccess: "true"

events: {}

});

}

function createSilverlight2()

{

Silverlight.createObjectEx({

source: "Page2.xaml",

parentElement: document.getElementById("SilverlightControlHost2"),

id: "SilverlightControl2",

properties: {

width: "350",

height: "350",

version: "1.0",

background: "white",

isWindowless: "true",

enableHtmlAccess: "true"

events: {}

});

}

function createSilverlight3()

{

Silverlight.createObjectEx({

source: "Page3.xaml",

parentElement: document.getElementById("SilverlightControlHost3"),

id: "SilverlightControl3",

properties: {

width: "350",

height: "350",

version: "1.0",

background: "white",

isWindowless: "true",

enableHtmlAccess: "true"

events: {}

});

}

function createSilverlight4()

{

Silverlight.createObjectEx({

source: "Page4.xaml",

parentElement: document.getElementById("SilverlightControlHost4"),

id: "SilverlightControl4",

properties: {

width: "350",

height: "350",

version: "1.0",

background: "white",

isWindowless: "true",

enableHtmlAccess: "true"

events: {}

});

}

function createSilverlight5()

{

Silverlight.createObjectEx({

source: "Page5.xaml",

parentElement: document.getElementById("SilverlightControlHost5"),

id: "SilverlightControl5",

properties: {

width: "350",

height: "350",

version: "1.0",

background: "white",

isWindowless: "true",

enableHtmlAccess: "true"

events: {}

});

}

III.Xaml文件代码

1. Page1.xaml代码

<Canvas

xmlns=""

xmlns:x=""

Width="640"Height="480"

Background="LightGreen"

Canvas.Left="10"

Canvas.Top="10"

<RectangleCanvas.Left="30"Canvas.Top="30"Fill="LightBlue"

Width="200"Height="200" />

Canvas>

2. Page2.xaml代码

<Canvas

xmlns=""

xmlns:x=""

Width="300"Height="300"

Background="White">

<CanvasWidth="250"Height="250"Canvas.Left="30"Canvas.Top="30"Background="LightBlue">

<RectangleCanvas.Left="30"Canvas.Top="30"Fill="LightGreen"

Width="200"Height="200" />

Canvas>

3. Page3.xaml代码

<Canvas

xmlns=""

xmlns:x=""

Width="300"Height="300"

Background="White">

<LineX1="280"Y1="10"X2="10"Y2="280"

Stroke="Blue"StrokeThickness="5"/>

<PolylinePoints="150, 150 150, 250 250, 250 250, 150"

Stroke="Yellow"StrokeThickness="10"/>

<PathData="M 10,100 C 10,300 300,-200 250,100z"

Stroke="Red"Fill="Orange"

Canvas.Left="10"Canvas.Top="10" />

Canvas>

4. Page4.xaml代码

<Canvas

xmlns=""

xmlns:x=""

Width="200"Height="200">

<Rectangle

Canvas.Left="100"Canvas.Top="100"

Width="50"Height="50"

Fill="RoyalBlue">

<Rectangle.RenderTransform>

<RotateTransformAngle="45" />

Rectangle.RenderTransform>

Rectangle>

Canvas>

5. Page5.xaml代码

<Canvas

xmlns=""

xmlns:x="">

<Ellipse

Canvas.ZIndex="3"

Canvas.Left="5"Canvas.Top="5"

Height="200"Width="200"

Stroke="Black"StrokeThickness="10"Fill="Silver" />

<Ellipse

Canvas.ZIndex="2"

Canvas.Left="50"Canvas.Top="50"

Height="200"Width="200"

Stroke="Black"StrokeThickness="10"Fill="DeepSkyBlue" />

<Ellipse

Canvas.ZIndex="1"

Canvas.Left="95"Canvas.Top="95"

Height="200"Width="200"

Stroke="Black"StrokeThickness="10"Fill="Lime" />

Canvas>

使用SilverLight插件

I. 页面代码(Default.aspx)

<title>访问Silverlight插件title>

head>

createSilverlight();

script>

div>

form>

body>

html>

II.Xaml文件代码

<CanvasName="parentCanvas"

Opacity="0"

xmlns=""

xmlns:x=""

Loaded="onLoaded"MouseLeftButtonDown="MouseLeftButtonDown"

<Canvas.Triggers>

<EventTriggerRoutedEvent="Canvas.Loaded">

<EventTrigger.Actions>

<DoubleAnimationStoryboard.TargetName="parentCanvas"Storyboard.TargetProperty="Opacity"From="0"To="1"Duration="0:0:5"/>

Storyboard>

BeginStoryboard>

EventTrigger.Actions>

EventTrigger>

Canvas.Triggers>

<TextBlockName="helloBlock"Foreground="Black"Cursor="Hand"Text="King" />

Canvas>

III.页面对应的JS文件代码(Default.aspx.js)

function createSilverlight()

{

Silverlight.createObjectEx({

source: "Page.xaml",

parentElement: document.getElementById("SilverlightControlHost"),

id: "SilverlightControl",

properties: {

width: "350",

height: "350",

version: "1.0",

background: "white",

isWindowless: "true",

enableHtmlAccess: "true"

events: {onLoad:onLoad}

});

}

//判断当前安装插件的版本

function onLoaded(sender, eventArgs)

{

var version = "1.1";

var isInstalled = Silverlight.isInstalled(version);

alert(isInstalled);

}

//访问运行中插件

function MouseLeftButtonDown(sender, mouseEventArgs)

{

var plugin = sender.getHost();

alert("Silverlight V1.1 supported: " + plugin.isVersionSupported("1.1"));//plugin

alert("IsLoaded: " + plugin.IsLoaded);//plugin

alert("Background: " + plugin.Settings.Background); //plugin.Settings

alert("ActualHeight: " + plugin.Content.ActualHeight );//plugin.Content

}

function onLoad(plugin, userContext, sender)

{

alert(plugin.id + " : " + userContext + " : " + sender.toString());

}

元素的鼠标事件

I.鼠标滑入和滑出事件

I. 页面代码(Default.aspx)

<title>Silverlight元素的鼠标进入/离开事件title>

head>

createSilverlight();

script>

div>

form>

body>

html>

II.Xaml文件代码

<Canvas

xmlns=""

xmlns:x=""

Loaded="onLoaded">

<Ellipse

MouseEnter="onMouseEnter"

MouseLeave="onMouseLeave"

Height="100"Width="100"

Fill="Teal"Name="Ellispse1" />

<Ellipse

MouseEnter="onMouseEnter"

MouseLeave="onMouseLeave"

Canvas.Left="120"

Height="100"Width="100"

Fill="Teal"Name="Ellispse2" />

<TextBlockName="Status"Canvas.Top="120" />

<TextBlockName="RemoveClickEvent"Canvas.Top="250"Text="Click Me Remove Mouse Click Event"MouseLeftButtonDown="onMouseDownRemoveEvent" />

Canvas>

III.页面对应的JS文件代码(Default.aspx.js)

function createSilverlight()

{

Silverlight.createObjectEx({

source: "Page.xaml",

parentElement: document.getElementById("SilverlightControlHost"),

id: "SilverlightControl",

properties: {

width: "350",

height: "350",

version: "1.0",

background: "white",

isWindowless: "true",

enableHtmlAccess: "true"

events: {}

});

}

function onMouseEnter(sender, mouseEventArgs)

{

sender.fill = "Coral";

}

function onMouseLeave(sender, eventArgs)

{

sender.fill = "Teal";

}

var entertoken1, entertoken2,entertoken1,entertoken2;

function onLoaded(sender, eventArgs)

{

Ellispse1 = sender.findName("Ellispse1");

Ellispse2 = sender.findName("Ellispse2");

entertoken1 = Ellispse1.addEventListener("MouseLeftButtonUp", onMouseLeftButtonUp);

entertoken2 = Ellispse2.addEventListener("MouseLeftButtonUp", onMouseLeftButtonUp);

}

function onMouseLeftButtonUp(sender, mouseEventArgs)

{

var pt = mouseEventArgs.getPosition(null);

sender.findName("Status").text = "(" + pt.x + "," + pt.y + ")";

}

function onMouseDownRemoveEvent(sender, mouseEventArgs)

{

Ellispse1.removeEventListener("MouseLeftButtonUp", entertoken1);

Ellispse2.removeEventListener("MouseLeftButtonUp", entertoken2);

}

II.鼠标点击(按下/弹起)和移动事件

I. 页面代码(Default.aspx)

<title>Silverlight元素的鼠标点击/移动事件title>

head>

createSilverlight();

script>

div>

form>

body>

html>

II.Xaml文件代码

<Canvasxmlns=""

xmlns:x=""

MouseLeftButtonDown="onMouseDown"

MouseLeftButtonUp="onMouseUp"

MouseMove="onMouseMove"

Canvas.Top="20"Canvas.Left="50">

<Ellipse

Height="100"Width="100"

Fill="Gold"

Stroke="Black"StrokeThickness="4" />

<Ellipse

Height="50"Width="50"

Canvas.Top="25"Canvas.Left="25"

Fill="Black" />

<Canvas

MouseLeftButtonDown="onMouseDown"

MouseLeftButtonUp="onMouseUp"

MouseMove="onMouseMove"

Canvas.Top="140"Canvas.Left="100">

<Canvas.RenderTransform>

<RotateTransformAngle="45" />

Canvas.RenderTransform>

<Rectangle

Height="100"Width="100"

Fill="Coral"

Stroke="Black"StrokeThickness="4" />

Canvas>

III.页面对应的JS文件代码(Default.aspx.js)

function createSilverlight()

{

Silverlight.createObjectEx({

source: "Page.xaml",

parentElement: document.getElementById("SilverlightControlHost"),

id: "SilverlightControl",

properties: {

width: "350",

height: "350",

version: "1.0",

background: "white",

isWindowless: "true",

enableHtmlAccess: "true"

events: {}

});

}

var beginX;

var beginY;

var isMouseDown = false;

function onMouseDown(sender, mouseEventArgs)

{

beginX = mouseEventArgs.getPosition(null).x;

beginY = mouseEventArgs.getPosition(null).y;

isMouseDown = true;

//使当前控件获取鼠标焦点, 即使光标不在该元素上

sender.captureMouse();

}

function onMouseMove(sender, mouseEventArgs)

{

if (isMouseDown == true)

{

var currX = mouseEventArgs.getPosition(null).x;

var currY = mouseEventArgs.getPosition(null).y;

sender["Canvas.Left"] += currX - beginX;

sender["Canvas.Top"] += currY - beginY;

beginX = currX;

beginY = currY;

}

function onMouseMove(sender, mouseEventArgs)

{

if (isMouseDown == true)

{

var currX = mouseEventArgs.getPosition(null).x;

var currY = mouseEventArgs.getPosition(null).y;

sender["Canvas.Left"] += currX - beginX;

sender["Canvas.Top"] += currY - beginY;

beginX = currX;

beginY = currY;

}

function onMouseUp(sender, mouseEventArgs)

{

isMouseDown = false;

sender.releaseMouseCapture();

}

元素的键盘事件

I. 页面代码(Default.aspx)

<title>Canvas键盘按键事件title>

head>

createSilverlight();

script>

div>

form>

body>

html>

II.Xaml文件代码

<CanvasName="parentCanvas"

xmlns=""

xmlns:x=""

KeyDown="onKeyDown"

<TextBlockName="helloBlock"Foreground="Black"Cursor="Hand"Text="King" />

Canvas>

III.页面对应的JS文件代码(Default.aspx.js)

function createSilverlight()

{

Silverlight.createObjectEx({

source: "Page.xaml",

parentElement: document.getElementById("SilverlightControlHost"),

id: "SilverlightControl",

properties: {

width: "350",

height: "350",

version: "1.0",

background: "white",

isWindowless: "true",

enableHtmlAccess: "true"

events: {}

});

}

function onKeyDown(sender, keyEventArgs)

{

var msg;

msg = " Press Shift = " + keyEventArgs.shift;

msg += " Press Ctrl = " + keyEventArgs.ctrl;

msg += " Key = " + keyEventArgs.key;

msg += " PlatformKeyCode = " + keyEventArgs.PlatformKeyCode;

msg += " The Platform is windows = " + (navigator.userAgent.indexOf("Windows") != -1);

alert(msg);

}

方法createFromXaml使用示例

I. 页面代码(Default.aspx)