建立可扩展的Silverlight应用框架.doc

建立可扩展的Silverlight应用框架(WEB开发) 目录 建立可扩展的silverlight应用框架 step-1 1 建立可扩展的silverlight应用框架 step-2 10 建立可扩展的silverlight应用框架 step-3 16 建立可扩展的silverlight应用框架 step-4 23 建立可扩展的silverlight应用框架 step-5：整理Module 27 建立可扩展的silverlight 应用框架 step-6：整理导航模块“LeftNav” 31 建立可扩展的silverlight 应用框架 step-6：整理导航模块“LeftNav” 32 建立可扩展的silverlight应用框架 step-7 final 37 建立可扩展的silverlight应用框架 step-1“本文适合silverlight界面设计师参考，程序开发人员最好也了解一下” 首先来看一下需要实现的效果 这里我主要使用Grid来布局，把界面分为了三部分，头、左部、右部 好整体了解了一下布局，这里我来分布讲解。 之所以使用Grid这个布局控件是因为他能根据当前的浏览器的大小做自适应布局。 如图： 下来一 步 准备一些需要用到的图片素材，现在做界面不一定都是要矢量元素，在合适的地方使用合 适的素材最好。这里是我准备的一些小图片。 建立项 目，在项目中建立一个assets的文件夹，把项目中用到的素材分类放好。 调整 MainPage的大小为800*600 在舞台上新建立一个Border容器，在其内部放置一个Grid控件，并把这个Grid划分为三个 区域。在每个区域内部新建立一个Grid并为他们启好名字。 给border加上投影效果，DropShadowEffect。 在Grid左部区域加上一点渐变效果。 这里运用了我刚才准备的line01.png这个图片 将图片在放入一个Grid中，设置图片的属性，使其按照高度自动延伸。 在设置图片的夫级Grid属性，使其居右按照高度自适应。 最终的效果： 接下来制作Head 在Head的底部添加一个矩形Rectangle，居底，按照宽度自适应，删除边框，为其横向填 充渐变色。 效果如下： 布局已经确定了，这里再添加一些图片做做美化。 演示地址： /u/432136/Samples/OperatingTableDemo/step- 1/OperatingTableTestPage.html 建立可扩展的silverlight应用框架 step-2接上一节，这里我要在左侧添加导航按钮。 先看看需要实现的效果 这里是我的office 2010的截图 我想要模拟这个效果。 因为普通按钮和，类似TapControl是混排在一起的，不太适合用TapControl。所以这里我 选择了ToggleButton。 所以本节主要就是制作ToggleButton的样式。 其实制作样式并不复杂，只要理解好视图状态这个感念以及你现在所要做样式的控件结构 基本就没什么问题了。 我想大多数朋友都是Button控件制作过了样式。 　他的视图状态相对来说比较简单。 这里看一下button和ToggleButton 在我之前的文章里有一篇：“VisualState“视图状态”使用心得”得出来一个结论：各 个VisualStateGroup中的视图状态是可以共存的，VisualStateGroup内部的视图状态只能同 时出现一个，尽量不要在多个VisualStateGroup同时改变同一个元素的属性。 若是在多个VisualStateGroup同时改变同一个元素的属性，blend就会出现如下的提示： 这里实际的操作一下 先确定状态，我需要的是 普通状态： 鼠标滑入： 选中： 确认了状态后就可以具体的制作样式了。 由于和原先的ToggleButton演示变化比较大，所以这里我选择了创建空项。 确认选中base 在这里，把各个状态的演示都分开绘制上去。 然后将他们的透明度都设置是0%，为什么要0%，而不是Visibility = Collapsed。 　 这 里是有原因的 设置Visibility 在运行效率上会比Opacity高一点（原因请看这篇文章 “Silverlight性能优化”），但是视图状态的过渡效果就会完全失效。 由于这个样式比较简单，所以我选择了Opacity，这样在展示效果上会更好一些。 再看一下这三个状态 普通： 滑入： 选中： 接下来在对应状态时候将他们的透明度改成100%即可，最后在设置一下过渡所需要的时间 以及过渡效果即可。 样式建立好之后，我在左部放置了多个ToggleButton，并把他们组合到一个StackPanel中 。 为每一个ToggleButton应用样式，设置属性。 演示地址