[T1 Silverlight Training] Day 1 : Overview UI Elements
Silverlight历史微软推出Silverlight的初衷是为了提供跨平台跨浏览器的开发框架从去年开始基本放弃该计划而着重将其打造成Windows Phone 7的开发平台个人觉得这个是正确的毕竟微软自己并没有多大的动力去在其它操作系统上发展而且事实证明它还没有这个能力来一家说了算毕竟未来还是HTML5的。从2007年推出以来每年都有一个新的版本我想应该是2010年开始作为WP7开发平台后才慢慢真正被人重视。Figure 1 Silverlight历史Silverlight应用程序Silverlight应用程序可以以以下三种方式进行运行浏览器插件的方式运行作为独立应用程序运行一般以ClickOnce的方式进行发布作为Windows Phone应用程序运行不管应用程序以那种方式运行应用程序都已XAP的方式进行打包XAP的文件格式即Zip文件格式类似于新的Office内容格式都是以Zip文件格式进行打包内包含了DllContent如jpg, avi, AppManifest等。Silverlight应用程序都是通过相应的装载程序进行加载XAP文件然后通过AppManifest入口文件说明找到相应的启动类或页面进行加载程序加载后运行在Silverlight托管的Runtime之上。XAML学好Silverlight必须要对XAML有深刻理解。对于XAML个人总结两句话用XML的方式来声明对象Figure 2 XML映射到对象在XAML中几乎每个XML节点Element都是声明一个对象Object即上图的XML Element映射到Object对于每个XML的属性Attribute都映射到一个对象的属性Property或者事件Event。因此XAML只是利用XML的方式来声明内存对象而已和用C#代码的作用是一样的只是采用XML作为书写的方式而已。用XML的方式来定义对象树Figure 3 从Logical Tree到Visual Tree用XML的方式来声明对象不仅仅在设置属性上比较方便XML本身的树形结构就和GUI的Render树形结构非常一致因此利用XML天生的嵌套能力可以非常直观和有效的定义界面层级结构。在Silverlight里面大家在XAML Designer上定义的为Logical TreeRuntime在加载XAML后根据Control Template和控件的Visual的定义转化成Visual Tree而最终Render出来如果你需要对系统生成的Visual Tree感兴趣的话可以使用我在之前文章中提到的Silverlight Spy这个工具来进行UI Visual Element的探测。Dependency PropertyDP/Attached PropertyAP对于界面描述语言XAML来说我想其它开发平台也有类似的东西Android有XML UIiOS有xibQt有QML有些甚至比XAML灵活。Silverlight Framework之所以强大应该说离不开Dependency Property(DP)的存在关于DP有以下两点事实:DP是建立在C# Property基础之上的(简单理解有点类似Javascript等动态语言,具有一个字典表来存储属性的值,把默认值存储在Class Level/Static的字典表中,见该篇文章详细分析原理)DP是Silverlight的脊椎骨,几乎所有的UI Element的属性都是DP这么玄乎,那DP到底有什么用? 只有属性是DP,才能实现以下功能Resources: 在Resource中设置属性值Data binding: 支持该属性成为Binding的TargetStyles: 支持使用Style来设置该属性值Animations: 支持利用Animation来Animate该属性Metadata overrides: 支持对属性元数据的重写Property value inheritance: 支持属性值从逻辑树基层WPF Designer integration: 支持对编辑器设计时Attached Property(AP)是基于Dependency Property之上更高级的使用方法,即在某一个Dependency Object之上设置另外一个Dependency Object的Dependency Property属性的值. 打个比方就是公司的笔记本电脑上面贴了公司Asset的标签,Asset标签本身不是笔记本携带的属性,而是公司IT部门强行加上去的,对于笔记本本身没有意义,但是对于公司有意义,需要通过这个Asset标签来进行管理.最常见的Attached Property就是Grid.Column和Grid.Row.TextBox Grid.Row0 …Control继承树我引用一篇文章中的一张控件继承图来阐述Silverlight/WPF核心类的结构。Controls为包含了ControlTemplate来设定其Visual展示如TextBoxContentControl是定义了单一Content属性的控件可以通过ContentTemplate来设置其内容值如ButtonItemsControl为列表类型通过ItemTemplate来控制每个Item的Visual如ListBox如果更加具体分析的话下图为从中抽取最为重要的几个类并解释其在整个Silverlight框架中起的作用。DependencyObject是所有Silverlight控件的最基础类因为在DP必须定义在DependencyObject内。UIElement提供了关于Transform的支持正式RenderTransform是可以在Composite线程上运算和绘画的FrameworkElment定义了三个非常重要的元素DataContextResourcesStyle。它们构建了Silverlight框架的核心至于Silverlight有那些常用控件大家可以直接参考MSDN。Resource StyleResource即为一个哈希表Dictionary可以存放任何类型的对象通过key来进行索引。X:keyApplication.ResourcesStylex:KeyGreenButtonStyleSetterPropertyControl.Background ValueGreen//Style/Application.Resources根据之前的内容我们知道所有的FrameworkElement都定义了Resource属性。Style有点类似CSS中的Style但比CSS的Style强大很多Silverlight中的Style不仅仅为设置显示的样式可以设置任何UIElement的属性的值通过TargetType来定义在Style中能够设置的PropertyName这在编译时就会进行检查。Style产生效果有两种模式自动应用模式即在定义样式时仅指定TargetType而不指定Key则将自动应用该样式到所有该类型的控件上。手工应用模式即在定义样式时指定TargetType同时设定Key要用该种样式必须在控件上手动加上引用ResourceStyle TargetTypeButton x:KeybuttonStyleSetter PropertyBackground ValueGreen /Setter PropertyFontSize Value24 //Style…Button Style{StaticResource buttonStyle} ContentB /LayoutSilverlight中常用的Layout方式主要包括Grid: 表格的方式来进行排版偏移通过Margin实现StackPanel: 横向或者竖向层叠进行排版Canvas通过x,y绝对定位坐标的方式进行控件排版GridStackPanelCanvasGridGrid.RowDefinitionsRowDefinition/RowDefinition/RowDefinition/RowDefinition//Grid.RowDefinitionsGrid.ColumnDefinitionsColumnDefinition/ColumnDefinition/ColumnDefinition//Grid.ColumnDefinitionsmy:Key Grid.Row0 Grid.Column0 .../my:Key Grid.Row0 Grid.Column1 .../.../GridStackPanel OrientationHorizontalImage ... /Image ... /Image ... /.../StackPanelCanvas...TextBlockCanvas.Left20Canvas.Top30TextSilverlight eCard...//Canvas