一步一步学习Silverlight.docx
- 文档编号:30094482
- 上传时间:2023-08-04
- 格式:DOCX
- 页数:72
- 大小:697.24KB
一步一步学习Silverlight.docx
《一步一步学习Silverlight.docx》由会员分享,可在线阅读,更多相关《一步一步学习Silverlight.docx(72页珍藏版)》请在冰豆网上搜索。
一步一步学习Silverlight
一步一步学习HYPERLINK"
———基础知识篇
概述:
由TerryLee编写的《Silverlight2完美征程》一书,已经上市,在该系列文章的基础上补充了大量的内容,敬请关注。
官方网站:
Silverlight2Beta1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言VisualBasic,VisualC#,IronRuby,Ironpython,对JSON、WebService、WCF以及Sockets的支持等一系列新的特性。
《一步一步学Silverlight2系列》文章将从Silverlight2基础知识、数据与通信、自定义控件、动画、图形图像等几个方面带您快速进入Silverlight2开发。
∙创建一个基本的Silverlight应用
本文为系列第一篇创建一个基本的Silverlight2应用,不能免俗,从最简单的HelloWord开始。
建立项目
安装完Silverlight2Beta1之后打开VS2008,打开新建项目对话框,可以看到SilverlightApplication项目模板。
Silverlight应用不能够独立运行,之后弹出的对话框中可供我们选择创建一个ASP.NETWebSite或者WebApplicationProject用来托管Silverlight应用程序。
这里我们选择创建一个WebApplicationProject,创建完成后的项目结构如下所示:
理解.xap文件
在建立一个Silverlight应用程序后,我们什么都不做,直接编译一下整个解决方案,可以看到在资源管理器中多出了一个ClientBin的文件夹,并在下面添加了一个TerryLee.SilverlightDemo2.xap的文件。
该文件是一个标准的.NET程序集,在编译的时候所有的XAML标识和资源文件如图片等都会包含在里面,采用了标准的Zip压缩算法,以减少客户端下载的文件体积。
拷贝一份该文件,并且修改后缀名.xap为.zip,并且解压缩,可以看到里面包含了一些dll文件和一个AppManifest.xaml:
再打开TerryLee.SilverlightDemo2TestPage.aspx文件,在页面的顶部引入了System.Web.Silverlight程序集,支持 Silverlight/>控件: <%@RegisterAssembly="System.Web.Silverlight"Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp"%> Silverlight/>控件的声明如下,其中属性Source属性指定了刚才编译生成的.xap文件的路径: SilverlightID="Xaml1"runat="server" Source="~/ClientBin/TerryLee.SilverlightDemo2.xap" Version="2.0"Width="100%"Height="100%"/> 创建一个HelloWord程序 现在我们创建一个简单的HelloWordSilverlight程序,使用如下XAML创建一个简单的按钮: 运行后效果如下: 为按钮添加Click事件,在XAML编辑器中输入事件名称Click之后,再按Tab键将会使用默认的命名方法生成事件处理方法: 打开Page.xaml.cs文件后,可以看到已经生成了对应的事件处理方法,现在就可以用熟悉的C#来编写处理程序了,如单击按钮时我们改变按钮的背景色和文字: privatevoidmyButton_Click(objectsender,RoutedEventArgse) { this.myButton.Content="Clicked! "; this.myButton.Background=newSolidColorBrush(Colors.Red); } 再运行上面的程序并单击按钮,按钮的文字及背景色发生了变化: 结束语 本篇文章是使用VisualStudio2008开发Silverlight2应用程序的一个入门,相信大家都已经看过ScottGu的文章已经有所了解。 但是为了整个系列完整起见,还是做了一下重复的劳动。 (二)基本控件 本文为系列文章第二篇学习几个基本的控件。 在Silverlight2中,提供了大量的控件,包括Button、、Calendar、CheckBox、DataGrid、DatePicker、GridSplitter、HyperlinkButton、ListBox、RadioButton、ScrollViewer、Slider、ToggleButton、ToolTip、WatermarkedTextBox等,本文将讲述其中的几个控件之用法。 控件之ToggleButton 翻转效果在AJAX时代已经相当多了,Silverlight中内置了ToggleButton控件,可以使用如下XAML代码声明一个ToggleButton: 运行后界面如下: 单击按钮后,控件效果外观效果将会改变: ToggleButton控件有一个很重要的属性IsThreeState,指示控件是否保持三种状态,如设为false,则只会保持两种状态。 控件之WatermarkedTextBox WatermarkedTextBox即水印效果文本框,可以在文本框未获得焦点之前显示一段文字提示信息,也可以显示其它的控件。 如下面的XAML中,在第一个WatermarkedTextBox中指定水印效果为显示一段文字提示“Pleaseenterpassword”,而第二个则指定水印效果为一张图片: 运行后效果如下所示: 单击其中一个文本框: 控件之ScrollViewer ScrollViewer控件使用非常简单,当其中显示的内容超过它自身的大小时,就会有滚动条出现。 通过属性HorizontalScrollBarVisibility和VerticalScrollBarVisibility来控制纵向和横向滚动条是否出现: 运行上面的示例: 控件之ToolTip ToolTip控件很多时候都用于其它控件的内嵌控件,如Button控件的ToolTip附加属性等。 声明ToolTip控件如下面的XAML所示,当鼠标放上按钮时显示一个简单的信息提示: 运行后鼠标放上按钮时效果: 结束语 本文简单的演示了Silverlight2中的几个控件的使用,对于DataGrid和ListBox等控件一般用来显示列表数据,将会在后面的数据绑定中讲述,而其它的诸如Button、TextBlock等控件的使用非常简单,这里不再讲述。 (三)界面布局 本文为系列文章第三篇,学习Silverlight2中的界面布局,Silverlight2中新增加了Grid和Panel两个布局容器,使得界面布局更加的强大和灵活。 Canvas面板 Canvas是在Silverlight1.0时代就有的一种基础布局面板,它采用绝对坐标定位。 可以使用附加属性(AttachedProperty)对Canvas中的元素进行定位,通过附加属性我们指定控件相对于其直接父容器Canvas控件的上、下、左、右坐标的位置。 如下面的XAML声明了两个矩形,它们分别相对于父容器Canvas的左边距是50,相对于父容器Canvas的上边距分别是50和150: 运行后界面的效果如下所示: 除了上面我们用到的Canvas.Top和Canvas.Left两个附加属性外,还有一个Canvas.ZIndex附加属性。 如果指定了两个控件相对于父容器Canvas同样的边距,则后面声明的控件父覆盖前面声明的控件。 这时我们可以使用Canvas.ZIndex属性来改变它们的显示顺序,如下面的XAML声明: Canvas.Top="100"Canvas.Left="100"> Canvas.Top="100"Canvas.Left="100"/> 指定两个矩形相对于父容器Canvas的边距相同,这时默认的后声明的橙色矩形会覆盖蓝色矩形: 指定Canvas.ZIndex为1 Canvas.Top="100"Canvas.Left="100"Canvas.ZIndex="1"/> Canvas.Top="100"Canvas.Left="100"/> 将会让蓝色矩形显示在上面,值最大的显示在最上面: StackPanel StackPanel支持用行或列的方式来进行页面布局,默认情况下所有的子元素会垂直的排列显示,如下面的XAML声明三个矩形: Width="100"Height="50"Margin="10"/> Width="100"Height="50"Margin="10"/> Width="100"Height="50"Margin="10"/> 运行后在界面显示效果如下: 当然我们也可以指定为水平排列,通过Orientation属性指定: Width="100"Height="50"Margin="10"/> Width="100"Height="50"Margin="10"/> Width="100"Height="50"Margin="10"/> 运行后界面显示效果如下: 在这里为了让各个控件之间有一定的距离,使用了Margin属性,该属性类似于HTML中的Margin。 Grid Grid控件类似与HTML中的Table,只不过子元素不用放在单元格中。 通过 如下面的XAML声明: Name="LayoutRoot"Background="#46461F"ShowGridLines="True"> "VerticalAlignment="Center"Foreground="White"> "VerticalAlignment="Center"Foreground="White"> 定义一个两行两列的Grid,做一个简单的用户登录的布局,为了明显起见,把ShowGridLines属性设为True,以便能够显示出边框线。 同时,我们指定了第一行的高度为120,而第二行的则是剩余的高度,用*来指定。 运行后效果如下: 综合实例 分别了解了上面的三个布局控件,接下来我们看一个综合实例,如何完成如下的一个取色器: 首先我们添加一个两行两列的Grid控件,分别指定行高和列宽: Name="LayoutRoot"Background="White"> 添加颜色显示区域,用一个矩形显示,放入Grid的第0行第1列: Name="PreviewColor" Fill="#FF6600"Margin="10"Stroke="#666666"StrokeThickness="2"/> 再添加颜色值显示区,嵌套一个StackPanel控件,让它里面的子控件垂直显示: Name="HexColor"Width="160"Height="30"Text="#FF6600"Margin="10,5"FontSize="11"/> 左边用四个Silder控件和四个TextBlock控件显示,需要对Grid的行进行合并Grid.RowSpan属性: Name="AlphaSlider"Margin="20,0,10,0"Maximum="255"Value="255"ValueChanged="RedSlider_ValueChanged"/> Name="RedSlider"Margin="20,0,10,0"Maximum="255"Value="255"ValueChanged="RedSlider_ValueChanged"/> Name="GreenSlider"Margin="20,0,10,0"Maximum="255"Value="102"ValueChanged="RedSlider_ValueChanged"/> Name="BlueSlider"Margin="20,0,10,0"Maximum="255"Value="0"ValueChanged="RedSlider_ValueChanged"/> 这样我们就完成了上面这样相对复杂的界面布局,对Slider控件添加事件处理程序: privatevoidRedSlider_ValueChanged(objectsender,RoutedPropertyChangedEventArgs { Colorcolor=Color.FromArgb((byte)AlphaSlider.Value,(byte)RedSlider.Value,(byte)GreenSlider.Value,(byte)BlueSlider.Value); PreviewColor.Fill=newSolidColorBrush(color); HexColor.Text=color.ToString(); } 运行后,可以选取不同的颜色值: 结束语 关于界面布局就说到这里,在Silverlight2中,通过上面的三种布局控件相结合,可以进行非常强大和灵活的界面布局。 (四)鼠标事件处理 本文为系列文章第四篇,学习Silverlight2中的鼠标事件处理,支持的鼠标事件包括MouseMove、MouseEnter、MouseLeave、MouseLeftButtonDown、MouseLeftButtonUp。 声明事件 对于鼠标事件我们可以附加到任何Silverlight对象上面,如下面的XAML声明,为两个圆形添加上MouseEnter和MouseLeave事件: Canvas.Top="60"Canvas.Left="80" MouseEnter="OnMouseEnter" MouseLeave="OnMouseLeave"/> Canvas.Top="60"Canvas.Left="280" MouseEnter="OnMouseEnter" MouseLeave="OnMouseLeave"/> 编写事件处理程序,鼠标放上去时和鼠标移开时分别改变圆形的填充色: voidOnMouseEnter(objectsender,MouseEventArgse) { Ellipseell=senderasEllipse; ell.Fill=newSolidColorBrush(Colors.Yellow); } voidOnMouseLeave(objectsender,MouseEventArgse) { Ellipseell=senderasEllipse; ell.Fill=newSolidColorBrush(Colors.Green); } 运行后效果如下: 分别在两个圆形上放上鼠标并移开后如下所示: 使用代码管理事件 除了在XAML中声明事件外,也可以直接使用代码来注册事件,简单的修改一下上面的XAML文件,去掉事件的声明并为两个圆形分别加上Name: Name="ellipse1"Width="120"Height="120"Fill="Orange" Canvas.Top="60"Canvas.Left="80"/> Name="ellipse2"Width="120"Height="120"Fill="Orange" Canvas.Top="60"Canvas.Left="280"/> 在代码中进行事件注册: publicpartialclassPage: UserControl { publicPage() { InitializeComponent(); ellipse1.MouseEnter+=newMouseEventHandler(OnMouseEnter); ellipse1.MouseLeave+=newMouseEventHandler(OnMouseLeave); ellipse2.MouseEnter+=newMouseEventHandler(OnMouseEnter); ellipse2.MouseLeave+=newMouseEventHandler(OnMouseLeave); } voidOnMouseEnter(objectsender,MouseEventArgse) { Ellipseell=senderasEllipse; ell.Fill=newSolidColorBrush(Colors.Yellow); } voidOnMouseLeave(objectsender,MouseEventArgse) { Ellipseell=senderasEllipse; ell.Fill=newSolidColorBrush(Col
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 一步一步 学习 Silverlight