y2-net4前沿技术课界面布局与视觉呈现

1、Silverlight界面布局与视觉呈现 第五章回顾创建的Silverlight程序中，默认的MainPage类继承自什么类？Grid布局控件的什么属性可用来定义行的集合？预习检查XAML语言是以什么语言为基础的 ？在XAML中设置属性有哪几种方法？本章任务使用Canvas完成两个矩形的布局使用LinearGradientBrush实现渐变效果 使用ImageBrush实现图片背景效果 使用Path完成图形的绘制 使用Polygon完成多边形的绘制 使用ImageBrush和LinearGradientBrush实现背景效果 掌握XAML的基本语法 掌握在XAML中为界面元素添加属性 掌握Ca

2、nvas、StackPanel、Grid三种布局元素 掌握XAML中画刷的使用 掌握XAML中绘图对象的使用 本章目标Silverlight中的XAML Extensible Application Markup Language 界面描述语言 ，将表示与数据彻底分离 XAML提供了图形显示、多媒体文件处理、3D特效等支持使用JavaScript与界面元素交互 XAML语言区分大小写 特点 所有的属性值都必须包含在引号中 所有元素必须封闭 XAML基本语法 声明对象元素 声明了一个矩形区域对象元素某些对象元素本身还可以包含对象元素声明命名空间 XAML文件中必须有且只有一个根元素 包括界面中使

3、用的控件以及相关的类库 包括各种XAML特性 声明命名空间XAML中的属性 XAML中设置属性的方法：使用属性语法 使用属性元素语法 使用内容元素语法 使用集合元素语法 使用属性语法、属性元素语法使用属性语法： 使用属性元素语法： 实例化的对象属性的名称设置的值使用内容元素语法使用内容元素语法： Silverlight没有指名Text属性名通过ContentPropertyAttribute定义的类支持使用集合元素语法使用集合元素语法 ： 可忽略集合本身的对象元素 省略了GradientStopCollection XAML中的事件 如何为按钮添加点击事件？XAML中：C#代码： privat

4、e void btnOK_Click(object sender, RoutedEventArgs e) this.btnOK.Text = HelloWorld;触发事件的对象与该对象相关的状态信息或数据 Silverlight布局元素 Silverlight提供了灵活丰富的布局模型 Grid：由列和行组成的网格区域 Canvas：可使用X和Y值显示定位其子元素的区域StackPanel：可将子元素排成一列或一行布局元素Canvas 基础布局元素通过x和y坐标对其子元素实现绝对定位 Xy通过Canvas.Top附加属性实现 通过Canvas.Left附加属性实现 Canvas. ZIndex

5、：对象的前后呈现位置Canvas示例 使用Canvas完成的图片布局效果 演示示例1：使用Canvas完成图片布局效果代码分析关键代码回顾： 用来获取或设置图像的源文件路径绝对定位布局元素StackPanel StackPanel：将子元素垂直或水平排列在单行中HorizontalAlignment 属性：水平对齐特征 VerticalAlignment 属性：垂直对齐特征 Orientation 属性：子元素的堆叠方向 演示示例2：使用StackPanel实现的图片布局小结1、XAML中可以通过哪几种方法设置属性 ？2、Canvas中的附加属性Canvas.ZIndex 的作用是什么？画刷S

6、olidColorBrush 使用纯色对区域进行填充 显示的透明度演示示例3：使用SolidColorBrush实现Rectangle效果 画刷LinearGradientBrush 线性渐变绘制区域 获取渐变停止点在渐变向量中的位置(0,0.5)(1,0.5)(0,0)(1,1)演示示例4：使用LinearGradientBrush实现渐变效果训练要点：Canvas布局XAML中的属性Rectangle矩形的使用需求说明：实现在一个Canvas中放入两个矩形，并定位、填充颜色改变两个矩形的相对位置指导矩形填充实现思路及关键代码：使用Canvas.Left和Canvas.Top对矩形进行定位使

7、用Canvas.ZIndex更改两个矩形的前后显示顺序指导矩形填充完成时间：15分钟需求说明：在某个矩形区域内，使用画刷实现渐变效果练习矩形内渐变完成时间：15分钟共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解画刷RadialGradientBrush 使用径向渐变绘制区域 GradientOrigin Center RadiusX RadiusY 演示示例5：使用RadialGradientBrush实现渐变效果画刷ImageBrush 使用图片对某个区域进行填充 VideoBrush :使用视频填充某个区域 Hello Center 演示示例6：使用ImageBrush

8、实现文字效果需求说明：使用画刷实现图片 背景效果练习图片背景效果完成时间：15分钟共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解两个点之间绘制一条直线 图形对象Line直线 属性名称说明X1/X2 Line 起点/终点的 x 坐标 Y1/Y2Line 起点/终点的 y 坐标Stroke指定线条的填充画刷StrokeThickness线条的宽度StrokeStartLineCap线条起始点的样式，PenLineCap枚举（Flat 、Square、Round、Triangle）StrokeEndLineCap 获取或设置线条终点的样式 演示示例7：使用Line绘制图形效果绘制

9、一个矩形形状图形对象Rectangle矩形 绘制了一个正方形演示示例8： Rectangle矩形对象的应用绘制一个椭圆形状 图形对象Ellipse椭圆形 绘制了一个圆演示示例9： Ellipse 椭圆对象的应用绘制一个曲线或是由一些基本图形组合而成的一个复杂图形 图形对象Path路径绘图 Geometry的派生对象 名称说明LineGeometry绘制几何直线RectangleGeometry用于绘制二维矩形EllipseGeometry 用于绘制圆或椭圆GeometryGroup组合多个几何图形PathGeometry用于绘制一个可能由弧、曲线、椭圆、直线和矩形组成的复杂形状Path示例使用

10、Path绘制如下图形 多个图形的组合演示示例10： Path对象的应用训练要点：Canvas布局XAML中的属性Path的使用需求说明：使用路径绘制图形指导使用路径绘制图形实现思路及关键代码： 完成时间：15分钟指导使用路径绘制图形共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解图形对象Polygon多边形 绘制一个由多个Point组合而成的闭合的多边形 Points：由一组坐标点组成 ，每组坐标由空格分割 演示示例11： Polygon 对象的应用需求说明：使用Polygon完成等边 直角三角形的绘制完成时间：15分钟练习绘制等边直角三角形共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解图形对象Polyline多线形 绘制一个由多个Point组合而成的不闭合的多边形 起始点与结束点没有闭合演示示例12： Polyline对象的应用需求说明：使用ImageBrush和LinearGradientBrush实现图片背景效果练习实现图片背景效果完成时间：15分钟共性问题集