Silverlight入门教程


一步一步学 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):数据与通信之 ADO.NET 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 应用不能够独立运行,之后弹出的对话框中可供我们选择创建一个 ASP.NET Web Site 或者 Web Application Project 用来托管 Silverlight 应用程序。 这里我们选择创建一个 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 的边距相同,这时默认的后声明的橙色矩形会覆盖蓝色矩形: 指定 Canvas.ZIndex 为 1 将会让蓝色矩形显示在上面,值最大的显示在最上面: StackPanel StackPanel 支持用行或列的方式来进行页面布局,默认情况下所有的子元素会垂直的排列显示,如下面 的 XAML 声明三个矩形: 运行后在界面显示效果如下: 当然我们也可以指定为水平排列,通过 Orientation 属性指定: 运行后界面显示效果如下: 在这里为了让各个控件之间有一定的距离,使用了 Margin 属性,该属性类似于 HTML 中的 Margin。 Grid Grid 控件类似与 HTML 中的 Table,只不过子元素不用放在单元格中。通过来定义 Grid 的行和列,使用 Grid.Row 和 Grid.Column 两个附加属性 指定子元素在 Grid 中显示的位置,这是一种非常灵活的布局方式。如下面的 XAML 声明: 定义一个两行两列的 Grid,做一个简单的用户登录的布局,为了明显起见,把 ShowGridLines 属性设为 True,以便能够显示出边框线。同时,我们指定了第一行的高度为 120,而第二行的则是剩余的高度,用 *来指定。运行后效果如下: 综合实例 分别了解了上面的三个布局控件,接下来我们看一个综合实例,如何完成如下的一个取色器: 首先我们添加一个两行两列的 Grid 控件,分别指定行高和列宽: 添加颜色显示区域,用一个矩形显示,放入 Grid 的第 0 行第 1 列: 再添加颜色值显示区,嵌套一个 StackPanel 控件,让它里面的子控件垂直显示: Color 左边用四个 Silder 控件和四个 TextBlock 控件显示,需要对 Grid 的行进行合并 Grid.RowSpan 属性: 这样我们就完成了上面这样相对复杂的界面布局,对 Slider 控件添加事件处理程序: private void RedSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs 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 事件: 编写事件处理程序,鼠标放上去时和鼠标移开时分别改变圆形的填充色: 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: 在代码中进行事件注册: 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 声明: 为矩形添加 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 事件: 添加 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 声明: 这里为了界面显示效果,使用了控件模板,后续会专门讲到。 开始拖放操作 开始拖放操作,实现 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(null).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 中或者是在代码中进行注册。 或者在代码中注册: 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 都支持路由事件,如下面的示例。 很多控件都有 Content 或者 Text 属性,我们完全可以充分发挥自己的想象力去进行定制,定制后控件仍 然具有原来的功能行为,如上面的示例,当输入用户名控件获得焦点时文字和图片都将消失: 使用控件模板定制控件 前面的示例中我们只是定制了控件的内容,Silverlight 允许我们完全对控件进行定制,而不仅仅是内容。 下面的示例中我们定制一个渐变色的圆角矩形按钮。首先我们在 App.xaml 中创建一个 RoundButton 样 式,改写按钮的 Template 属性: 其中的渐变等内容在 Graphics 相关内容里将会写到。现在在 XAML 中使用该样式: