深入解读Silverlight的布局原理-技术开发专区

深入解读Silverlight的布局原理

作者：秦春林编辑：胡铭娅 2010-10-13 15:01 来源：秦春林的博客

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

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

　　其实，不是能使用Grid之类的就知道了布局，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吗?如下图：

Silverlight中的布局

　　所以，你现在是不是觉得布局不是那么简单并且很好玩呢?

　　下面我们就来看怎么实现这么酷的东西!

　　基础框架-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

　　类定义：

namespace System.Windows
{
    public abstract class FrameworkElement : UIElement

    {

        protected virtual Size ArrangeOverride(Size finalSize);
        protected virtual Size MeasureOverride(Size availableSize);

        ......

     }

}
　

　　我们看到FrameworkElement定义了一个布局的框架：其中MeasureOverride就是测量过程，ArrangeOverride就是排列过程。我们一般的控件都继承自它，所以就可能建立起了这样一个递归系统。

　　Silverlight要求，要定位可视元素，必须将它们放置于Panel或者其他容器对象中。因为Panel定义了确定如何在屏幕上绘制Panel元素的Children集合成员的布局行为。

　　自定义Panel很简单，从Panel派生并重写其MeasureOverride和ArrangeOverride方法即可。在两个方法中，都可以获取Children属性(下面列举SDK例子)。

　　测量：

protected override Size MeasureOverride(Size availableSize)
{
    int i =0;
    foreach (FrameworkElement child in Children)
    {
        if (i < 9) child.Measure(new Size(100, 100));
        else child.Measure(new Size(0, 0));
        i++;
    }
    return new Size(300,300);
}

　　在MeasureOverride中，必须调用每个子元素的Measure方法，传递该容器可以分配的空间，确定分配多少空间给子级，然后像上级返回整个容器需要的空间大小。该方法会触发子元素执行内部的MeasureOverride方法，如此递归。

　　其实我们想到，测量过程可以是不必要的，排列可以完全按照自己的逻辑进行，它可以不管子元素到底需要多大，但是这样肯定是不行的，除非容器额外了解很多子元素的情况，否则可能排列出的效果很差。那么测量其实是为排列提供一个重要的参考信息：

　　DesiredSize，DesiredSize可以理解为：行政长官给在发放通知的时候给下级一个指标，但是下级会有一个实际需求，而DesiredSize相当于指标和需求之间的最小值。具体的说，DesiredSize在Measure发放之后计算的，布局系统基于传递给Measure的availableSize和元素的固有大小去定子元素的DesiredSize，一般讲DesiredSize设置为两种的最小值。这个值可以在排列的时候作为一个参考依据。

　　排列：

　　在排列处理过程中，必须确定每个子级的布局槽的位置并设置面板的最终大小。当你计算好位置之后，调用每个元素的Arrange方法就可以了，其参数是一个Rect对象，这个对象可以表示一个元素的空间大小和位置。如下所示：

image.Arrange(new Rect(10, 10, 150, 150));

　　该句将元素image放在x为10，y为10的位置，所占宽度和高度都为150的大小空间。

　　定义一个Panel就这里简单，这里是定义Panel规则的地方，你可以设计不同的规则，根据不同的附加属性或依赖属性进行布局。Grid，Canvas，StackPanel等都是经过这样定义的。

　　所以，你可以在这里设计很复杂的计算，使元素按不同的方式布局排列。

　　神秘绝招-让Panel的子元素都具有某种行为

　　如果只是能摆放元素的位置和限制大小，这样未免没有多大的用途，所有元素都只是一个摆设。

　　但是，想到我们前面花了大量篇幅分析得Behavior，试想，我们能不能给容器设置某种行为，让它把这种行为附加到每一个元素，从而让容器还能控制元素的行为呢?哈哈，你太聪明了，没错，这是完全可以的!

　　由于讲过Behavior的原理，以及布局的原理，这里我就不分析代码了，附上源文件供参考，代码写得很粗糙，仅作演示用，请勿用在项目中，这里还是讲一下大概思路：

　　首先定义了一个派生自Panel的类PhotoWallPanel，在ArrangeOverride中将每个元素随机选择了一个位置，并随机旋转了一个角度;

　　然后定义一个Behavior，它作用于PhotoWallPanel，遍历其中的每一个元素，给每个元素添加一个鼠标经过和离开的效果，然后附加到PhotoWallPanel上，值得注意的是：

  <i:Interaction.Behaviors>
            <local:ShowPictureBehavior/>
        </i:Interaction.Behaviors>
    </local:PhotoWallPanel>

　　在XAML中，附加Behavior的代码应该位于Panel的结尾之前，或者在其他字元素之后，这样才能保证将行为添加到元素上，因为XAML是顺序解析的，在前面的元素首先实例化其对象，如果放在前面，这个时候Panel的子元素还没有初始化。

　　总结

　　写了这么多，有的人觉得烦了，确实也是这么点东西写那么多废话，但是自定义Panel以及Behavior这些都是重要的基本概念，如果你想深入Silverlight开发，或者很在意UI，这些应该是必须掌握的。希望本篇能对学习Silverlight的朋友有点启示。

　　值得重视的是，我们看到Silverlight中附加属性的重要性，基本上容器控件都有定义附加属性，而Behavior也是利用附加属性，很值得好好研究，并在项目中充分利用。

　　Blend截图：

　　实际效果

　　补充：

　　经@super110的提示，这里可能忽略了一点东西，而我又仔细分析了一下，可能一般人很容易在这里理解起来比较纳闷。注意，以下描述基于实验，而非基于原理：

　　我们再仔细分析这两个方法：

protected override Size MeasureOverride(Size availableSize)
    {
        foreach (var item in this.Children)
        {
            item.Measure(availableSize);
        }
         return “此返回值将作为该容器的DesiredSize”;
     }

    protected override Size ArrangeOverride(Size finalSize)
    {
        foreach (var item in this.Children)
        {
            FrameworkElement my = item as FrameworkElement;
            my.Arrange(new Rect(0, 0, my.Width, my.Height));
        }

        return “此返回值将作为此容器的ActualWidth和ActualHeight”;
    }

　　在Measure每个元素的时候，这个方法执行完就会产生DesiredSize值，其实它也就是MeasureOverride()方法的返回值。因为这其实是一个递归系统。

　　DesiredSize的取值方法：

　　1，对于非容器类的控件如Image，布局系统会取其所设置的Width和Height与availablesize相比较的最小值，打个比如，这个有点像进入公司的时候老板问你期望的待遇，当然他心中有一个数字，如果你的数字大于他的数字，以他的为准;如果你的数字小于他的数字，以你的为准，我暂且称其为“老板不吃亏原则”

　　2，对于容器控件，由于是我们写代码控制MeasureOverride方法的返回值，所以这个返回值就是该容器的DesiredSize值。换句话说，如果这个容器处于另外一个容器当中，当父容器调用子容器的Measure方法之后，这个子容器返回的值就是它的DesiredSize值。

　　ActualWidth和ActualHeight的计算：

　　1，对于非容器控件，往往是由容器给定的值决定，即容器在调用的Arrange方法的时候，给根据自身规则情况来分配值，这个值就是非容器控件的ActualWidth和ActualHeight

　　2，对于容器控件，其值由ArrangeOverride方法的返回值来确定，原理同DesiredSize一样

　　DesiredSize，ActualWidth和ActualHeight这几个值都是不能在程序中设置的，我们看到它要么由布局系统计算，要么由容器来计算，我们在程序中一般只读取这几个值。

　　源代码下载：http://files.cnblogs.com/hielvis/PhotoWall.rar

关注我们