Silverlight 布局(附照片墙示例及源码)

  前言

  很喜欢一种人,他们可以把一种技术分析得很透彻,由浅入深,深入浅出,不管你是初学者还是资深人士,看上去都会感觉非常舒服。

  但是有时候,试图去描述一个技术点是很困难的事情。

  开始,你觉得这个技术很有价值,你通过自己花了一定时间去学习,想要把自己的理解与心得分享,于是就打算写一篇随笔;可是当你开笔之后,突然发现描述起来很困难,虽然在你心中那个概念已经很简单了,但是却要用很多文字来描述,而且不同的技术可能有不同的“上下文”,每个人可能也有不同的“上下文”,在写了几个字之后你有点想放弃了;可是最后又不甘心,聪明的你灵机一动,做了一个Demo,大概对着图片描述一下,然后发布,让读者自己去猜吧!

  我想说的是,这并不算心得和学习经验,这充其量算是一篇索引或者“提醒”,读者看了想,还可以这样子,于是又不得不自己去找资料学习。因为你心中的经验没有描述出来啊。

  想想看,我们现在学习技术的途径是什么。可能主要是SDK之类的,其次呢,我相信你印象应该很深刻:其中有一些是别人写的你觉得非常好的文章。很多Blog尤其是国外的Blog已经成为了我们提升技术和积累经验的一种无形的方式。

  文化的传承有口述和媒介承载,口述精准简单,但是也许文字更能深刻的描述事物而且可以反复理解,所以好的文字是文化传载的重要方式。诚然,写技术文章也许需要一点点技巧,有些时候描述一个技术点需要篇幅,需要时间,需要耐心,更需要的是对读者负责,你能为读者带来什么?

  所以,写作需要用心,从构思到文字,这篇文章的价值是什么?你对技术的理解是什么,不要因为时间问题(一篇有内容的文章肯定需要花很多时间)就对你认为核心的理解一笔带过。我相信,这样才是再学习的过程,这样才对得起读者的时间和关注,这样才叫分享!

  Silverlight中的布局

  对于Silverlight学习来说,首先要面对的应该是布局:你得把元素放到你想摆放的位置,然后是考虑元素的层次以及可见性,之后可能你想让它动起来,就学习动画,最后理解更深入之后,可能会开发如Behavior之类的行为,或者设置复杂的控件状态,模板。

  很多教程是从使用Grid开始,然后是Canvas,StackPanel之类的控件,他教你怎样设置元素的位置。然后就没有下文,很少会去讲解布局的原理,不过如果是看Silverlight SDK,是能看到的。其实最好的教程就是Silverlight SDK,包括像两个不同的SL插件(即使它们在不同的浏览器窗口)之间的通信这些一般人没有注意到的特性,里面都是讲得清清楚楚。所以,建议不要花钱去买Silverlight相关的书。

  其实,不是能使用Grid之类的就知道了布局,Silverlight布局包含更多的东西,理解布局系统有利于更深层的理解Silverlight,从而开发更得心应手。遗憾的事初学者理解布局也许有点复杂,可能是因为其中的递归,但是我们生活中其实有很多递归系统的。我试着学习郭欣用铁路系统描述网络传输一样,也来构造这样一个场景。

  故事场景-巴比难题

  我们假设巴比基金现在愿意把所有的钱捐献给某个国家的收入在该国平均收入以下的老百姓。但是他们不能自己去每个地方发放这笔资金,所以要求该国中央政府处理好这件事情,将这笔资金发放到各个省份的相关百姓手中。中央政府高度重视这件事情,但是这么大的工程应该怎样完成了,财政官员很为难?这时候负责行政的长官提出了自己的建议,中央政府觉得很好,于是采纳了该建议。

  行政长官的建议分为两道程序:调查和发放。

  调查:首先中央向各级地方行政官发出调查通知,要求各地方政府统计一下年收入在平均收入以下的人数,并要汇报每个人的差额。省级行政长官在收到通知后统计了一下省会的情况,然后把通知转发给县级行政官;县级行政官接到通知还是首先统计县城的情况,然后转发通知到各个村子。村子就是最小的行政单位了,于是村委会秘密调查了每个人的收入,并计算差额。然后上报给县级,县级在结合县里面的情况,整理一份整个县的报告给省级,省级重新整理,上报给中央政府。

  发放:哈哈,现在中央政府就拿着全国的需求单。哇,全国有1000亿的需求,而巴比只基金只有500亿。也不好意思叫巴比找中国的富豪劝捐。于是只有把每个省的比例缩小一半了,并且最后做了一些调整,有的省份潜力比较好,自己能解决一些问题,就少发放一些,有些地方经济差,就多发了一些,有的省级居然乱报说需要10000亿,可能是计算错误,最后只发了100,有的地方虽然贫穷,但是很有志气,不想要美国人的施舍,一分钱都没有报。

  这样,做一些根据实际情况调整之后,中央政府就按照调整的数额将钱发放到各个省级政府,省级政府拿到钱感到不对劲,感觉跟自己上报金额不一致,但有不好意思反应情况,毕竟上面是老大,想给多少就多少,反应也没有用;但是有些政府也发现比自己期望的要多,有良知的官员还是决定平分到每个县级,但是也有一些官员主张直接贪污算了。

  总之也按中央政府的做法重新调整各个县的发放金额,然后发放到各个县级,最后到村子,村委会在发到每个人手中。

  这个巴比问题就这样解决了。值得注意的是:

  1,各级政府在发放调查通知的时候也可以给县级政府一个指标,我能给你的最大金额,或者最小金额,或者固定金额,或者无限制,你尽管反应实际情况,这样下级政府可能就会在上报前做一个实际调整。但下级也要做好心理准备,这个数字不一定是真的,只是个参考数字。

  2,每个人或政府在发放之后拿到的钱不一样,可能比需要的要多,这个时候政府可以选择贪污或者公平发放,而来百姓会去买二锅头庆祝一下;有时候比需要的少,这个时候就只有拮据点花了。

  读完这个故事,我们想一想,把一定数量的钱一层一层的发到每个人手里,是不是类似于Silverlight把插件大小的空间一块一块地分给每个空间啊?

   布局原理

  没错,Silverlight也是按类似的原理来实现布局:

  首先,所有元素的最顶层必须是一个容器(通常如Grid,Canvas,StackPanel等),然后在容器中摆放元素,容器中也可能包含容器。这里的容器就像行政长官一样,他们负责分配元素的空间。同样,首先顶层的容器一个一个的问自己的子元素:你想要多大的空间?如果子元素也是容器,它又继续向下递归,最后又顶层开始向上汇报。这就是所谓的测量。

  测量完之后就是排列,这个时候每个容器知道自己每个子元素想要的空间大小,就按自己的实际情况进行分配。一致递归到最底层。

  注意上述红色字体部分,通过前面的故事,我们知道,资金的发放完全由行政长官控制,不管下面想要多少,都是他说了算,他甚至可以一分钱都不给,或者给你超多你的预期的数目。

  这里的容器也一样,容器拥有完全的分配权,不过这里容器不仅仅是分配空间,还决定元素的位置,因为空间总是跟位置相关的。也就是说,容器说想给你多大空间你就只有有那么大的空间可使用,容器想让你摆在什么位置,你就得乖乖呆着什么位置。

  只不过,这里的容器是遵守规则的,它遵守开发者指定的规则:

  Grid的规则是:我把我这个空间分成一格一格的格子,看起来有些像Table,在我里面的元素我完全按照附加属性Grid.Row,Grid.Column,Grid.RowSpan,Grid.ColumnSpan来决定其大小和位置。

  Canvas的规则是:我读取附加属性Canvas.Left,Canvas.Right,Canvas.Top,Canvas.Bottom,并以此来决定元素的位置,我通常不限制元素开用空间

  StackPanel的规则是:根据附加属性,我要么让元素横着排列,要么竖着排列。

  聪明的你是不是立刻想到,我可不可以定义自己的规则呢?哈哈,当然可以!比如,你可以让Panel里面的元素随机分布,并可让它们随机旋转一定角度,这不就是现在某些很酷的相册吗;你可以让元素排成一个圆形,这不就是Blend里面的例子吗;你可以让元素根据某个Path元素排列,这不就是PathListBox吗?如下图:   

  所以,你现在是不是觉得布局不是那么简单并且很好玩呢?下面我们就来看怎么实现这么酷的东西!

  基础框架-FrameworkElement

  为Silverlight布局中涉及的对象提供公共API的框架。FrameworkElement还定义在Silverlight中与数据绑定,对象树和对象生存期功能区域相关的API。继承层次结构:

  System.Object
    System.Windows.DependencyObject
      System.Windows.UIElement
      System.Windows.FrameworkElement
        System.Windows.Controls.Border
        System.Windows.Controls.Control
        System.Windows.Controls.Panel
        System.Windows.Shapes.Shape

NET技术Silverlight 布局(附照片墙示例及源码),转载需保留来源!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。