【真正的Expression Blend实战开发技巧】十一章 全面解析布局(Grid & Canvas &StackPanel &Wrappanel)

时间:2011-04-26 22:29 点击:2185次 字体：[]

　　写这篇文章前，特意在百度搜索了一下，发现目前网上介绍布局的文章不多，质量也不是很高。拿grid和canvas来讲，这两个布局容器还是有许多小细节值得讲的，如果你不了解的话，开发中经常会遇到一些让人匪夷所思的事情。学习silverlight xaml的过程可以分为布局，样式，模板，资源，动画，行为，绑定等几个知识点。我个人觉得布局是最难熟练掌握的。

　　布局，既是基础中的基础，也是难点中的难点：

　　1、无法复用：模板，样式，上手虽难，但因为控件的基本结构是不变的，当你学会为button定义样式后，以后都不会在为button的样式发愁，但是布局不同。几乎没有一个项目的布局是完全一样的。

　　2、标准不一：表面上看起来一摸一样的布局，可能实现的细节完全不同。大多数情况下而你很难用一个标准去规范或者界定，什么时候，应怎样做。

　　3、布局不是一堆控件的堆叠，而是合理的组织，但如何合理的组织，这个经验需要从众多项目中磨练才能具备。

　　4、随着需求的变化，最容易产生变动的就是布局。

　　5、你没办法为布局去写注释，所以一个层次很深很复杂的布局，维护成本就特别高。比如让你修改一个一年以前你写的项目，还要要彻底改变布局结构的时候，即使是我自己写的，我也很难看懂。

　　6、客户对silverlight期待很高，希望界面能够创新，不走寻常路，这样你就可能遇到一些非常规的布局，他们奇特，狂野，而从使用的角度讲，还必须要健壮，有一定的适应性。比如一个异型，镂空，半透明，带阴影的窗体设计，也必须能正确的适应浏览器宽高的变化，能够完整显示所有信息，描述信息能够正确的换行等等。我遇到过的最夸张的需求，客户有一台只支持1024*768分辨率的投影机，和一个分辨率4000:1000(具体数字记不清楚了) 这种宽高比超级特殊的LED墙。他希望你的软件既可以在1024*768下完全显示，又要在LED下可以充满全屏且不变形，而且距离LED十米开发也要能看清楚你界面上的每一个字。

　　7、每次修改布局，都会对他周围甚至整体产生影响，必须非常全面的观察和测试。

　　8、设计布局前还要充分考虑动画设计。

　　9、还有一些特殊情况，你无法在blend中看到设计视图。这个时候只能用一行一行看代码，在脑子里还原程序的轮廓。

　　什么是好的布局？根据我个人的经验，在满足设计需求的前提下，一个好的布局，还需要考虑以下一些方面，

　　1、结构简单

　　2、分层清晰

　　3、层次不要太深

　　3、相对独立

　　4、低耦合

　　5、自适应性强

　　6、使动画实现更简单

　　上面几点不分先后和优先级，你需要根据项目的实际需求和设计以及开发周期，权衡他们的比重。

　　详解Grid　　

　　Grid的最大特点是他可以向四个方向(HorizontalAlignment，VerticalAlignment)填充Usercontrol。同时，他的子元素也可以向四个方向填充他们自己。Grid中所有的子元素都是用margin进行相对定位的（这个相对指相对于父容器Grid)。

　　有几种情况需要特殊注意：

　　1、当我们没有HorizontalAlignment和VerticalAlignment的默认值就是"Stretch"，换句话说如果我们这样写<Rectangle Fill="#FF701313"/>，虽然没有提到明确指定HorizontalAlignment和VerticalAlignment，但此时Rectangle的水平和垂直的填充方式默认就是Stretch。

　　2、请不要忽略margin的细微差别。如下面两张图片中，这个矩形的宽度，对齐方式都是左对齐，上下填充对齐，唯一的区别是margin.right的值一个为88，另一个为0。

标签: Expression Blend 实战开发技巧

------分隔线----------------------------