silverlight 布局系统总结

来一张UML图。可以看到各个布局都是继承于 FrameWorkElement 。

可以看到有的布局是继承于 Panel ，有的是继承于Control ， 有的是直接继承于FrameWorkElement。

–Panel: Grid, Canvas, StackPanel 等等

–FrameworkElement: Border,  ContentPresenter

–Control: ContentControl

 

1、继承于Panel 的布局容器是可以容纳多个Child 孩子的，都有一些布局功能的。

2、继承于FrameworkElement 的 Border , ContentPresenter，这两个只能有一个子元素放在它内部

    Border: 主要用于编辑有一些外观的元素。

    ContentPresenter: 这个就完全容纳一个元素在它里面而已。

3、继承于Control 的 ContentControl ，因为是一个Control ，所以他是可以编辑模板的，所以这一个和其它的几个是不同的。也就是说我们想要一个可以容纳一个子元素的容器，他要有比较复杂外观，复杂交互的时候，可以考虑用ContentControl。

 

 

 

详细：

Grid ： 自动剪切特性。如果子元素超过了Grid,那么Grid会自动剪切掉超出部份。

Canvas: 1、没有自动剪切特性，是一个绝对坐标定位的容器。如果子元素超过了Canvas，不会给自动剪切掉，而会超出窗口范畴。

　　　     2、当Canvas中的子元素没有设置Width 和 Height并且是Auto时，这个子元素会的宽度和高度会一直为0

             3、Margin属性: 只有 Left and Top 有效。

             4、当子元素同时设置了 Margin 和 Canvas.Top(Left) 属性， 那么，最终会以 Margin.Left(Top) + Canvas.Left(Top) 这样来布局

StackPanel ：自动剪切特性。如果子元素超过了StackPanel,那么StackPanel会自动剪切掉超出部份

Border ： 1、自动剪切特性。如果子元素超过了Border,那么Border会自动剪切掉超出部份

               2 、 只能放置一个子元素

               3、 有这些可以简单地调整外观的属性： BorderBrush, BorderThickness, CornerRadius, Padding

               4、CornerRadius是可以设置4个圆角的，这么设置 10,10,10,10 这样就4个角都变圆角

               5、 Padding 是可以将里面的子元素与外边框设置一个间隔

ContentPresenter/ContentControl：1、自动剪切特性。

                                                   2、这两个显示的原理是一样的。就是把我们的元素放在这两个的Content属性里面

　　　　　　　　　　　　　　　　　　3、不同点：因为ContentControl是继承于Content 的，所以他有的一些属性是　　　　　　                                                         ContentPresenter没有的，比如：FontFamily, FontSize…

                                                   4、ContentControl可以编辑模板，ContentPresenter不可以。