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

建立可扩展的Silverlight应用框架(WEB开发)目录建立可扩展的silverlight应用框架 step-11建立可扩展的silverlight应用框架 step-210建立可扩展的silverlight应用框架 step-316建立可扩展的silverlight应用框架 step-423建立可扩展的silverlight应用框架 step-5：整理Module27建立可扩展的silverlight 应用框架 step-6：整理导航模块“LeftNav”31建立可扩展的silverlight 应用框架 step-6：整理导航模块“LeftNav”32建立可扩展的silverlight应用框架 step-7 final37建立可扩展的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应用样式，设置属性。演示地址：/u/432136/Samples/OperatingTableDemo/step- 2/OperatingTableTestPage.html建立可扩展的silverlight应用框架 step-3应用架构前边两章都是将的UI方面的知识。这里UI结构已经有了，现在要引人一个开发架构： Composite “Prism”。前期准备工作首先在项目主页下载最新版本的Composite。//downloads/details.aspx?FamilyID=387c7a59-b217-4318- ad1b-cbc2ea453f40&displaylang=en我这里下载的是Composite Application Guidance for WPF and Silverlight - October 2009解压安装编译项目将以下的5个dll找出以作备用至此前期准备工作完成。改造项目1.为项目添加之前准备的几个DLL的引用2.重命名MainPage.xaml为Shell.xaml3.打开Shell.xaml.cs文件将MainPage类重命名为Shell4.在XAML视图中修改x:Class 与之相对应的后端代码关联5.添加Region在Shell.xaml中添加Prism的命名空间xmlns:Regions=clr- namespace:Microsoft.Practices.Composite.Presentation.Regions;assembly=Microsoft.P ractices.Composite.Presentation这样子就可以为Region添加Prism中的依赖属性了。在图中红色区域的Grid中添加一个ItemControl控件6.添加Bootstarpper，在项目中新建立一个Bootstrapper继承自UnityBootstrapper的类 。7.修改App.xaml，在app.xaml中修改其启动方法。至此，项目改造告一段落。下来为下图中的红色区域制作一个HelloWorld来看看效果。8.新建一个名为OperatingTableTestModule的silverlight类库。删除app.xaml、 mainpage.xaml两个文件并添加对“Microsoft.Practices.Composite.dll”和 “Microsoft.Practices.Composite.Presentation.dll”的引用。9.在项目中新建立一个文件夹“Views”，并在这个文件夹下创建一个 HelloPrismView.xaml的文件。在其中绘制如下的图案。10.在项目中添加一个名为HelloPrismModule的类，它派生自IModule接口。在Initialize方法中，将MainRegion与Views中的HelloPrismView相关联。11.再回到OperatingTable项目中，添加其对OperatingTableTestModule项目的引用。找 到Bootstarpper类，修改其GetModuleCatalog方法，使其加载刚才新建立的项目模块。编译项目 运行ok，这里看到了OperatingTableTestModule项目中的View替换了原先的ItemsControl。扩展这里看到了Hello Prism并没有自适应容器，而是根据自身的大小来做的布局。这里有一 个小小的技巧。为ItemsControl加一个Grid模板就可以做到。再次运行如图，他自适应了容器大小，更加的美观了。应用了Prism架构我们可以把界面拆分成若干小的模块，更加方面的以扩展模块的方式来 开发silverlight应用。演示地址：/u/432136/Samples/OperatingTableDemo/step- 3/OperatingTableTestPage.html建立可扩展的silverlight应用框架 step-4通过外部配置文件加载模块module在上一节中为项目引入了“Prism”框架，并建立了一个Hello Prism做测试。这里要把项 目好好的整理一下。使其更加的合理和具有可扩展性。我的目的是，在左侧的导航栏目里点击按钮，相应的右侧的主体部分显示不同的内容。这 些内容都是来自外部加载进来的xap文件。我可以上传管理自己的xap文件。这里来看一下我的整理过程首先将布局划分为两个部分：“LeftNavRegion”、“MainRegion”，一个来承放导航， 一个来承放主体内容。接下来就要加载相关的Module了。关于Module的加载，园子里的包包同学已经对他做了很详细的分析。具体请看Prism研 究（for WPF & Silverlight）5Module研究在看完了他的文章后，了解到加载Module有两种方法：1.手动加载Module例：1protectedoverrideIModuleCatalogGetModuleCatalog()23 ModuleCatalogcatalog=newModuleCatalog()4 .AddModule(typeof(OperatingTableTestModule.HelloPrismModule)5 .AddModule(typeof(OTLeftNavModule.OTLeftNavModule);67return catalog;82.根据配置文件动态加载Module例：1protectedoverrideIModuleCatalogGetModuleCatalog()23 returnModuleCatalog.CreateFromXaml(newUri (/OperatingTable;component/ModulesCatalog.xaml,UriKind.Relative);4 再说一下我需要的，我想通过自己上传xap文件动态的来管理。这里我发现配置文件都是 在xap文件内部的。不过在可以直接传入一个配置文件的流来进行实例化。这里我改造了一下项目，在sl应用刚刚启动的时候就去外部加载这个配置文件，在取到了 流以后，把流赋值给Bootstrapper01privatevoidApplication_Startup(objectsender,StartupEventArgs e)0203bootstrapper=newBootstrapper();04 /去外部加载配置文件05varuri=newUri (HtmlPage.Document.DocumentUri,ModulesCatalog.xaml);06WebClient wb=newWebClient();07wb.OpenReadCompleted+=new OpenReadCompletedEventHandler(wb_OpenReadCompleted);08 wb.OpenReadAsync(uri);091011voidwb_OpenReadCompleted(object sender,OpenReadCompletedEventArgse)1213if(e.Error= null)1415bootstrapper.ModulesCatalogStream =e.Result;16bootstrapper.Run();1718 配置文件“ModulesCatalog.xaml”：15678 这里就可以自己做上一套程序来上传xap文件并且生成配置文件 “ModulesCatalog.xaml”来供给Prism SL应该来读取了。附上现在项目的截图建立可扩展的silverlight应用框架 step-5：整理Module在第三节里边，建立了一个最简单的Module。这里要对其再进行整理。之前我写过一篇 简练的视图模型 ViewModel这里就讲述了一个最最基本的运用视图与模型的例子。用模型 来控制视图的呈现在很早的时候就提出来了。当然Prism这个框架也包括了这一点。这里就要 为Module加入Model。这里记录下整理步骤1.在Module项目中新建立一个Models文件夹，用来存放数据模型。在文件下新建立一个 HelloPrismModel类继承自INotifyPropertyChanged。在构造函数中将视图作为参数传入将视图和模型相绑定。01publicclassHelloPrismModel:INotifyPropertyChanged02 03publicHelloPrismViewviewget;privateset; 0405publicHelloPrismModel(HelloPrismViewview)06 07this.view=view;08view.model =this;091011#regionINotifyPropertyChanged Members1213publiceventPropertyChangedEventHandler PropertyChanged;141516privatevoidOnPropertyChanged (stringpropertyName)1718 PropertyChangedEventHandlerhandler=this.PropertyChanged;19 if(handler!=null)2021 handler(this,newPropertyChangedEventArgs(propertyName);22 2324#endregion25262.在Views文件下新建立一个IHelloPrismView接口。在接口中声明其模型属性1publicinterfaceIHelloPrismView23 HelloPrismModelmodelget;set;43.修改原来的HelloPrismView.xaml继承自IHelloPrismView接口并且实现接口。01publicpartialclassHelloPrismView:UserControl, IHelloPrismView0203privatereadonlyIModuleManager moduleManager;0405publicHelloPrismView()06 07InitializeComponent();0809 publicHelloPrismView(IModuleManagermoduleManager):this()10 11this.moduleManager=moduleManager;12 13#regionIHelloPrismViewMembers1415public HelloPrismModelmodel1617getreturn this.DataContextasHelloPrismModel;18set this.DataContext=value;192021 #endregion224.最后重构一下HelloPrismModule类01publicclassHelloPrismModule:IModule0203 privatereadonlyIRegionManagerregionManager;04private readonlyIUnityContainercontainer;05privatereadonly IModuleManagermoduleManager;0607publicHelloPrismModule (IUnityContainercontainer,IRegionManagerregionManager,IModuleManager moduleManager)0809this.container= container;10this.regionManager=regionManager;11 this.moduleManager=moduleManager;121314 publicvoidInitialize()1516 HelloPrismModelhelloPrismModel= this.container.Resolve();1718 IRegionmainRegion=this.regionManager.RegionsMainRegion;1920 objectview=mainRegion.GetView(mainCurrView);21 if(view!=null)22mainRegion.Remove (view);2324mainRegion.Add(helloPrismModel.view, mainCurrView);252627附录展示一下为Step-4开发的程序来管理我的xap文件。管理界面：生成的配置项：建立可扩展的silverlight 应用框架 step-6：整理导航模块“LeftNav”- 设为首页 加入收藏 站内搜索 网站地图 首页 编程语言 web开发 数据库 网络技术 操作系统 服务器 网页设计 图形设计 办公软件 常用软件 杀毒频道 学电脑 常用范文 ASP PHP JSP 脚本语言 AJAX ASP.NET jQuery Dojo Extjs mootools prototype Silverlight Flex教程当前位置: 首页web开发Silverlight正文 建立可扩展的silverlight 应用框架 step-6：整理导航模块“LeftNav”时间:2011-04-20 博客园 王喆(nasa) 首先说一下我想要实现的效果。我希望在左侧的导航点击了以后右侧的主体部分发声变化。之前我在LeftNav模块用的控件是ToggleButton并为其制作了样式。本来想的是自己根据 ToggleButton作为基础自己在做一个复合控件出来。不过这里做导航的话，ListBox会更加的 适合些。ListBox的样式制作和之前的ToggleButton样式制作大同小异，都是一个原则：各个 VisualStateGroup中的视图状态是可以共存的，VisualStateGroup内部的视图状态只能同时 出现一个，尽量不要在多个VisualStateGroup同时改变同一个元素的属性。下来导航模块“LeftNav”需要从外部加载导航配置文件文件Nav.xml，将其获得的数据 解析并于ListBox做数据绑定。要完成上诉的工作就需要引入Services模块，将各个功能分离 开、各司其职。Nav.xml：12 3456 7这里先定义一个导航的实体类，“LdModule”01namespaceOTLeftNavModule.Entities0203public classLdModule0405/显示名称06 publicstringshownameget;set;07 /View类别08publicstringViewTypeget;set; 09/Module的名称10publicstring xapnameget;set;1112service获取数据并解析1namespaceOTLeftNavModule.Services23public interfaceILeftNavService45void RetrievLdModules(ActionIEnumerable RetrievLdModulesCallBack);6701namespaceOTLeftNavModule.Services0203public classLeftNavService:ILeftNavService04050607 #regionILeftNavServiceMembers0809/ 10/回调函数，用来介绍返回的 LdModule11/12/ 13 publicvoidRetrievLdModules(ActionIEnumerable RetrievLdModulesCallBack)1415 varuri=newUri(HtmlPage.Document.DocumentUri,Nav.xml);16 WebClientwb=newWebClient();17 wb.DownloadStringCompleted+=(sender,e)= RetrievLdModulesCallBack(BuildLdModules(e);18 wb.DownloadStringAsync(uri);192021 /22/解析XML23 /24/25/ 26private IEnumerableBuildLdModules(DownloadStringCompletedEventArgse) 2728if(e.Error!=null) 2930return newListnewLdModule()showname=error,ViewType =error;3132 XDocumentxmlLdModules=XDocument.Parse(e.Result);3334 varldmodules=frommoduleinxmlLdModules.Descendants (module)35select newLdModule36 37showname =(string)module.Attribute(showname),38 ViewType=(string)module.Attribute (ViewType),39 xapname=(string)module.Attribute(xapname)40 ;41return ldmodules;424344#endregion45 46将获取的数据赋给Model类用来做数据绑定01namespaceOTLeftNavModule.Models0203public classLeftNavModel:INotifyPropertyChanged0405 ILeftNavServiceleftNavService;06public LeftNavModel(ILeftNavServiceleftNavService)07 0809ldModules=new ObservableCollection();1011 this.leftNavService=leftNavService;12 this.leftNavService.RetrievLdModules(OnRetrievLdModulesComplete);13 1415/16 /回调函数，为ldModules赋值17/ 18/19privatevoid OnRetrievLdModulesComplete(IEnumerablenewLdModules)20 21this.ldModules.Clear();22 foreach(varmoduleinnewLdModules)23 24this.ldModules.Add (module);25262728 publicObservableCollectionldModules29 30get;31 privateset;32333435 #regionINotifyPropertyChangedMembers3637public eventPropertyChangedEventHandlerPropertyChanged;38 #endregion3940在Xaml里做绑定12 3 4 5最后需要替换右侧的主体Module了，我研究了Composite的Module模块、了解了Module生 命周期。需要做到替换主体部分的思路就是先从主体区域得到当前Module，将其移除再载入 新的Module。这样会比较适合我当前的项目。