Silverlight布局系统正确优化方法

Silverlight的开发工具的使用之所以能被广大开发者们所接受，除了其功能的强大之外，还有一点就是应用的灵活性。它的各种特点决定了其在这一领域中的领先地位。在这里我们将会为大家介绍一下Silverlight布局系统的优化方法。#t#

我对Silverlight布局系统一直感到不满，原因无他，太过罗嗦尔。它灵活是足够灵活了，但对于界面布局并没有提供一个简洁的表达机制，使得即使非常常见的界面也总是生成一大坨又臭又长的XAML，写得累，看的人更累。特别是和竞争对手Flex的布局机制比较，Flex可以说既灵活又简单，Silverlight则是既灵活又麻烦。

Silverlight里面常用的布局容器几乎都可以挑挑毛病：

Canvas：只支持绝对坐标布局使得Canvas在应用程序布局方面纯粹是个鸡肋，要求稍微灵活一点的界面就派不上用场了。Flex也有一个Canvas，不过Flex Canvas支持左/中/右对齐，并且可以指定绝对宽度或相对宽度，所以Flex Canvas比Silverlight Canvas要好用得多，在各种界面布局里也是常见的选择。

StackPanel：StackPanel不支持Grid的百分比布局是很大的遗憾。很多时候，我只需要单行或单列布局，但控件则需要绝对/相对混合布局，StackPanel不能提供这种灵活性。这使得我不得不使用语法更加罗嗦的Grid。

Grid：如果和GridSplitter联合做多面板布局的话，99%的情况下需要关心的无非是左右或上下两个面板，而Grid和GridSplitter需要指定一大堆属性才能正常工作，增加了无谓的负担。

在忍受这些毛病很长时间以后，我终于决定抛开Silverlight的默认布局容器，自己写一套更加方便的自定义Silverlight布局系统管理器。你可以猜到，我写的这套容器很大程度上参考了Flex，甚至大部分类的命名都向Flex看齐——比如HBox、VBox。和Silverlight内置类冲突的则换个名字，比如FlexCanvas模拟了Flex的Canvas组件，HSplitBox相当于Flex HDevideBox，HeaderBox相当于Flex Panel。

编写自定义容器实际上比原先想象的要简单，无非是实现MeasureOverride/ArrangeOverride两个方法而已。只是要考虑到各种布局情况需要仔细计算。另外一点不满的地方是，创建Dependency Property的语法纯粹是折磨人的工作。

这里仅举一个常见的Silverlight布局系统例子，你可以比较一下用自定义布局可以比默认的布局系统节省多少代码。

例子: 我们都很熟悉的浏览器地址栏，文本框随容器自动扩展。

用Silverlight布局：

 
 
 

  
  
  
< Grid> 
  
  
  
< Grid.ColumnDefinations> 
  
  
  
< ColumnDefination Width="Auto" /> 
  
  
  
< ColumnDefination Width="*" /> 
  
  
  
< ColumnDefination Width="Auto" /> 
  
  
  
< /Grid.ColumnDefinations> 
  
  
  
< TextBlock Grid.Column="0" 
Text="Address" /> 
  
  
  
< TextBox Grid.Column="1" /> 
  
  
  
< Button Grid.Column="2"
 Content="Go" /> 
  
  
  
< /Grid> 
 
 
 

自定义布局：

 
 
 

  
  
  
< yh:HBox> 
  
  
  
< TextBlock Text="Address" /> 
  
  
  
< TextBox yh:Box.Width="100%" /> 
  
  
  
< Button Content="Go" /> 
  
  
  
< /yh:HBox> 
 
 
 

Silverlight布局系统的介绍就到这里，希望对大家有些帮助。