Silverlight入门教程

资料,教程,编程,文集

本文由xuenhua2008贡献
pdf文档可能在WAP端浏览体验不佳。建议您优先选择TXT，或下载源文件到本机查看。
一步一步学 Silverlight 2 系列(1) :创建一个基本的 Silverlight 应用 …… 2 一步一步学 Silverlight 2 系列(2) :基本控件 …… 9 一步一步学 Silverlight 2 系列(3) :界面布局 …… 16 一步一步学 Silverlight 2 系列(4) :鼠标事件处理 …… 26 一步一步学 Silverlight 2 系列(5) :实现简单的拖放功能 …… 35 一步一步学 Silverlight 2 系列(6) :键盘事件处理 …… 40 一步一步学 Silverlight 2 系列(7) :全屏模式支持 …… 45 一步一步学 Silverlight 2 系列(8) :使用样式封装控件观感 …… 50 一步一步学 Silverlight 2 系列(9) :使用控件模板 …… 55 一步一步学 Silverlight 2 系列(10) :使用用户控件 …… 63 一步一步学 Silverlight 2 系列(11) :数据绑定 …… 70 一步一步学 Silverlight 2 系列(12) :数据与通信之 WebClient …… 81 一步一步学 Silverlight 2 系列(13) :数据与通信之 WebRequest …… 90 一步一步学 Silverlight 2 系列(14) :数据与通信之 WCF…… 97 一步一步学 Silverlight 2 系列(15) :数据与通信之 ASMX …… 107 一步一步学 Silverlight 2 系列(16) :数据与通信之 JSON …… 117 一步一步学 Silverlight 2 系列(17) :数据与通信之 Data Services …… 126 一步一步学 Silverlight 2 系列(18) :综合实例之 RSS 阅读器 …… 137 一步一步学 Silverlight 2 系列(19) :如何在 Silverlight 中与 HTML DOM 交互(上) …… 147 一步一步学 Silverlight 2 系列(20) :如何在 Silverlight 中与 HTML DOM 交互(下) …… 156 一步一步学 Silverlight 2 系列(21) :如何在 Silverlight 中调用 JavaScript …… 168
一步一步学 Silverlight 2 系列(1):创建一个基本的 Silverlight 应用
概述
Silverlight 2 Beta 1 版本发布了,无论从 Runtime 还是 Tools 都给我们带来了很多的惊喜,如支持框 架语言 Visual Basic, Visual C#, IronRuby, Ironpython,对 JSON,Web Service,WCF 以及 S ockets 的支持等一系列新的特性.《一步一步学 Silverlight 2 系列》文章带您快速进入 Silverlight 2 开发. 本文为系列第一篇创建一个基本的 Silverlight 2 应用,不能免俗,从最简单的 Hello Word 开始.
建立项目
安装完 Silverlight 2 Beta 1 之后打开 VS2008,打开新建项目对话框,可以看到 Silverlight Applica tion 项目模板.
Silverlight 应用不能够独立运行,之后弹出的对话框中可供我们选择创建一个 Web Site 或者 Web Application Project 用来托管 S
ilverlight 应用程序.
这里我们选择创建一个 Web Application Project,创建完成后的项目结构如下所示:
理解.xap 文件
在建立一个 Silverlight 应用程序后,我们什么都不做,直接编译一下整个解决方案,可以看到在资源管理 器中多出了一个

资料,教程,编程,文集

ClientBin 的文件夹,并在下面添加了一个 TerryLee.SilverlightDemo2.xap 的文件.
该文件是一个标准的.NET 程序集, 在编译的时候所有的 XAML 标识和资源文件如图片等都会包含在里面, 采用了标准的 Zip 压缩算法,以减少客户端下载的文件体积.拷贝一份该文件,并且修改后缀名.xap 为. zip,并且解压缩,可以看到里面包含了一些 dll 文件和一个 AppManifest.xaml:
再打开 TerryLee.SilverlightDemo2TestPage.aspx 文件,在页面的顶部引入了 System.Web.Silverl ight 程序集,支持控件:
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.Silverlight Controls" TagPrefix="asp" %>
控件的声明如下,其中属性 Source 属性指定了刚才编译生成的.xap 文件的路径:
创建一个 Hello Word 程序
现在我们创建一个简单的 Hello Word Silverlight 程序,使用如下 XAML 创建一个简单的按钮:
运行后效果如下:
为按钮添加 Click 事件,在 XAML 编辑器中输入事件名称 Click 之后,再按 Tab 键将会使用默认的命名方 法生成事件处理方法:
打开 Page.xaml.cs 文件后,可以看到已经生成了对应的事件处理方法,现在就可以用熟悉的 C#来编写 处理程序了,如单击按钮时我们改变按钮的背景色和文字:
private void myButton_Click(object sender, RoutedEventArgs e)
{ this.myButton.Content = "Clicked!"; this.myButton.Background = new SolidColorBrush(Colors.Red); }
再运行上面的程序并单击按钮,按钮的文字及背景色发生了变化:
结束语
本篇文章是使用 Visual Studio 2008 开发 Silverlight 2 应用程序的一个入门, 相信大家都已经看过 Sc ottGu 的文章已经有所了解.但是为了整个系列完整起见,还是做了一下重复的劳动.
一步一步学 Silverlight 2 系列(2):基本控件
概述
Silverlight 2 Beta 1 版本发布了,无论从 Runtime 还是 Tools 都给我们带来了很多的惊喜,如支持框 架语言 Visual Basic, Visual C#, IronRuby, Ironpython,对 JSON,Web Service,WCF 以及 S ockets 的支持等一系列新的特性.《一步一步学 Silverlight 2 系列》文章带您快速进入 Silverlight 2 开发.
本文为系列文章第二篇学习几个基本的控件. 在 Silverlight 2 中,提供了大量的控件,包括 Button,,Calendar ,CheckBox ,DataGrid ,Dat ePicker ,GridSplitter ,HyperlinkButton ,ListBox ,RadioButton ,ScrollViewer ,Slider , ToggleButton,ToolTip ,WatermarkedTextBox 等,本文将讲述其中的几个控件之用法.
控件之 ToggleButton
翻转效果在 AJAX 时代已经相当多了,Silverlight 中内
置了 ToggleButton 控件,可以使用如下 XAML 代码声明一个 ToggleButton:
运行后界面如下:
单击按钮后,控件效果外观效果将会改变:
ToggleButton 控件有一个很重要的属性 IsThreeState,指示控件是否保持三种状态,如设为 false

资料,教程,编程,文集

,则 只会保持两种状态.
控件之 WatermarkedTextBox
WatermarkedTextBox 即水印效果文本框,可以在文本框未获得焦点之前显示一段文字提示信息,也可 以显示其它的控件.如下面的 XAML 中,在第一个 WatermarkedTextBox 中指定水印效果为显示一段 文字提示"Please enter password",而第二个则指定水印效果为一张图片:
运行后效果如下所示:
单击其中一个文本框:
控件之 ScrollViewer
ScrollViewer 控件使用非常简单,当其中显示的内容超过它自身的大小时,就会有滚动条出现.通过属性 HorizontalScrollBarVisibility 和 VerticalScrollBarVisibility 来控制纵向和横向滚动条是否出现:
运行上面的示例:
控件之 ToolTip
ToolTip 控件很多时候都用于其它控件的内嵌控件,如 Button 控件的 ToolTip 附加属性等.声明 ToolTi p 控件如下面的 XAML 所示,当鼠标放上按钮时显示一个简单的信息提示:
运行后鼠标放上按钮时效果:
结束语
本文简单的演示了 Silverlight 2 中的几个控件的使用,对于 DataGrid 和 ListBox 等控件一般用来显示 列表数据,将会在后面的数据绑定中讲述,而其它的诸如 Button,TextBlock 等控件的使用非常简单, 这里不再讲述.
一步一步学 Silverlight 2 系列(3):界面布局
概述
Silverlight 2 Beta 1 版本发布了,无论从 Runtime 还是 Tools 都给我们带来了很多的惊喜,如支持框 架语言 Visual Basic, Visual C#, IronRuby, Ironpython,对 JSON,Web Service,WCF 以及 S ockets 的支持等一系列新的特性.《一步一步学 Silverlight 2 系列》文章带您快速进入 Silverlight 2 开发. 本文为系列文章第三篇,学习 Silverlight 2 中的界面布局,Silverlight 2 中新增加了 Grid 和 Panel 两 个布局容器,使得界面布局更加的强大和灵活.
Canvas 面板
Canvas 是在 Silverlight 1.0 时代就有的一种基础布局面板, 它采用绝对坐标定位. 可以使用附加属性 (A ttached Property)对 Canvas 中的元素进行定位,通过附加属性我们指定控件相对于其直接父容器 Ca nvas 控件的上,下,左,右坐标的位置.如下面的 XAML 声明了两个矩形,它们分别相对于父容器 Can vas 的左边距是 50,相对于父容器 Canvas 的上边距分别是 50 和 150:
运行后界面的效果如下所示:
除了上面我们用到的 Canvas.Top 和 Canvas.Left 两个附加属性外,还有一个 Canvas.ZIndex 附加属 性.如果指定了两个控件相对于父容器 Canvas 同样的边距,则后面声明的控件父覆盖前面声明的控件. 这时我们可以使用 Canvas.ZIndex 属性来改变它们的显示顺序,如下面的 XAML 声明:
<Canvas Background="#46461F"> <Rectangle Fill="#0099FF" Width="160" Height="80" Canvas.Top="100" Canvas.Left="100"
>
<Rectangle Fill="#FF9900" Width="160" Height="80" Canvas.Top="100" Canvas.Left="100"/

资料,教程,编程,文集

> </Canvas>
指定两个矩形相对于父容器 Canvas 的边距相同,这时默认的后声明的橙色矩形会覆盖蓝色矩形:
指定 Canvas.ZIndex 为 1
<Canvas Background="#46461F"> <Rectangle Fill="#0099FF" Width="160" Height="80" Canvas.Top="100" Canvas.Left="100" Canvas.ZIndex="1"/>
<Rectangle Fill="#FF9900" Width="160" Height="80" Canvas.Top="100" Canvas.Left="100"/> </Canvas>
将会让蓝色矩形显示在上面,值最大的显示在最上面:
StackPanel
StackPanel 支持用行或列的方式来进行页面布局,默认情况下所有的子元素会垂直的排列显示,如下面 的 XAML 声明三个矩形:
<Rectangle Fill="#0099FF" Stroke="White" Width="100" Height="50" Margin="10"/> <Rectangle Fill="#0099FF" Stroke="White" Width="100" Height="50" Margin="10"/> <Rectangle Fill="#0099FF" Stroke="White" Width="100" Height="50" Margin="10"/>
运行后在界面显示效果如下:
当然我们也可以指定为水平排列,通过 Orientation 属性指定:
<Rectangle Fill="#0099FF" Stroke="White" Width="100" Height="50" Margin="10"/> <Rectangle Fill="#0099FF" Stroke="White" Width="100" Height="50" Margin="10"/> <Rectangle Fill="#0099FF" Stroke="White" Width="100" Height="50" Margin="10"/>
运行后界面显示效果如下:
在这里为了让各个控件之间有一定的距离,使用了 Margin 属性,该属性类似于 HTML 中的 Margin.
Grid
Grid 控件类似与 HTML 中的 Table,只不过子元素不用放在单元格中.通过<Grid.RowDefinitions> 和 <Grid.ColumnDefinitions>来定义 Grid 的行和列,使用 Grid.Row 和 Grid.Column 两个附加属性 指定子元素在 Grid 中显示的位置,这是一种非常灵活的布局方式.如下面的 XAML 声明:
<Grid x:Name="LayoutRoot" Background="#46461F" ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition Height="120"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="UserName:" VerticalAlignment="Cen ter" Foreground="White"></TextBlock> <TextBlock Grid.Row="1" Grid.Column="0" Text="Password:" VerticalAlignment="Cen ter" Foreground="White"></TextBlock> <TextBox Grid.Row="0" Grid.Column="1" Width="200" Height="30" HorizontalAlignme nt="Left"></TextBox> <TextBox Grid.Row="1" Grid.Column="1" Width="200" Height="30" HorizontalAlignme nt="Left"></TextBox> </Grid>
定义一个两行两列的 Grid,做一个简单的用户登录的布局,为了明显起见,把 ShowGridLi
nes 属性设为 True,以便能够显示出边框线.同时,我们指定了第一行的高度为 120,而第二行的则是剩余的高度,用 *来指定.运行后效果如下:
综合实例
分别了解了上面的三个布局控件,接下来我们看一个综合实例,如何完成如下的一个取色器:
首先我们添加一个两行两列的 Grid 控

资料,教程,编程,文集

件,分别指定行高和列宽:
<Grid x:Name="LayoutRoot" Background="White"> <Grid.ColumnDefinitions> <ColumnDefinition Width="260" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="120" /> <RowDefinition Height="120" /> </Grid.RowDefinitions> </Grid>
添加颜色显示区域,用一个矩形显示,放入 Grid 的第 0 行第 1 列:
<Rectangle Grid.Row="0" Grid.Column="1" x:Name="PreviewColor"
Fill="#FF6600" Margin="10" Stroke="#666666" StrokeThickness="2" />
再添加颜色值显示区,嵌套一个 StackPanel 控件,让它里面的子控件垂直显示:
<TextBlock FontSize="12">Color</TextBlock> <TextBox x:Name="HexColor" Width="160" Height="30" Text="#FF6600" Margin="10,5" FontSize="11"/>
左边用四个 Silder 控件和四个 TextBlock 控件显示,需要对 Grid 的行进行合并 Grid.RowSpan 属性:
<TextBlock Text="Alpha" FontSize="12" Margin="10,15,0,0"/> <TextBlock Text="Red" FontSize="12" Margin="10,15,0,0"/> <TextBlock Text="Green" FontSize="12" Margin="10,15,0,0"/> <TextBlock Text="Blue" FontSize="12" Margin="10,15,0,0"/>
这样我们就完成了上面这样相对复杂的界面布局,对 Slider 控件添加事件处理程序:
private void RedSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<d ouble> e) {
Color color = Color.FromArgb((byte)AlphaSlider.Value, (byte)RedSlider.Value, (b yte)GreenSlider.Value, (byte)BlueSlider.Value);
PreviewColor.Fill = new SolidColorBrush(color); HexColor.Text = color.ToString(); }
运行后,可以选取不同的颜色值:
结束语
关于界面布局就说到这里,在 Silverlight 2 中,通过上面的三种布局控件相结合,可以进行非常强大和 灵活的界面布局.
一步一步学 Silverlight 2 系列(4):鼠标事件处理
概述
Silverlight 2 Beta 1 版本发布了,无论从 Runtime 还是 Tools 都给我们带来了很多的惊喜,如支持框 架语言 Visual Basic, Visual C#, IronRuby, Ironpython,对 JSON,Web Service,WCF 以及 S ockets 的支持等一系列新的特性.《一步一步学 Silverlight 2 系列》文章带您快速进入 Silverlight 2 开发. 本文为系列文章第四篇,学习 Silverlight 2 中的鼠标事件处理,支持的鼠标事件包括 MouseMove ,M ouseEnter ,MouseLeave ,MouseLeftButtonDown,MouseLeftButtonUp.
声明事件
对于鼠标事件我们可以附加到任何 Silverlight 对象上面,如下面的 XAML 声明,为两个圆形添加上 Mou seEnter 和 MouseLeave 事件:
<Canvas Background="#46461F"> <Ellipse Width="120" Height="120" Fill="Orange" Canvas.Top="60" Canvas.Left="80" MouseEnter="OnMouseEnter" MouseLeave="OnMouseLeave"/>
<Ellipse Width="120" Height="120" Fill="Orange" Canvas.Top="60" Canvas.Left
="280" MouseEnter="OnMouseEnter" MouseLeave="OnMouseLeave"/> </Canvas>
编写事件处理程序,鼠标放上去时和鼠标移开时分别改变圆形的填充色:

资料,教程,编程,文集

void OnMouseEnter(object sender, MouseEventArgs e) {
Ellipse ell = sender as Ellipse; ell.Fill = new SolidColorBrush(Colors.Yellow); } void OnMouseLeave(object sender, MouseEventArgs e) { Ellipse ell = sender as Ellipse; ell.Fill = new SolidColorBrush(Colors.Green); }
运行后效果如下:
分别在两个圆形上放上鼠标并移开后如下所示:
使用代码管理事件
除了在 XAML 中声明事件外,也可以直接使用代码来注册事件,简单的修改一下上面的 XAML 文件,去掉 事件的声明并为两个圆形分别加上 Name:
<Canvas Background="#46461F"> <Ellipse x:Name="ellipse1" Width="120" Height="120" Fill="Orange" Canvas.Top="60" Canvas.Left="80"/>
<Ellipse x:Name="ellipse2" Width="120" Height="120" Fill="Orange" Canvas.Top="60" Canvas.Left="280"/> </Canvas>
在代码中进行事件注册:
public partial class Page : UserControl { public Page()
{ InitializeComponent(); ellipse1.MouseEnter += new MouseEventHandler(OnMouseEnter); ellipse1.MouseLeave += new MouseEventHandler(OnMouseLeave); ellipse2.MouseEnter += new MouseEventHandler(OnMouseEnter); ellipse2.MouseLeave += new MouseEventHandler(OnMouseLeave); }
void OnMouseEnter(object sender, MouseEventArgs e) { Ellipse ell = sender as Ellipse; ell.Fill = new SolidColorBrush(Colors.Yellow); } void OnMouseLeave(object sender, MouseEventArgs e) { Ellipse ell = sender as Ellipse; ell.Fill = new SolidColorBrush(Colors.Green); } }
运行后可以看到跟上面一样的效果:
事件数据
所有的鼠标事件都使用 MouseButtonEventArgs 和 MouseEventArgs 作为事件数据,通过这两个参数 可以获取相关事件数据,使用 GetPosition 方法或者 Source,Handled 属性.如下面的 XAML 声明:
<Canvas Background="#46461F"> <Rectangle Fill="Orange" Stroke="White" StrokeThickness="2" Canvas.Top="40" Canvas.Left="130" Width="240" Height="120" MouseMove="Rectangle_MouseMove"/> <TextBlock x:Name="Status" Foreground="White" Text="Status" Canvas.Left="100" Canvas.Top="200"/> </Canvas>
为矩形添加 MouseMove 事件处理,在鼠标移动时我们获取当前坐标位置,并显示出来:
private void Rectangle_MouseMove(object sender, MouseEventArgs e) {
Point p = e.GetPosition(e.Source as FrameworkElement); Status.Text = String.Format("坐标位置({0}:{1})",p.X,p.Y); }
运行后在矩形中移动鼠标,效果如下:
路由事件
在 Silverlight 中,提供了事件路由,使得我们可以在父节点上接收和处理来自于子节点的事件,Silverli ght 中的路由事件采用了冒泡路由策略.在鼠标事件中 MouseLeftButtonDown ,MouseLeftButtonU p ,MouseMove 三个事件都支持路由事件,而 MouseEnter,MouseLeave 两个事件不支持.下面的 X AML 中我们为 Canvas 对象声明了一个 MouseLeftButtonDown 事件:
<Canvas x
:Name="ParentCanvas" Background="#46461F" MouseLeftButtonDown="ParentCanvas_MouseLeftButtonDown"> <Rectangle

资料,教程,编程,文集

x:Name="RecA" Fill="Orange" Stroke="White" StrokeThickness="2" Canvas.Top="40" Canvas.Left="60" Width="160" Height="100"/>
<Rectangle x:Name="RecB" Fill="LightBlue" Stroke="White" StrokeThickness="2" Canvas.Top="40" Canvas.Left="240" Width="160" Height="100"/> <TextBlock x:Name="Status" Foreground="White" Text="Status" Canvas.Left="100" Canvas.Top="200"/> </Canvas>
添加 MouseLeftButtonDown 事件处理程序,显示当前鼠标按下时的坐标,并显示源控件名称:
private void ParentCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { String msg = "x:y = " + e.GetPosition(sender as FrameworkElement).ToString(); msg += " from " + (e.Source as FrameworkElement).Name; Status.Text = msg; }
运行后在 RecA 上按下鼠标:
在 Canvas 上按下鼠标:
结束语
本文简单介绍了 Silverlight 2 中关于鼠标事件处理的一些知识,包括事件注册,获取事件数据,路由事 件等.在下一篇中,我们将使用这些鼠标事件来实现一个简单的拖放功能.
一步一步学 Silverlight 2 系列(5):实现简单的拖放功能
概述
Silverlight 2 Beta 1 版本发布了,无论从 Runtime 还是 Tools 都给我们带来了很多的惊喜,如支持框 架语言 Visual Basic, Visual C#, IronRuby, Ironpython,对 JSON,Web Service,WCF 以及 S ockets 的支持等一系列新的特性.《一步一步学 Silverlight 2 系列》文章带您快速进入 Silverlight 2 开发.
本文为系列文章第五篇,利用前面讲过的鼠标事件处理实现简单的拖放功能.
准备 XAML
在实现拖放功能中,分为三个步骤: 1.按下鼠标,触发 MouseLeftButtonDown 事件,选择要拖动的对象. 2.移动鼠标,触发 MouseMove 事件,移动选择的对象. 3.放开鼠标,触发 MouseLeftButtonUp 事件,停止捕捉事件. 做一个简单的界面,用一个按钮来显示拖放,如下 XAML 声明:
<Canvas Background="#46461F">
<TextBlock Text="拖动我" VerticalAlignment="Center" Margin="10"></T extBlock> </Canvas>
这里为了界面显示效果,使用了控件模板,后续会专门讲到.
开始拖放操作
开始拖放操作,实现 MouseLeftButtonDown 事件处理程序,用两个全局变量来记录当前鼠标的位置和 鼠标是否保持移动.
bool trackingMouseMove = false; Point mousePosition;
void OnMouseDown(object sender, MouseButtonEventArgs e) { FrameworkElement element = sender as FrameworkElement; mousePosition = e.GetPosition(null); trackingMouseMove = true; if (null != element) { element.CaptureMouse(); element.Cursor = Cursors.Hand; } }
移动对象
移动对象,实现 MouseMove 事件处理程序,计算元素的位置并更新,同时更新鼠标的位置.
void OnMouseMove(object sender, MouseEventArgs e) { FrameworkElement element
= sender as FrameworkElement; if (trackingMouseMove) { double deltaV = e.GetPosition(null).Y - mousePosition.Y; double deltaH = e.GetPosition(nu

资料,教程,编程,文集

ll).X - mousePosition.X; double newTop = deltaV + (double)element.GetValue(Canvas.TopProperty); double newLeft = deltaH + (double)element.GetValue(Canvas.LeftProperty);
element.SetValue(Canvas.TopProperty, newTop); element.SetValue(Canvas.LeftProperty, newLeft);
mousePosition = e.GetPosition(null); } }
完成拖放操作
完成拖放操作,实现 MouseLeftButtonUp 事件处理程序.
void OnMouseUp(object sender, MouseButtonEventArgs e) { FrameworkElement element = sender as FrameworkElement; trackingMouseMove = false; element.ReleaseMouseCapture();
mousePosition.X = mousePosition.Y = 0; element.Cursor = null;
}
效果显示
最终,完成后的效果如下
拖动按钮
结束语
本文实现了一个简单的拖放功能(示例来自于 Silverlight 2 SDK),点击下载文本示例代码.
一步一步学 Silverlight 2 系列(6):键盘事件处理
概述
Silverlight 2 Beta 1 版本发布了,无论从 Runtime 还是 Tools 都给我们带来了很多的惊喜,如支持框 架语言 Visual Basic, Visual C#, IronRuby, Ironpython,对 JSON,Web Service,WCF 以及 S ockets 的支持等一系列新的特性.《一步一步学 Silverlight 2 系列》文章带您快速进入 Silverlight 2 开发. 本文为系列文章第六篇,介绍 Silverlight 中的键盘处理事件,在 Silverlight 2 中,支持 KeyDown 和 K eyUp 两个事件.
声明事件
所有的事件声明过程都是一样的,在 XAML 中或者是在代码中进行注册.
<Canvas x:Name="LayoutRoot" Background="#46461F"> <Ellipse x:Name="ellipse" Width="120" Height="120" Fill="Orange" Canvas.Top="50" Canvas.Left="160" Stroke="White" StrokeThickness="2" KeyUp="ellipse_KeyUp" KeyDown="ellipse_KeyDown"/> </Canvas>
或者在代码中注册:
public partial class Page : UserControl { public Page() { InitializeComponent(); this.ellipse.KeyUp += new KeyEventHandler(ellipse_KeyUp); this.ellipse.KeyDown += new KeyEventHandler(ellipse_KeyDown);
}
private void ellipse_KeyUp(object sender, KeyEventArgs e) {
}
private void ellipse_KeyDown(object sender, KeyEventArgs e) {
} }
使用事件参数 KeyEventArgs
使用事件参数可以获取到事件数据,可以使用的属性有 Key,PlatformKeyCode,Handled,Source.
private void ellipse_KeyUp(object sender, KeyEventArgs e) { if (e.Key == Key.R) { //…… } else if(e.Key == Key.Ctrl && e.Key == Key.U) { //…… } }
在事件数据中,Handled 有时候非常有用,可以用来判断事件是否已经处理.
键盘路由事件
键盘事件 KeyDown 和 KeyUp 都支持路由事件,如下面的示例.
<Canvas x:Name="LayoutRoot" Background="#46461F" KeyUp="LayoutRoot_KeyUp"> <TextBox x:Name="textbox" Width="200" Height="40" Canvas.Top="80" Canvas.Left="80"/> <TextBlock x:Name="Status" Foreground=
"White" Text="Status"
Canvas.Left="80" Canvas.Top="200"/> </Canvas>
为 Canvas 注册了一个 KeyUp 事件,编

资料,教程,编程,文集

写事件处理程序.
private void LayoutRoot_KeyDown(object sender, KeyEventArgs e) { if (e.Key != Key.Unknown) { String msg = "The key " + e.Key.ToString(); msg += " was pressed while focus was on " + (e.Source as FrameworkElement). Name; statusTextBlock.Text = msg; } }
运行程序,当文本框获得焦点并输入 t 时
按钮获得焦点
结束语
关于键盘事件都简单的介绍到这儿,希望对大家有用.
一步一步学 Silverlight 2 系列(7):全屏模式支持
概述
Silverlight 2 Beta 1 版本发布了,无论从 Runtime 还是 Tools 都给我们带来了很多的惊喜,如支持框 架语言 Visual Basic, Visual C#, IronRuby, Ironpython,对 JSON,Web Service,WCF 以及 S ockets 的支持等一系列新的特性.《一步一步学 Silverlight 2 系列》文章带您快速进入 Silverlight 2 开发. 本文为系列文章第七篇,介绍如何在 Silverlight 2 中使用全屏模式.
实现全屏模式
全屏模式有时候是非常有用的,在 Silverlight 中,提供了很好的支持.实现起来也非常的简单,其实只有 一行代码,编写一个简单的 XAML.
<Canvas Background="#46461F"> </Canvas>
引入命名空间
using System.Windows.Interop;
在按钮单击事件中添加实现代码.
private void toggleButton_Click(object sender, RoutedEventArgs e) { Content contentObject = Application.Current.Host.Content; contentObject.IsFullScreen = !contentObject.IsFullScreen;
}
获取当前的 Silverlight 插件"Content"对象,并设置 IsFullScreen 属性.运行后单击按钮将会变为全屏 模式,再次单击按钮(或者按 Esc 键)返回普通模式.
捕获相关事件
有时候,我们需要在全屏模式和普通模式之间切换时,添加一个其它的代码,这时可以使用事件 FullScre enChanged.
public Page() { InitializeComponent(); Application.Current.Host.Content.FullScreenChanged += new EventHandler(Content_ FullScreenChanged); }
实现事件处理
private void Content_FullScreenChanged(object sender, EventArgs e) {
Content contentObject = Application.Current.Host.Content; if (contentObject.IsFullScreen) { toggleButton.Background = new SolidColorBrush(Colors.Green); toggleButton.Content = "Full Screen Mode"; } else { toggleButton.Background = new SolidColorBrush(Colors.Red); toggleButton.Content = "Normal Mode"; } }
在普通模式和全屏模式之间切换时,改变按钮的背景色和文字.运行后点击按钮:
切换为普通模式:
完整的代码如下:
public partial class Page : UserControl { public Page() { InitializeComponent(); Application.Current.Host.Content.FullScreenChanged += new EventHandler(Cont ent_FullScreenChanged); }
private void toggleButton_Click(object sender, RoutedEventArgs e) { Content co
ntentObject = Application.Current.Host.Content; contentObject.IsFullScreen = !contentObject.IsFullScreen; }
private void Content_FullScreenChan

资料,教程,编程,文集

ged(object sender, EventArgs e) { Content contentObject = Application.Current.Host.Content; if (contentObject.IsFullScreen) { toggleButton.Background = new SolidColorBrush(Colors.Green); toggleButton.Content = "Full Screen Mode"; } else { toggleButton.Background = new SolidColorBrush(Colors.Red); toggleButton.Content = "Normal Mode"; } } }
结束语
本文简单介绍了 Silverlight 2 中对于全屏模式的支持,你可以从这里下载本文示例代码.
一步一步学 Silverlight 2 系列(8):使用样式封装控件观感
概述
Silverlight 2 Beta 1 版本发布了,无论从 Runtime 还是 Tools 都给我们带来了很多的惊喜,如支持框 架语言 Visual Basic, Visual C#, IronRuby, Ironpython,对 JSON,Web Service,WCF 以及 S ockets 的支持等一系列新的特性.《一步一步学 Silverlight 2 系列》文章带您快速进入 Silverlight 2 开发. 本文为系列文章第八篇,主要介绍在 Silverlight 中使用 Style 元素封装控件观感 Silverlight 支持一种 Style 机制,它允许我们把控件的属性值封装成可重用的资源.我们可以把这些样 式声明保存在独立于页面的其他文件中,然后就可以在一个应用程序中跨控件和页面重用(甚至跨多个应 用程序重用).在做一些基本定制的场景下,概念上类似于在 HTML 中重用 CSS.
内联样式
内联样式这个概念其实跟我们在 HTML 中指定元素的样式一样, XAML 中通过属性来设置, 在 如下面这段 XAML,我们添加了两个按钮,并在其中设置字体的样式:
<Canvas Background="#46461F">
</Canvas>
运行后显示效果如下:
使用内联样式不是一种很好的做法,样式不可重用,页面 XAML 代码混乱等,这些缺点其实类似于在 HT ML 中直接设置元素的样式.一种推荐的方式是应该使用全局的样式.
全局样式
为了更好使样式能够重用,并且减少 XAML 中的代码,推荐使用全局样式.在 App.xaml 中定义两个样式
通过 Style 元素指定, 需要设置唯一的一个 Key, 类似于 CSS 中的类名或者 2.0 中 Skin 功能, 并且通过 TargetType 指定该样式将使用在哪类控件上,每一个属性都用 Setter 来指定.在 XAML 中, 通过 StaticResource 标记句法来指定具体的样式:
<Canvas Background="#46461F">
</Canvas>
相比较上面的 XAML 文件,现在代码已经干净多了,这使得我们可以只专注于应用程序的业务,而无需考 虑它的外观(在 Beta1 中似乎有些属性设置后会报错).运行后效果如下:
样式重写
定义了全局样式之后,样式能够被重写,即内联样式的优先级高于全局样式.如上面的示例
中,我们在 X AML 中通过属性 Foreground 指定第一个按钮的前景色为蓝色:
<Canvas Background="#46461F">
</Canvas>
尽管我们在全局样式中指定第一个按钮的前景色为绿色,通过内联样式重写

资料,教程,编程,文集

后,它显示为蓝色:
结束语
本文简单的介绍了 Silverlight 2 中使用样式来封装控件观感, 对任何控件都可以使用全局样式进行封装.
一步一步学 Silverlight 2 系列(9):使用控件模板
概述
Silverlight 2 Beta 1 版本发布了,无论从 Runtime 还是 Tools 都给我们带来了很多的惊喜,如支持框 架语言 Visual Basic, Visual C#, IronRuby, Ironpython,对 JSON,Web Service,WCF 以及 S ockets 的支持等一系列新的特性.《一步一步学 Silverlight 2 系列》文章带您快速进入 Silverlight 2 开发. 本文为系列文章第九篇, 主要介绍如何使用控件模板定制控件的观感. Silverlight 提供了极其强大的功能, 允许用户完全定制控件的外观.
定制控件内容
在 Silverlight 中,WatermarkedTextBox 控件可以为用户的输入提供一段提示信息,如果只是简单的 一点文字信息,有时候未免显得单调,如果加上相应的图片说明效果会更好,如下图所示的一个简单的用 户登录界面:
这样看起来界面显的就生动多了,XAML 声明如下:
<Canvas Background="#46461F"> <WatermarkedTextBox x:Name="UserName" Canvas.Top="30" Canvas.Left="50" Width="320" Height="48"> <WatermarkedTextBox.Watermark> <TextBlock Text="请输入用户名" VerticalAlignment="Center" Foregroun d="#999999"/> </WatermarkedTextBox.Watermark> </WatermarkedTextBox>
<WatermarkedTextBox x:Name="Password" Canvas.Top="110" Canvas.Left="50" Width="320" Height="48" HorizontalAlignment="Left"> <WatermarkedTextBox.Watermark> <TextBlock Text="请输入密码" VerticalAlignment="Center" Foreground= "#999999"/> </WatermarkedTextBox.Watermark> </WatermarkedTextBox>
<TextBlock Text="登 录" VerticalAlignment="Center" Margin="10 0 0 0 "></TextBlock> </Canvas>
很多控件都有 Content 或者 Text 属性,我们完全可以充分发挥自己的想象力去进行定制,定制后控件仍 然具有原来的功能行为,如上面的示例,当输入用户名控件获得焦点时文字和图片都将消失:
使用控件模板定制控件
前面的示例中我们只是定制了控件的内容,Silverlight 允许我们完全对控件进行定制,而不仅仅是内容. 下面的示例中我们定制一个渐变色的圆角矩形按钮.首先我们在 App.xaml 中创建一个 RoundButton 样 式,改写按钮的 Template 属性:
其中的渐变等内容在 Graphics 相关内容里将会写到.现在在 XAML 中使用该样式:
<Canvas Background="#46461F">
</Canvas>
运行后就可以看到下面的效果:
创建模板
上面的示例中,控件的文字以及控件的大小都
是固定的,我们希望在开发人员使用中再设定,可以在控件 模板中通过使用 {TemplateBinding ControlProperty} 的标识扩展句法来绑定到控件的属性来实现, 使用 ContentPresenter 控件可以灵活的设置各个属性.修改 RoundButton 样式如下所

资料,教程,编程,文集

示:
这样在使用 RoundButton 时我们可以设定控件的文本及控件的大小:
<Canvas Background="#46461F">
</Canvas>
运行时效果如下:
结束语
本文简单的介绍了如何定制控件的内容以及通过控件模板完全定制控件, 你可以从这里下载本文示例代码.
一步一步学 Silverlight 2 系列(10):使用用户控件
概述
Silverlight 2 Beta 1 版本发布了,无论从 Runtime 还是 Tools 都给我们带来了很多的惊喜,如支持框 架语言 Visual Basic, Visual C#, IronRuby, Ironpython,对 JSON,Web Service,WCF 以及 S ockets 的支持等一系列新的特性.《一步一步学 Silverlight 2 系列》文章带您快速进入 Silverlight 2 开发. 本文为系列文章第 10 篇,主要介绍 Silverlight 2 中的用户控件使用.
创建用户控件
在 Silverlight 2 中,我们可以根据开发自定义控件或者创建用户控件,以达到控件重用的目的,添加一 个新的用户控件:
编写用户控件实现代码:
<Grid x:Name="LayoutRoot" Background="White">
<Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.7" Fill="#FF8A8A8A"/> </Grid>
在需要使用该用户控件的页面 XAML 中注册本文由y542809060贡献
doc文档可能在WAP端浏览体验不佳。建议您优先选择TXT，或下载源文件到本机查看。
Silverlight 入门教程
--基于 运行环境示例
(一).概述…… 3 (二). 代码示例…… 3 1).基础知识示例…… 3 1. 对象的定位…… 3 2. 使用 SilverLight 插件 …… 8 3. SilverLight 元素的鼠标事件 …… 10 4. SilverLight 元素的键盘事件 …… 16 5. 方法 createFromXaml 使用示例 …… 17 6. 访问和修改 Silverlight 元素以及属性 …… 19 7. Silverlight 中的字体使用 …… 21 8. 全屏支持功能 …… 24 9. Silverlight Downloader 对象使用 …… 26 10.定时器功能…… 29 11.错误处理支持 …… 31 12.把 xaml 段内置在 aspx 或 html 页面中 …… 34 2).制作图形示例…… 36 13.基本图形形状示例 …… 36 14.画刷对象的使用 …… 38 15.视频刷对象的使用 …… 41 16.Path 元素使用 …… 43 17.变换效果(Transform) …… 44 3).多媒体功能…… 46 18.在线电影播放 …… 46 4).制作动画效果示例 …… 51 19.一个动画示例 …… 51 20.动画的交互控制 …… 53 21.动画关键帧示例 …… 55
(一).概述
Silverlight 是一个跨浏览器的、跨操作系统平台的插件，为 Web 带来下一代媒体体验和丰 富的交
互式应用程序体验. 使用 JS 实现 Ajax 技术可以使网站具有很好的用户体验, 但它也 会使网站过于庞大和臃肿. 业余时间学习了一下微软的 Silverlight 官方教程, 在学习时顺 便根据学习示例整理了一个教程. 此教程包括一些精简的小例子, 主要针对开发使用场景 展开示例,

资料,教程,编程,文集

在实际开发中也可以作为查找手册使用. 运行环境为 VS 2005, 这些示例比较简 单很容易看懂, 因此示例没有太多注释.
(二). 代码示例
1).基础知识示例 1. 对象的定位 通过呈现几个 Silverlight 元素来示例对象之间的定位, 以及在一个页面中创建 装载多个 Silverlight 对象. I. 页面代码(Default.aspx)
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="/client/2007" xmlns:x="/winfx/2006/xaml" Width="640" Height="480" Background="LightGreen" Canvas.Left="10" Canvas.Top="10" > <Rectangle Canvas.Left="30" Canvas.Top="30" Fill="LightBlue" Width="200" Height="200" /> </Canvas>
2. Page2.xaml 代码
<Canvas xmlns="/client/2007" xmlns:x="/winfx/2006/xaml" Width="300" Height="300" Background="White">
<Canvas Width="250" Height="250" Canvas.Left="30" Canvas.Top="30" Background="LightBlue"> <Rectangle Canvas.Left="30" Canvas.Top="30" Fill="LightGreen" Width="200" Height="200" /> </Canvas> </Canvas>
3. Page3.xaml 代码
<Canvas xmlns=&q
uot;/client/2007" xmlns:x="/winfx/2006/xaml" Width="300" Height="300

资料,教程,编程,文集

" Background="White">
</Canvas>
4. Page4.xaml 代码
<Canvas xmlns="/client/2007" xmlns:x="/winfx/2006/xaml" Width="200" Height="200"> <Rectangle Canvas.Left="100" Canvas.Top="100" Width="50" Height="50" Fill="RoyalBlue"> <Rectangle.RenderTransform> <RotateTransform Angle="45" /> </Rectangle.RenderTransform> </Rectangle>
</Canvas>
5. Page5.xaml 代码
<Canvas xmlns="/client/2007" xmlns:x="/winfx/2006/xaml"> <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>
2. 使用 SilverLight 插件 I. 页面代码(Default.aspx)
II.Xaml 文件代码
<Canvas Name="parentCanvas" Opacity="0" xmlns="/client/2007" xmlns:x="/winfx/2006/xaml" Loaded="onLoaded" MouseLeftButtonDown="MouseLeftButtonDown" > <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <EventTrigger.Actions> <DoubleAnimation Storyboard.TargetName="parentCanvas" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:5"/> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers> <TextBlock Name="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()); }
3. SilverLight 元素的鼠标事件 I.鼠标滑入和滑出事件 I. 页面代码(Default.aspx)
II.Xaml 文件代码
<Canvas xmlns="/
client/2007" xmlns:x="/winfx/2006/xaml" Loaded="onLoaded"> <Ellipse MouseEnter="onMou

资料,教程,编程,文集

seEnter" 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" /> <TextBlock Name="Status" Canvas.Top="120" /> <TextBlock Name="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)
II.Xaml 文件代码
<Canvas xmlns="/client/2007" xmlns:x="/winfx/2006/xaml" 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> <RotateTransform Angle="45" /> </Canvas.RenderTransform> <Rectangle Height="100" Width="100" Fill="Coral" Stroke="Black" StrokeThickness="4" /> </Canvas> </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.get

资料,教程,编程,文集

Position(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();
}
4. SilverLight 元素的键盘事件 I. 页面代码(Default.aspx)
II.Xaml 文件代码
<Canvas Name="parentCanvas" xmlns="/client/2007" xmlns:x="/winfx/2006/xaml" KeyDown="onKeyDown" > <TextBlock Name="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 = " msg += " msg += " msg += " msg += " Press Shift = " + keyEventArgs.shift; Press Ctrl = " + keyEventArgs.ctrl; Key = " + keyEventArgs.key; PlatformKeyCode = " + keyEventArgs.PlatformKeyCode; The Platform is windows = " + (erAgent.indexOf("Windows") != -1);
alert(msg); }
5. 方法 createFromXaml 使用示例 I. 页面代码(Default.aspx)
II.Xaml 文件代码
<Canvas Name="parentCanvas" xmlns="/client/2007" xmlns:x="/winfx/2006/xaml" MouseLeftButtonDown="onMouseLeftButtonDown" Width="100" Height="100" Background="LightBlue" > </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 onMouseLeftButtonDown(sender, eventArgs) { var plugin = sender.getHost(); var xamlFragment = '<TextBlock Canvas.Top="0" Text="I was created by createFromXaml method!" />'; textBlock = plugin.content.createFromXaml(xamlFragment); var xam
lFragment2 = '<Ellipse Canvas.ZIndex="1" Canvas.Left="95" Canvas.Top="95"
Height="200" Width="2

资料,教程,编程,文集

00" Stroke="Black" StrokeThickness="10" Fill="Lime" />'; ellipse = plugin.content.createFromXaml(xamlFragment2); ellipse.fill = createLinearGradientBrush(plugin); sender.children.add(textBlock); sender.children.add(ellipse); } function createLinearGradientBrush(plugin) { var xamlFragment = '
'; xamlFragment += xamlFragment += xamlFragment += '<GradientStop Color="Yellow" Offset="0.0" />'; '<GradientStop Color="Orange" Offset="0.5" />'; '<GradientStop Color="Red" Offset="1.0" />';
xamlFragment += ''; return plugin.content.createFromXaml(xamlFragment); }
6. 访问和修改 Silverlight 元素以及属性 I. 页面代码(Default.aspx)
II.Xaml 文件代码
<Canvas Name="parentCanvas" xmlns="/client/2007"
xmlns:x="/winfx/2006/xaml" Loaded="onLoaded" > <TextBlock Name="TextBlock1" Foreground="Black" Cursor="Hand" /> <TextBlock Name="TextBlock2" Foreground="Black" Cursor="Hand" Canvas.Top="20" /> <TextBlock Name="TextBlock3" Foreground="Black" Cursor="Hand" Canvas.Top="40" /> </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 onLoaded(sender, eventArgs) { //findName Method sender.findName("TextBlock1").text = "King1"; //getItem Method sender.children.getItem(1).text = "King2"; //getValue 和setValue 方法 var textBlock3 = sender.findName("TextBlock3"); textBlock3.text = "King3"; var text = textBlock3.getValue("text"); textBlock3.setValue("text", text); //Extend Property
textBlock3["Canvas.Top"] = 40; //自己修改一下该值 }
7. Silverlight 中的字体使用 I. 页面代码(Default.aspx)
II.Xaml 文件代码
<Canvas Name="parentCanvas" xmlns="/client/2007" xmlns:x="/winfx/2006/xaml" Loaded="onLoaded" > <TextBlock Text="Font Attributes" FontFamily="Verdana" FontSize="36" FontStretch="UltraExpanded" FontStyle="Italic" FontWeight="ExtraBlack" />
<TextBlock Canvas.Top="60" FontFamily="Arial" Width="400" Text="Sample text formatting runs">
<Run Foreground="Maroon" FontFamily="Courier New" FontSize="24">Courier New 24</Run>
<Run Foreground="Teal" FontFamily="Times New Roman" FontSize="18" FontStyle="Italic">Times New Roman Italic 18</Run>
<Run Foreground="SteelBlue" FontFamily="Verdana" FontSize="14" FontWeight="Bold">Verdana Bold 14</Run> </TextBlock> <TextBlock Canvas.Top="150" FontFamily="Arial" FontSize="32" FontWeight="Bold" Foreground="Navy"> Navy <Run Text="DodgerBlue " Foreground="DodgerBlue"/> <Run Text="LightSteelBlue &
quot; Foreground="LightSteelBlue"/> </TextBlock>
<TextBlock Canvas.Top="200" FontFamily="Verdana" Fon

资料,教程,编程,文集

tSize="32" FontWeight="Bold"> LINEAR GRADIENT BRUSH <TextBlock.Foreground>
<GradientStop Color="Red" Offset="0.0" /> <GradientStop Color="Orange" Offset="0.2" /> <GradientStop Color="Yellow" Offset="0.4" /> <GradientStop Color="Green" Offset="0.6" /> <GradientStop Color="Blue" Offset="0.8" /> <GradientStop Color="Violet" Offset="1.0" /> </TextBlock.Foreground> <TextBlock.RenderTransform> </TextBlock.RenderTransform> </TextBlock>
<TextBlock Text="Rotated Text" FontSize="32" Foreground="Teal" Canvas.Top="300"> <TextBlock.RenderTransform> <RotateTransform Angle="90" /> </TextBlock.RenderTransform> </TextBlock>
<TextBlock Canvas.Top="400" FontSize="32" FontWeight="Bold" Foreground="Maroon" Text="Skewed Text"> <TextBlock.RenderTransform> </TextBlock.RenderTransform> </TextBlock> <TextBlock Canvas.Top="450"
FontSize="32" FontWeight="Bold" Foreground="Maroon" Text="Skewed Text"> <TextBlock.RenderTransform> </TextBlock.RenderTransform> </TextBlock>
</Canvas>
III.页面对应的 JS 文件代码(Default.aspx.js)
function createSilverlight() { Silverlight.createObjectEx({ source: "Page.xaml", parentElement: document.getElementById("SilverlightControlHost"), id: "SilverlightControl", properties: { width: "350", height: "1000",
version: "1.0", background: "white", isWindowless: "true", enableHtmlAccess: "true" }, events: {} }); } function onLoaded(sender, eventArgs) { }
8. 全屏支持功能 I. 页面代码(Default.aspx)
html xmlns="/1999/xhtml" >
II.Xaml 文件代码
<Canvas xmlns="/client/2007" xmlns:x="/winfx/2006/xaml" Width="300" Height="300" Loaded="onLoaded"> <MediaElement Name="media" Source="/mymtv123/许志安_光辉岁月.wmv"
Width="300" Height="300" MouseLeftButtonUp="onMouseLeftButtonUp" </Canvas>
/>
III.页面对应的 JS 文件代码(Default.aspx.js)
function createSilverlight() { Silverlight.createObjectEx({ source: "Page.xaml", parentElement: document.getElementById("SilverlightControlHost"), id: "SilverlightControl", properties: { width: "350", height: "500", version: "1.0", background: "white", isWindowless: "true", enableHtmlAccess: "true" }, events: {} }); } //双击事件 function onMouseLeftButtonUp(sender, mouseEventArgs) { //plugin.content.fullScreen = !plugin.content.fullScreen; var b=(new Date).getTime(),c=this._timeLastLeftButtonUp; this._timeLastLeftButtonUp=b; var a=c&&b-c<300; if(a) { //处理双击事件 this._timeLastLeftButtonUp=0; var plugin=sender.getHost(); plugin.content.fullScreen = !plugin.content.fullScreen; } else { //处理单击事件
} } var media; function onLoaded(sender, mouseEventArgs) { media = sender.findName("media"); //处理FullScreenChangeded事件 plugin = sender.getHost(); plugin
.content.onFullScreenChange = onFullScreenChanged; updateLayout(plugin.content.actualWidth, plugin.content.actualHeight); } function onFullScree

资料,教程,编程,文集

nChanged(sender, eventArgs) { updateLayout(plugin.content.actualWidth, plugin.content.actualHeight); } function updateLayout(width, height) { media.width=width; media.height=height; }
9. Silverlight Downloader 对象使用 I. 页面代码(Default.aspx)
II.Xaml 文件代码
<Canvas Name="parentCanvas" xmlns="/client/2007" xmlns:x="/winfx/2006/xaml" Loaded="onLoaded" > <Canvas MouseLeftButtonDown="onMouseLeftButtonDown" Canvas.Left="10"> <Rectangle Stroke="Black" Height="30" Width="250" RadiusX="5" RadiusY="5"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Orange" Offset="0.0" /> <GradientStop Color="Red" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="10" Canvas.Top="5">Click me to download a picture!</TextBlock> </Canvas> <Canvas Canvas.Top="70"> <Rectangle Name="progressRectangle" Canvas.Left="20" Height="10" Width="0" Fill="Maroon" /> <Rectangle Canvas.Top ="-1" Canvas.Left="19" Height="12" Width="202" StrokeThickness="1" Stroke="Black" /> <TextBlock Name="progressText" Canvas.Top ="-4" Canvas.Left="230" Text="0%" FontSize="12" /> </Canvas> <TextBlock Canvas.Top="100" Width="100" Height="100" FontSize="72">
King,King,King
<TextBlock.Foreground> </TextBlock.Foreground> </TextBlock> </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 onLoaded(sender, eventArgs) { progressText = sender.findName("progressText"); progressRectangle = sender.findName("progressRectangle"); imageBrush = sender.findName("imageBrush"); } function onMouseLeftButtonDown(sender, eventArgs) { var slPlugin = sender.getHost(); var downloader = slPlugin.createObject("downloader"); downloader.addEventListener("downloadProgressChanged", onDownloadProgressChanged); downloader.addEventListener("completed", onCompleted); downloader.open("GET", "Silverlight_Multimedea.JPG"); downloader.send(); }
function onDownloadProgressChanged(sender, eventArgs) { var percentage = Math.floor(sender.downloadProgress * 100); progressText.text = percentage + "%"; progressRectangle.width = percentage * 2; } function onCompleted(sender, eventArgs) { //var xamlFragment = sender.ResponseText; //var button = plugin.content.createFromXaml(xamlFragment); var plugin = sender.getHost(); var imageBrush = sender.findName("imageBrush"); imageBrush.setSource(sender,""); }
10.定时器功能 I. 页面代码(Default.aspx)
II.Xaml 文件代码
<Canvas xmlns="http
://doc.guandang.net/client/2007" xmlns:x="/winfx/2006/xaml"> <Canvas.Resources> </Canvas.Res

资料,教程,编程,文集

ources> <Rectangle Name="MyAnimatedRectangle" Width="100" Height="100" Fill="Blue" Loaded="StartTimer"> <Rectangle.Triggers> <EventTrigger RoutedEvent="Rectangle.Loaded"> <DoubleAnimation Storyboard.TargetName="MyAnimatedRectangle" Storyboard.TargetProperty="Opacity" From="1.0" To="0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" /> </EventTrigger> </Rectangle.Triggers> </Rectangle> <TextBlock Canvas.Top="110" Name="myTextBlock" ></TextBlock> </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 onLoaded(sender, eventArgs) { } function StartTimer(sender, mouseEventArgs) { var timer = sender.findName("timerStoryboard"); timer.begin(); } function StoryboardFinished(sender, mouseEventArgs) { var rect = sender.findName("MyAnimatedRectangle"); var txtBlock = sender.findName("myTextBlock"); txtBlock.text = String(rect.opacity); var timer = sender.findName("timerStoryboard"); timer.begin(); }
11.错误处理支持 I. 页面代码(Default.aspx)
II.Xaml 文件代码
<Canvas Name="parentCanvas" xmlns="/client/2007" xmlns:x="/winfx/2006/xaml" Loaded="onLoaded"> <Ellipse MouseLeftButtonDown="onMouseDownEventHandler" Height="200" Width="200" Fill="Teal" Name="Ellispse1" /> <MediaElement Name="media" Width="300" Height="300" MediaFailed="MediaFailedHandler" /> </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: {onError:onErrorandler} });
}
function onMouseDownEventHandler(sender, moseEventArgs) { var player = sender.findName("media"); //方式 //player.play(); //return; //方式 try { player.play(); } catch(e) { alert(e.message); } } //方式 //注意: events:{onError:onErrorandler} 中onError:null时将执行此代码 function MediaFailedHandler(sender, args) { var errorMsg = "\n Media Error Message \n" ; errorMsg += "MediaElement Name: " + + "\n"; errorMsg += "Media File Name: " + sender.Source + "\n"; alert(errorMsg); }
//events:{onError:onErrorandler} function onErrorandler(sender, errorArgs) { var errorMsg = "Silverlight Error: \n\n"; errorMsg += "Error Type: errorMsg += "Error Code: switch(errorArgs.errorType) " + errorArgs.errorType + "\n"; " + errorArgs.e
rrorCode + "\n";
errorMsg += "Error Message: " + errorArgs.errorMessage + "\n";
{ case "RuntimeError":

资料,教程,编程,文集

if (errorArgs.lineNumber != 0) { errorMsg += "Line: " + errorArgs.lineNumber + "\n"; errorMsg += "Position: " + errorArgs.charPosition + "\n"; } errorMsg += "MethodName: " + errorArgs.methodName + "\n"; break; case "ParserError": errorMsg += "Xaml File: errorMsg += "Xml Element: errorMsg += "Xml Attribute: errorMsg += "Line: errorMsg += "Position: break; default: break; } alert(errorMsg); } " + errorArgs.xamlFile " + errorArgs.xmlElement " + errorArgs.lineNumber + "\n"; + "\n"; + "\n";
" + errorArgs.xmlAttribute + "\n"; " + errorArgs.charPosition + "\n";
12.把 xaml 段内置在 aspx 或 html 页面中
这样的话就不用单独的 *.xaml 文件来承载 SilverLight 对象控件元素内容.
I. 页面代码(Default.aspx)
II.Xaml 文件代码 文件省略, 其内容集成到 Default.aspx 页面中了. III.页面对应的 JS 文件代码(Default.aspx.js)
function createSilverlight() { Silverlight.createObjectEx({ source: '#xamlContent', parentElement: document.getElementById("SilverlightControlHost"), id: "SilverlightControl", properties: { width: "350", height: "350", version: "1.0", background: "white", isWindowless: "true", enableHtmlAccess: "true" }, events: {} }); } function setDate(sender, eventArgs) {
sender.text = Date(); }
2).制作图形示例 13.基本图形形状示例 I. 页面代码(Default.aspx)
II.Xaml 文件代码
<Canvas Name="parentCanvas" xmlns="/client/2007" xmlns:x="/winfx/2006/xaml" Loaded="onLoaded" >
X2="50" Y2="50" Stroke="Black" StrokeThickness="4" />
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> <RadialGradientBrush.GradientStops> <GradientStop Color="Red" Offset="0" /> <GradientStop Color="Blue" Offset="0.25" /> </RadialGradientBrush.GradientStops> </RadialGradientBrush>
<Ellipse Fill="Yellow" Height="100" Width="200" StrokeThickness="2" Stroke="Black" Canvas.Top="100"/>
<RotateTransform CenterX="0" CenterY="0" Angle="45" /> </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 onLoaded(sender, eventArgs) { }
14.画刷对象的使用 I. 页面代码(Default.aspx)
II.Xaml 文件代码
<Canvas Name="parentCanvas" xmlns="/client/2007" xmlns:x="/winfx/2006/xaml" Loaded="onLoaded" > <Rectangle Width="100" Height="100" Fill="Red" /> <Rectangle Width="100" Height="100" Fill="#FFFF0000" Canvas.Top="110" /> <Rectangle Width="100" Height="100&q
uot; Canvas.Top="220" > <Rectangle.Fill> </Rectangle.Fill> </Rectangle> <Rectangle Width="100" Heig

本文来源：https://www.bwwdw.com/article/c23j.html