基于微软XAML技术的前端开发方法

使用XAML技术的平台目前包括WPF，Silverlight，Windows8等平台，未来的Windows10统一Windows App也使用XAML技术。

前端开发指通过可视化集成开发环境进行用户界面的设计和实现，结合手动编写XML界面描述代码，完成表现层开发的过程。基于XAML技术的前端开发使用的开发环境是Blend，输出是XAML代码。由于目前版本的Blend 2013存在一些问题，需要和VS配合使用。Blend 2015进行了重大改进，较好地解决了各种问题，但还未发布正式版。

下面总结一下理想的基于XAML技术的前端开发方法，部分流程在小范围内进行了尝试和推广，效果还可以，还需全面尝试和推广。

1.  该部分工作的输入是原型和需求。

原型推荐使用Axure RP或Prototyper（该软件对移动开发的支持较好）来制作，非程序员（如产品经理，UI设计师等），可以方便地绘制界面元素并使用可视化的方法表达交互逻辑。

2.  该部分工作的输出是，a. Style层代码，b. View层代码，c. 样式设计文档，d. View和ViewModel层契约-数据绑定接口文档（与后端人员协商编写）。

样式设计文档和数据绑定接口文档，推荐使用UML的方式表达，因为样式和数据皆为层次结构，存在继承和依赖关系，所以UML表达方式最为合适，推荐使用Visio绘制UML图。

Style层和View层主要使用Blend完成，尽量多地使用可视化开发方法，尽量减少手工编写XAML的工作量。

3.  分析原型，理解需求。

全部前端开发人员都要深入理解需求，连要做什么和为什么做都不清楚，是做不好界面设计和实现的。

4.  开会讨论全部原型和需求中的问题，确定无问题，达成一致的理解。

这里可以认为是第0个里程碑，即前端开发工作的起点，所有人都对需求有了一致的理解，尽量避免以后的争论。

5.  讨论整体设计风格和页面结构的设计。

在这个会上可以用头脑风暴的方式根据原型构思页面的细节展示方式，一般使用几层嵌套结构，确定使用几种标题，几种正文，几种主要字体，字号，颜色等。由一个人在Visio中用UML表达清楚，便于以后使用。这其实是制定了初步的标准，以后大家都要遵守。

6.  根据上一步的讨论，一部分人编写样式设计文档并完成Style层底层的代码。另一部分人针对关键部分出几张PS效果图。两部分要能对应。

7.  第一个里程碑，效果图确认。

效果图需要领导确认。

8.  效果图修改，同时可创建全部空页面和样式文件的框架，描述各个文件都是干什么用的。

如果使用自定义的界面框架，需引入界面框架并依据框架搭建页面结构。

9.  完成全部页面的控件选用和外层布局（可加入颜色指示），可以把绘制了效果图的页面进一步美化，加入Border等元素，设置并抽取样式放入Style层。

10. 第二个里程碑，控件和布局确认。

需要后端人员确认所用控件以及预想的交互逻辑后端人员是否能够实现。

11.  修改控件问题和不合理的布局，优化布局。

12.  完成全部页面的控件内部模板，样例数据，绑定设置。

13.  第三个里程碑，页面确认。

此时包含全部功能的白页面已经完成，需要项目负责人确认所有页面的功能。

14.  数据绑定接口文档应该已经完成，页面已经可以和后端配合，联调测试。

15.  应用前期抽取的样式到全部页面，进一步设置并抽取样式到Style，完善Style层。

注意人员之间的配合，保证一致性。

16.  进入控件内部模板的修改阶段，深度修改并抽取Style。

可从易到难，内部模板的修改也要抽取样式，保证一致性。

17.  进一步完善控件内部模板的动态效果。

如鼠标移上，按下，选中等状态时的样式，可加入动画提升效果。

18.  可以完成预想的动画或考虑加入动画提升效果。

19.  如已接入真实数据，自测，互测，包括不同窗口大小，分辨率，不同真实数据下的情况，记录BUG。

20.  修改BUG。